【JS】浅析项目中常用到的循环：some、every、map、f

每一种遍历都有不同的适用场景，下面就来简单的总结一下：

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再怎么循环最后仍然是遍历完每一项，不会跳出循环
下面给大家说一种项目中遇到的场景

WeChat8b08b261b9d9d1f50b9eb72db1ae878c.png

如下图：我项目中遇到的情景：只能选择已生效的产品进行留存，如果选中了未生效的产品留存，会弹出警告框
这种场景下，如果用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 });
  };