在前端开发中,经常需要对数组进行去重操作。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 数据结构来实现数组去重。具体操作如下:
const arr = [1, 2, 3, 3, 4, 5, 5]; const map = new Map(); const newArr = []; for (let i = 0; i < arr.length; i++) { if (!map.has(arr[i])) { map.set(arr[i], true); newArr.push(arr[i]); } } console.log(newArr); // [1, 2, 3, 4, 5]
这里,我们利用 Map 数据结构来实现去重功能。具体操作是遍历原数组,如果当前元素不在 Map 中,则将其添加到 Map 中,并加入新数组中。这个方法的效率相对较高,但是代码相对较长。
总结
通过本文的介绍,我们了解了 ES6 中实现数组去重的多种方法,包括 Set 数据结构、filter + indexOf、reduce + includes 和 Map 数据结构。对于不同的场景,我们可以选择不同的方法实现数组去重。通过掌握这些方法,我们能够更加高效地进行前端开发。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65ab3ab9add4f0e0ff4da2a7