forEach、map、filter、find、sort、some等易錯點整理

最近手頭上做了一個很大的後臺管理項目，前端對複雜數據的處理要求頗高，也確實讓自己發現了很多之前被忽視的細節。在此特整理出來，希望不熟悉的朋友們們以後可以繞開我踩的這些坑。本文初衷在於幫助大家梳理一些數組操作上的重點和易錯點，希望也能幫助和提醒大家，我會儘可能寫的幽默些，加深大家的記憶。水平有限，真心無限。希望大家喜歡，請不要吝嗇你們的贊，謝謝

一、常用方法解析

說起數組操作，我們肯定第一反應就是想到forEach()、map()、filter()等方法，下面分別闡述一下各方法的優劣。

1、forEach

1.1 基礎點

forEach的使用頻率很高，多用於對數組自身的改變和各元素相關統計性的計算，重要特性如下：

可以改變數組自身，沒有返回值；
中途不能用常規操作跳出循環，可以用拋出異常（try/catch）的方式，但不推薦這樣做；

1.2 易錯點

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絕對不會改變數組；當是引用類型，則可以改變數組

不支持鏈式操作，所以以下代碼是錯誤的：

[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(item => {
   console.log(item) 
})

不會在迭代之前創建數組的副本，這個使用場景太少太少了，忽略了...

2、map

map()功能很強大，forEach()的一些侷限性它很多都能解決。"map"即"映射"，也就是原數組被"映射"成對應新數組。

2.1 基礎點

新建一個數組，需要有承載對象，也意味着原始數組在調用它後不會發生變化;
該數組中的每個元素都調用一個提供的函數後返回結果。

2.2 易錯點

創建新數組不代表不能用它改變原有數組，你用原有數組去承載就可以：

let arr = [1,2,3];
arr = arr.map(item => { return item * 2 })

arr同樣也會改變，所以這也不費事嘛。。。

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 易錯點

sort()與map()、filter()等不同，它直接改變原始數組（很重要！）；
如果想按照其他標準進行排序，就需提供比較函數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)=> {
   return a.age - b.age
})

// => 鳴人、佐助、卡卡西、自來也

5、some()

some()也是很好的一個方法，用於檢查數組中是否有某些符合條件。

5.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，我相信看到"去重"，你肯定會想到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幫我們，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

<font color=red>注意：</font>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 }

<font color=red>但是！很遺憾IE 11 及更早版本也不支持 find()</font>。

在實際工作中，對數組的各種操作必須要做到嫺熟、嫺熟、再嫺熟，希望我整理的這些問題都能對大家有所收穫。好了，就這麼多吧，後面遇到其他問題了再接着補充，希望大家喜歡！謝謝你們的贊！

forEach、map、filter、find、sort、some等易錯點整理

一、常用方法解析

1、forEach

1.1 基礎點

1.2 易錯點

2、map

2.1 基礎點

2.2 易錯點

3、filter

4、sort()

4.1 基礎點

4.2 易錯點

5、some()

5.1 基礎點

5.2 易錯點

6、every()

二、其他經典方法

1. 數組去重（沒你想的那麼簡單）

1.1 new Set() 的侷限性

1.2 _.uniqWith()

2. 獲取數組中的指定元素

2.1 findIndex()

2.2 find()

forEach、map、filter、find、sort、some等易錯點整理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結