发布时间:2024-12-02 19:01
开发中遇到搜索,数据是这样添加的
this.delHumans.push(...humans); //将搜索出的人员添加到数据项
但是会遇到有重复的情况
filter()
方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素,则返回空数组。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
let arr = [
{id: 1,name: '张三'},
{id: 2,name: '李四'}
];
let nArr = arr.filter((currentValue, currentIndex, selfArr) =>{
console.log(currentValue);
console.log(currentIndex);
console.log(selfArr);
});
打印结果:
{id: 1, name: '张三'}
0
[{id: 1, name: '张三'},{id: 2, name: '李四'}]
{id: 2, name: '李四'}
1
[{id: 1, name: '张三'},{id: 2, name: '李四'}]
findIndex()
方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex()
方法为数组中的每个元素都调用一次函数执行:
注意: 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)
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
方法和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
上面的第二个参数相当于设定了默认值,处理空数组时尤其有用,可避免一些空指针异常。
由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。
比如,
function findLongest(entries) {
return entries.reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, '');
}
findLongest(['aaa', 'bb', 'c']) // "aaa"
上面代码中,reduce的参数函数会将字符长度较长的那个数组成员,作为累积值。这导致遍历所有成员之后,累积值就是字符长度最长的那个成员。
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]
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]
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]
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
利用reduce()方法的累积器作用,在对由对象组成的数组进行遍历时,通过对象hasObj
来标记数组中每个元素id是否出现过。
如果出现过,那么遍历到的当前元素则不会放入到累积器中,
如果没有出现,则添加到累积器中,这样保证了最后返回值中每个数据id的唯一性。
let person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
];
let hasObj= {};
person = person.reduce((cur,next) => {
// true && cur.push(next)惰性求值?--如果最后一个表达式为非false,那么直接返回这个表达式的结果,反之直接是false
hasObj[next.id] ? "" : (hasObj[next.id] = true && cur.push(next));
return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(person);
[{"id": 0,"name": "小明"},
{"id": 1,"name": "小张"},
{"id": 2,"name": "小李"},
{"id": 3,"name": "小孙"}]