【JS】淺談常用到的循環：some、every、map、filter

每一種遍歷都有不同的適用場景，下面就來簡單的總結一下：

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 });
  };