JS数组去重的4种常用实现方式

作者:拾光时间:2026-10-25 08:33:51浏览:345

本文介绍JavaScript中实现数组去重的四种常用方法。包括利用ES6 Set结合Array.from的最简方案,ES5时代的双重for循环配合splice的经典实现,基于indexOf判断首次出现索引的过滤逻辑,以及利用filter与indexOf组合的高效写法。每种方法均附带完整代码示例与原理说明。

1. 使用ES6的Set类数组进行去重

var arr = [1,2,2,3,3,4,4,1,5,6,6,5]
function unique (arr) {
  return Array.from(new Set(arr))
}

console.log(unique(arr))
 //[1,2,3,4,5,6]

ES6引入的Set数据结构具有自动去重的特性,其内部存储的值保证唯一。虽然Set并非标准数组类型,但可以通过Array.from()方法将其转换为真正的数组对象。在不考虑旧版浏览器兼容性的前提下,这是目前最简洁高效的去重方案。

2. 基于双重for循环的实现

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组
            if (arr[i] == arr[j]) {          // 判断连个值是否相等
                arr.splice(j, 1);           // 相等删除后者
                j--;
            }
        }
    }
    return arr
}
console.log(unique(arr));

该方法结合了双层for循环与splice删除操作,是ES5环境中较为常见的去重手段。外层循环负责遍历数组中的每一项,内层循环则从当前外层项的下一项开始遍历,将后续元素与当前元素进行比较。一旦发现重复值,便使用splice方法将其从原数组中移除。需要注意的是,每次执行splice删除操作后,必须将内层循环变量j减1,以抵消因元素前移导致的索引变化,从而确保后续所有元素都能被正确遍历和比较。

3. 利用indexOf进行去重

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('错误!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
        if (array.indexOf(arr[i]) === -1) {   // 判断索引有没有等于
            array.push(arr[i])
        }
    }
    return array
}
console.log(unique(arr));

indexOf()方法用于检测数组中是否包含指定值:若存在则返回该值第一次出现的索引,若不存在则返回-1;当存在多个相同值时,它仅返回第一个匹配项的索引,不再继续向后查找。实现时,通过for循环遍历原数组,利用indexOf检查当前元素是否已存在于新数组newArr中。如果indexOf返回-1,说明该元素尚未加入新数组,则将其push进newArr;若已存在则跳过。最终返回包含去重后元素的新数组。

4. 结合filter方法实现

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
    return arr.filter( (item, index, arr) => {
        //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
        return arr.indexOf(item) === index;
    });
}
console.log(unique(arr));

此方案将filter与indexOf结合使用。filter遍历数组时,会获取当前元素的索引index以及元素本身item。通过判断当前遍历到的索引值是否等于indexOf(item)返回的索引值来筛选元素。如果两者相等,说明这是该值在数组中第一次出现的位置,予以保留;如果不等,说明当前item是后续出现的重复项,而indexOf返回的仍是首次出现的索引,因此该项会被过滤掉。这种逻辑自然实现了去重效果。

如需了解更多关于JS数组去重的技巧与实现,请参阅下方的相关链接。

作者最新文章