ES6 中如何解决数组去重问题

在前端开发中，经常需要对数组进行去重操作。ES6 提供了多种方式来解决这个问题，本文将详细介绍这些方法，并附带示例代码。

1. Set 数据结构

ES6 引入了 Set 数据结构，它类似于数组，但不允许有重复的元素。我们可以利用 Set 实现数组去重。具体操作如下：

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

这里，我们首先把数组转化成 Set，并利用 Set 的去重功能。接着，我们把 Set 转化成数组，得到了我们想要的结果。

2. filter + indexOf

我们还可以利用 filter 和 indexOf 方法来达到数组去重的目的。代码如下：

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

我们利用 filter 方法遍历原数组，只保留第一次出现的元素。我们利用 indexOf 方法判断当前元素是否为第一次出现，如果是，则保留该元素，否则丢弃。这个方法比较常用，但是效率可能不够高。

3. reduce + includes

我们还可以利用 reduce 和 includes 方法来实现数组去重。代码如下：

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

这里，我们利用 reduce 方法遍历原数组，并且利用 includes 方法判断当前元素是否已经存在于新数组中。如果不存在，则将其添加到新数组中。这个方法的效率比 filter + indexOf 高一些。

4. Map 数据结构

最后，我们可以利用 Map 数据结构来实现数组去重。具体操作如下：

-- -------------------- ---- -------
----- --- - --- -- -- -- -- -- ---
----- --- - --- ------
----- ------ - ---
--- ---- - - -- - - ----------- ---- -
    -- ------------------ -
        --------------- ------
        --------------------
    -
-
-------------------- -- --- -- -- -- --

这里，我们利用 Map 数据结构来实现去重功能。具体操作是遍历原数组，如果当前元素不在 Map 中，则将其添加到 Map 中，并加入新数组中。这个方法的效率相对较高，但是代码相对较长。

总结

通过本文的介绍，我们了解了 ES6 中实现数组去重的多种方法，包括 Set 数据结构、filter + indexOf、reduce + includes 和 Map 数据结构。对于不同的场景，我们可以选择不同的方法实现数组去重。通过掌握这些方法，我们能够更加高效地进行前端开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ab3ab9add4f0e0ff4da2a7