es6数组中对象去重
1. filter()用法
filter()
方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素,则返回空数组。
- 注意: filter() 不会对空数组进行检测。
- 注意: filter() 不会改变原始数组。
let arr = [ {id: 1,name: '王五'}, {id: 2,name: '李赵六'} ]; let nArr = arr.filter((value, index, Arr) =>{ console.log(value); console.log(index); console.log(Arr); });
打印结果:
{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.1 找出字符长度最长的数组成员。
function findLongest(entries) { return entries.reduce(function (longest, entry) { return entry.length > longest.length ? entry : longest; }, ''); } findLongest(['aaa', 'bb', 'c']) // "aaa"
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]
三、总结方案:
在JavaScript和es6中介绍一些常见的方法
使用Set:ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set,然后将Set转换回数组,可以实现去重。
const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5]
使用filter()方法和indexOf()方法:利用Array的filter()方法和indexOf()方法,可以过滤出不重复的元素。
const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.filter((value, index, self) => { return self.indexOf(value) === index; }); console.log(uniqueArr); // [1, 2, 3, 4, 5]
使用reduce()方法和includes()方法:利用Array的reduce()方法和includes()方法,可以遍历数组并累积不重复的元素。
const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); console.log(uniqueArr); // [1, 2, 3, 4, 5]
使用Map:利用Map数据结构的特性,可以实现数组的去重。
const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values()); console.log(uniqueArr); // [1, 2, 3, 4, 5]
这些方法都可以实现对数组的去重操作。具体选择哪种方法取决于个人偏好和性能需求。在ES6中引入的Set和箭头函数等特性使得数组去重更加简洁和高效。