【ES6】es6数组中对象去重，数组对象去重方法总结

2024-07-06 10:51| 来源: 网络整理| 查看: 265

es6数组中对象去重方法一： filter()与findIndex()给数组去重1. filter()用法2. findIndex()用法3. 去重实战方法二：reduce()去重1. reduce()用法1.1 找出字符长度最长的数组成员。1.2 扁平化二维数组1.3 扁平化多维数组1.4 数组去重1.5 对象内的属性求和 2. 去重实战

开发中遇到搜索，数据是这样添加的this.delHumans.push(...humans); //将搜索出的人员添加到数据项但是会遇到有重复的情况

方法一： filter()与findIndex()给数组去重 1. filter()用法

filter()方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素，则返回空数组。注意： filter() 不会对空数组进行检测。注意： filter() 不会改变原始数组。

打印结果：

{id: 1, name: '张三'} 0 [{id: 1, name: '张三'},{id: 2, name: '李四'}] {id: 2, name: '李四'} 1 [{id: 1, name: '张三'},{id: 2, name: '李四'}] 2. findIndex()用法

findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。 findIndex()方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。注意: findIndex() 并没有改变数组的原始值。

[3, 10, 18, 20].findIndex(value => value>11); // 2 (18的下标是2) [3, 10, 18, 20].findIndex(value => value>1); // 0 (3的下标是0) [3, 10, 18, 20].findIndex(value => value>30); // -1 (不存在则返回-1) 3. 去重实战 let arr = [ {id: 1,name: '张三'}, {id: 2,name: '李四'}, {id: 1,name: '张三'}, {id: 2,name: '李四'} ]; let nArr = arr.filter((currentValue, currentIndex, selfArr) = >{ return selfArr.findIndex(x = >x.name === currentValue.name) === currentIndex }); console.log(nArr);

结果：

[{"id": 1,"name": "张三"},{"id": 2,"name": "李四"}]

其他方法：

var m = new Map(); person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, "")); 方法二：reduce()去重 1. reduce()用法

reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。

区别： reduce是从左到右处理（从第一个成员到最后一个成员）， reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

注意: reduce() 对于空数组是不会执行回调函数的。

语法： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total 累积变量，默认为数组的第一个成员currentValue 当前变量，默认为数组的第二个成员currentIndex 当前位置（从0开始）arr 原数组这四个参数之中，只有前两个是必须的，后两个则是可选的。 // total为最终累计值 let total = [1, 2, 3, 4, 5].reduce(function (a, b) { console.log(a, b); return a + b; }); // 1 2 // 3 3 // 6 4 // 10 5 // 15

如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function (a, b) { return a + b; }, 10); // 25

上面的第二个参数相当于设定了默认值，处理空数组时尤其有用，可避免一些空指针异常。

由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。比如，

1.1 找出字符长度最长的数组成员。 function findLongest(entries) { return entries.reduce(function (longest, entry) { return entry.length > longest.length ? entry : longest; }, ''); } findLongest(['aaa', 'bb', 'c']) // "aaa"

上面代码中，reduce的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。

1.2 扁平化二维数组 let arr = [[0, 1], [2, 3], [4, 5]] let newArr = arr.reduce((pre,cur)=>{ return pre.concat(cur) },[]) console.log(newArr); // [0, 1, 2, 3, 4, 5] 1.3 扁平化多维数组 let arr = [[0, 1], [2, 3], [4,[5,6,7]]] const newArr = function(arr){ return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) } console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7] 1.4 数组去重 let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => { return accumulator.includes(current) ? accumulator : accumulator.concat(current); }, []); let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null] let arr = [...new Set([1, 2, 2, 4, null, null])]; // [1,2,4,null] 1.5 对象内的属性求和 var result = [ { subject: 'math', score: 10 }, { subject: 'chinese', score: 20 }, { subject: 'english', score: 30 } ]; var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, 0); console.log(sum) //60 2. 去重实战

利用reduce()方法的累积器作用，在对由对象组成的数组进行遍历时，通过对象hasObj来标记数组中每个元素id是否出现过。如果出现过，那么遍历到的当前元素则不会放入到累积器中，如果没有出现，则添加到累积器中，这样保证了最后返回值中每个数据id的唯一性。

【本文地址】

公司简介

联系我们