您的位置:

详解 ES6 数组去重

一、Set去重

ES6 中提供了全新的数据类型Set,它具有可以存储任何类型的值,且每个值都是唯一的特性,这意味着它可以实现数组去重。利用Set去重的代码可以非常简洁高效:

const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const newArr = Array.from(new Set(arr));
console.log(newArr); // [1, 2, 3, 4]

首先定义一个数组arr,然后使用new Set()将其转化为Set,最后用Array.from()方法将Set转化为数组newArr,这样新数组newArr中的元素就已经去掉了重复的数字。

Set去重有一个非常明显的优势,它可以去掉基本数据类型以外的数据类型,例如对象:

const arr = [{a: 1}, {a: 2}, {a: 1}];
const newArr = Array.from(new Set(arr));
console.log(newArr); // [{a: 1}, {a: 2}]

这种方法的缺点是生成了新的数组,浪费一些空间。

二、filter方法去重

filter()方法传入一个回调函数,该函数返回true时,当前元素才会保留下来,可以利用这个特性去重:

const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const newArr = arr.filter((item, index) => {
    return arr.indexOf(item) === index;
});
console.log(newArr); // [1, 2, 3, 4]

我们用filter()方法来过滤元素,然后利用indexOf()方法判断该元素是否是第一次出现,如果是就保留下来。这种方法与Set方法相比,代码量相对较长。

三、Map去重

Map是一种可以存储任意类型键值对的有序集合,我们可以将数组中的元素作为key,值设为1,最后将Map的键返回成一个新数组:

const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const map = new Map();
const newArr = [];
arr.forEach((item) => {
    if(!map.has(item)) {
        map.set(item, 1);
        newArr.push(item);
    }
});
console.log(newArr); // [1, 2, 3, 4]

这种方法在去重的同时保留了数组原有的顺序。

四、reduce方法去重

reduce()方法对数组中的每一个元素执行一个指定的操作,并把结果汇总为单个返回值。我们可以在reduce方法中判断当前元素是否在此前已经出现过,如果出现过就跳过,否则将其加入新数组中:

const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const newArr = arr.reduce((prev, cur) => {
    if(!prev.includes(cur)) {
        prev.push(cur);
    }
    return prev;
}, []);
console.log(newArr); // [1, 2, 3, 4]

reduce方法的第二个参数可以指定初始值,上面代码中我们将其设为一个空数组。相比于filter方法,这种方法在效率上稍微逊色一些。

五、双重for循环去重

最简单的去重方法是遍历数组,使用双重for循环依次判断数组中的每一个元素是否重复:

const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const newArr = [];
for(let i = 0; i < arr.length; i++) {
    let flag = true;
    for(let j = 0; j < i; j++) {
        if(arr[j] === arr[i]) {
            flag = false;
            break;
        }
    }
    if(flag) {
        newArr.push(arr[i]);
    }
}
console.log(newArr); // [1, 2, 3, 4]

这种方法最为原始,缺点就是时间复杂度较高,不适用于大规模数据的去重。

六、使用lodash

使用第三方库lodash可以大大简化数组去重的操作:

const _ = require('lodash');
const arr = [1, 2, 3, 4, 4, 3, 2, 1];
const newArr = _.uniq(arr);
console.log(newArr); // [1, 2, 3, 4]

在使用lodash时我们需要先安装,可以使用npm install lodash命令进行安装。

七、小结

本文详细介绍了6种ES6数组去重的方法,包括Set去重、filter方法去重、Map去重、reduce方法去重、双重for循环去重以及使用第三方库lodash。不同的方法有不同的优缺点,我们可以根据场景和需求选择最适合的方法。