掘金：關于forEach，map，fiter循環操作 · 前端知識備忘錄

## 本文作者來自掘金——嗚啦啦火車笛！為了避免原作者刪除特此搬運記錄 [TOC] # forEach、map、filter、find、sort、some等易錯點整理 ??最近手頭上做了一個很大的后臺管理項目，前端對復雜數據的處理要求頗高，也確實讓自己發現了很多之前被忽視的細節。在此特整理出來，希望不熟悉的朋友們們以后可以繞開我踩的這些坑。本文初衷在于幫助大家梳理一些數組操作上的重點和易錯點，希望也能幫助和提醒大家，我會盡可能寫的幽默些，加深大家的記憶。水平有限，真心無限。希望大家喜歡，請不要吝嗇你們的贊，謝謝 ## 一、常用方法解析 ??說起數組操作，我們肯定第一反應就是想到forEach()、map()、filter()等方法，下面分別闡述一下各方法的優劣。 ### 1、forEach #### 1.1 基礎點 ??forEach的使用頻率很高，多用于對數組自身的改變和各元素相關統計性的計算，重要特性如下： 1. 可以改變數組自身，沒有返回值； 2. 中途不能用常規操作跳出循環，可以用拋出異常（try/catch）的方式，但不推薦這樣做； #### 1.2 易錯點 1. forEach()不一定改變自身數組。我們可以看看數組中的元素是值類型和引用類型場景下，是否都能獲得改變： ~~~ var arr1 = [ {name:'鳴人',age:16}, {name:'佐助',age:17} ]; var arr2 = [1,2,3]; arr1.forEach(item => { item.age = item.age + 1} ); //=> [{name:'鳴人',age:17},{name:'佐助',age:18}] arr2.forEach(item => { item = item * 2} ) // => [1,2,3] 復制代碼 ~~~ 最后的結果是，arr1發生了改變，鳴人、佐助都長了一歲，arr2沒有任何改變。所以，可以粗暴得出結論：**當數組中元素是值類型，forEach絕對不會改變數組；當是引用類型，則可以改變數組** 2. 不支持鏈式操作，所以以下代碼是錯誤的： ~~~ [1,2,3,4,5].forEach( item => console.log(item) ).filter(item => { return item > 2 }) // Uncaught TypeError: Cannot read property 'filter' of undefined 復制代碼 ~~~ 注意這里我們說僅僅是forEach()這個方法不支持鏈式調用，在調用forEach之前，前面的數組你怎么玩鏈式都沒問題，最后返回一個正常數組即可： ~~~ // 這個沒問題 [1,2,3,4,5].filter(item => { return item > 2 }).forEach(tem => { console.log(item) }) 復制代碼 ~~~ 3. 不會在迭代之前創建數組的副本，這個使用場景太少太少了，忽略了... ### 2、map ??map()功能很強大，forEach()的一些局限性它很多都能解決。"map"即"映射"，也就是原數組被"映射"成對應新數組。 #### 2.1 基礎點 1. 新建一個數組，需要有承載對象，也意味著原始數組在調用它后不會發生變化; 2. 該數組中的每個元素都調用一個提供的函數后返回結果。 #### 2.2 易錯點 1. 創建新數組不代表不能用它改變原有數組，你用原有數組去承載就可以： ~~~ let arr = [1,2,3]; arr = arr.map(item => { return item * 2 }) 復制代碼 ~~~ arr同樣也會改變，所以這也不費事嘛。。。 2. map()中每個元素都要執行相應的回調函數，所以必須要有return（千萬別學某些人，判斷過程一復雜，忘了return，最后得到的是個空數組，哭天喊地的~~~），如果你想給數組做一定的過濾處理，那map()基本上行不通： ~~~ let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item }) // => [undefined, undefined, undefined, 4, 5] 復制代碼 ~~~ 最終得到的結果是\[undefined, undefined, undefined, 4, 5\]。別和我說你簡單處理一下就能湊合用，人生不能湊合，代碼也是！ ### 3、filter ??map()沒法做到的過濾，就交給filter()去完成，這個大家肯定也都知道。filter()和map()很像，就像周董《東風破》和《發如雪》一樣像，也是創建一個新數組，新數組中的元素是篩選出來的符合條件的所有對象。簡單寫個例子： ~~~ let newArr = [1,2,3,4,5].filter(item =>{ if(item > 3) return item }) // => [4,5] 復制代碼 ~~~ 這個相信也沒啥易錯點，有的話歡迎評論指出~~~ ### 4、sort() sort()用于對數組的元素進行排序。排序順序可以是字母或數字，并按升序或降序。 #### 4.1 基礎點 1.默認排序按字母升序（更準確一些是根據字符串Unicode碼點）： ~~~ [3,4,2,1,5].sort() // => [1,2,3,4,5] ['Javascript','Vue','React','Node','Webpack'].sort(); // => ["Javascript", "Node", "React", "Vue", "Webpack"] 復制代碼 ~~~ #### 4.2 易錯點 1. sort()與map()、filter()等不同，它直接改變原始數組（很重要！）； 2. 如果想按照其他標準進行排序，就需提供比較函數compareFunction(a,b)，數組會按照調用該函數的返回值排序，即a和b是兩個將要比較的元素： * 如果compareFunction(a,b)小于0，則a排列到b之前； * 如果 compareFunction(a, b)等于0，a和b的相對位置不變（并不保證）; * 如果 compareFunction(a, b)大于0，b排列到a之前；直接上例子： ~~~ let Users = [ {name:'鳴人',age:16}, {name:'卡卡西',age:28}, {name:'自來也',age:50}, {name:'佐助',age:17} ]; Users.sort((a,b)=> { a.age - b.age }) // => 鳴人、佐助、卡卡西、自來也復制代碼 ~~~ ### 5、some() some()也是很好的一個方法，用于檢查數組中是否有某些符合條件。 #### 5.1 基礎點 1. 只要有一個滿足即返回true，之后的不再執行(所以說對性能很友好！)。 ~~~ var result = [ {name:'鳴人',age:16}, {name:'佐助',age:17} ].some(item => { return item.age > 16 }); => true 復制代碼 ~~~ #### 5.2 易錯點 ??some()和下面講的every()返回的都是`Boolean`值，僅此而此，別多想...... ### 6、every() ??如果說some()是"||"判斷，那every()就是"&&"判斷，它用于檢測數組中的每一項是否都滿足條件，只有都滿足了才會返回true。這點也很好理解： ~~~ var result = [ {name:'鳴人',age:16}, {name:'佐助',age:17} ].every(item => { return item.age > 16 }); => false 復制代碼 ~~~ ## 二、其他經典方法 ??在我們的日常工作中，會有很多業務需求是上述方法做不到的，比如下面三個需求： 1. 給一個數組做去重處理; 2. 判定當前數組里是否有某個元素，并返回該元素; 3. 判定當前數組里是否有某個元素，并把它去除; 針對需求1，我相信看到"去重"，你肯定會想到`new Set()`，這也是個經常出現的面試題；針對需求2，當你看到判定當前數組中是否有某個元素，也許會說`filter()`不就是干這臟活累活的嗎？還真不是，不信，我們分別展開討論一下吧。 ### 1\. 數組去重（沒你想的那么簡單） #### 1.1 new Set() 的局限性 ??數組去重，基本上論壇上各位大神的面試題里都會有這個，沒錯，正是new Set()，很經典的辦法，面試必備： ~~~ let tempArr = new Set([1,2,3,3,4,4,5]) // => {1,2,3,4,5} //并且已有元素是添加不進去的： tempArr.add(3) // => {1,2,3,4,5} tempArr.add(6) // => {1,2,3,4,5,6} 復制代碼 ~~~ 恩，很棒，一定注意new Set()會將結果轉換成對象！但實際工作中我們很少會和元素是值類型的數組打交道，那看看元素是引用類型還行不行： ~~~ let mySet = new Set(); mySet.add(1); // Set(1) {1} mySet.add(5); // Set(2) {1, 5} mySet.add(5); // Set(2) {1, 5} 這里體現了值的唯一性 mySet.add('some text'); [...mySet] // => [1,5,'some text'] mySet.add({name:'jay Chou',age:40}); mySet.add({name:'jay Chou',age:40}); [...mySet] // => [1,5,'some text',{name:'jay Chou',age:40},{name:'jay Chou',age:40}] 復制代碼 ~~~ 看到了吧，Set()沒法去重元素是引用對象的數組。那接下來咋整呀？ #### 1.2 \_.uniqWith() 別擔心，[Lodash](https://link.juejin.im/?target=https%3A%2F%2Fwww.lodashjs.com%2F)幫我們，Lodash是一個一致性、模塊化、高性能的JavaScript實用工具庫。它有提供給了我們一個很好的方法——\_.uniqWith()： ~~~ import _ from 'lodash'; <script> var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }]; _.uniqWith(objects, _.isEqual); </script> //=> [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }] 復制代碼 ~~~ 其中，`_.isEqual(value,other)`用于執行深比較來確定兩者的值是否相等。`_.uniqWith()`做去重處理。 ### 2\. 獲取數組中的指定元素 ??在工作中我們還有一個比較常見的場景，就是在數組中找到我想要的那一個，并且返回給我。好的，some()已經辦不到了，它只會告訴我是否存在，filter()確實可以做到，但是如果我本身就知道這個數組里即使有我想的那個，也肯定只有一個，不可能出現多個，所以，出于性能的考慮，我不想用filter()給我從頭遍歷到尾，這樣怎么辦？ #### 2.1 findIndex() ??好了，既然filter()不支持中斷遍歷，那我們就要找一個能中斷遍歷的方法，我們可以使用`for...of`，該方法支持中斷遍歷，但是該方法代碼量較大，不建議使用，感興趣的同學可以查閱一下。針對這個場景，我們可以使用`findIndex()`幫我們先獲取到所需元素的索引值，拿到索引后，你要殺要剮隨你便 ~~~ let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}] let index = testArr.findIndex(item => { return item.age > 16 }); // => 1 復制代碼 ~~~ 或者也可以使用Lodash提供的`_.findIndex()`，通過對象屬性值直接獲取對應索引： ~~~ let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}] let index = _.findIndex(testArr, {name:'佐助'}); // => 1 復制代碼 ~~~ 注意：IE 11 及更早版本不支持`findIndex()`方法。所以，如果對瀏覽器兼容有要求，那就用Lodash的`_.findIndex()` #### 2.2 find() ??`find()`顧名思義，就是用來在數組中找到我們所需要的元素，并且和`some()`一樣，只要有一個滿足即返回該元素，不會多余遍歷，對性能很友善。 ~~~ let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:27},{name:'佐助',age:17}] let result = testArr.find(item => { return item.name == '佐助'}); // => { name:'佐助',age:17 } 復制代碼 ~~~ 但是！很遺憾IE 11 及更早版本也不支持 find()。