js 高阶函数reduce ——数组取交集、并集
两个数组取交集 vs 多个数组取交集 => js reduce函数的妙用
1、reduce函数的用法及取数组交集
<script>
// 值集数组
let arr1 = [1,2]
let arr2 = [2,3]
let newArr1 = arr1.filter(val=>{
return new Set(arr2).has(val)
})
console.log(newArr1) // [2]
// 对象数组取某个对象元素相同的交集
let arr3 = [{a:'1',b:'12'}, {a:'0', b:'12'}]
let arr4 = [{a:'2',b:'23'}, {a:'0', b:'12'}]
let arr5 = arr3.map(item=>item.a)
let newArr2 = arr4.filter(info=>{
return new Set(arr5).has(info.a)
})
console.log(newArr2) // [{a:'0', b:'12'}]
// 多个数组取交集-reduce()方法对数组中的每个元素执行一个由自己提供的函数,将其结果汇总为单个返回值
let arr6 = [1,2,3]
let arr7 = [3,4,5]
let arr8 = [{a:'2',b:'23'}, {a:'0', b:'12'}, {a:'3', b:'34'}]
// 定义一个取交集的函数
function intersection(getar1, geta2, key) {
let arr = getar1.map(item=>item[key])
let newArr3 = geta2.filter(info=>{
return new Set(arr).has(info[key])
})
return newArr3
}
let getAllObjArr = [arr3,arr4,arr8] // reduce()方法处理处理数组元素,现将所有的数组合并在一个数组中
let getNewArr = getAllObjArr.reduce((a, b)=>{
return intersection(a, b, 'a')
})
console.log(getNewArr) // [{a:'0', b:'12'}]
// reduce函数方法
// reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。
// MDN上的栗子
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// reducer 函数接收4个参数:
// Accumulator (acc) (累计器)
// Current Value (cur) (当前值)
// Current Index (idx) (当前索引)
// Source Array (src) (源数组)
</script>
2、使用reduce函数取并集即对象数组的去重
const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }]
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }]
let arr3 = arr1.concat(arr2)
let result = []
let obj = []
result = arr3.reduce(function (prev, cur) {
// console.log(prev, cur, index, arr, obj) // index-索引,arr-索引
obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur)
return prev
}, [])
console.log(result) //[{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]

浙公网安备 33010602011771号