每一种遍历都有不同的适用场景,下面就来简单的总结一下:
some()是对数组中每一项遍历,只要有一项返回true,则返回true,即:有true为true
举个栗子:
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
console.log(item);
return item > 3;
}));
打印结果为:1,2,3,4 函数返回true,遍历到第四次的时候遇到了一个符合表达式的之后跳出循环,整体结果返回true
every()是对数组中每一项遍历,每一项返回true,则返回true。如果有一项为false,则整体为false,即:全true为true
还是上面的栗子,换成every
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
console.log(item);
return item > 3;
}));
打印结果为 1,false,为什么只打印出来了1,因为第一项就不符合表达式,所以跳出循环,返回false
map()遍历每一项,返回一个新数组,和上面两个方法的区别是不会跳出循环
还是上面那个栗子
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.map( function( item, index, array ){
console.log(item);
return item > 3;
}));
打印出来的结果是:1,2,3,4,5,6 函数返回结果: [false, false, false, true, true, true]
大家有没有发现什么,那就是map再怎么循环最后仍然是遍历完每一项,不会跳出循环
下面给大家说一种项目中遇到的场景
如下图:我项目中遇到的情景:只能选择已生效的产品进行留存,如果选中了未生效的产品留存,会弹出警告框
这种场景下,如果用map遍历则会遍历所有,而且会一只跳出警告框,因为他不会跳出循环,所以这种情况下就用every或者some比较好,具体示例代码如下
let res = this.state.selectedProductRows.every(item=>{
return item.effectState ===1 //状态为1的时候是已生效的时候
}) //res的结果返回的是true/false
if(res){
//这块是true时候的处理逻辑
}else{
message.error('请选择已生效的产品进行留存')
}
filter():同样返回一个新的数组,但是返回的是符合条件的数组项,同样不会跳出循环
还举上面的栗子
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.filter( function( item, index, array ){
console.log(item);
return item > 3;
}));
打印的结果为1,2,3,4,5,6 函数返回结果为[4,5,6]
发现没有,这个函数跟上面几种方法的区别,也就是说filter是返回的是符合项,上面的几种结果返回的是布尔值
filter一般适用的场景:手动删除tag标签/手动删除表格
常用代码如下:
//这个是从antd官网拷贝来的手动删除那块的代码
handleClose = removedTag => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
console.log(tags);
this.setState({ tags });
};