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

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

1、經常使用方法解析

  提及數組操做，咱們確定第一反應就是想到forEach()、map()、filter()等方法，下面分別闡述一下各方法的優劣。

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

1. 不支持鏈式操做，因此如下代碼是錯誤的：

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

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

二、map

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

2.1 基礎點

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

2.2 易錯點

1. 建立新數組不表明不能用它改變原有數組，你用原有數組去承載就能夠：

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

arr一樣也會改變，因此這也不費事嘛。。。

1. 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]。別和我說你簡單處理一下就能湊合用，人生不能湊合，代碼也是！

三、filter

  map()無法作到的過濾，就交給filter()去完成，這個你們確定也都知道。filter()和map()很像，就像周董《東風破》和《發如雪》同樣像，也是建立一個新數組，新數組中的元素是篩選出來的符合條件的全部對象。簡單寫個例子：

let newArr = [1,2,3,4,5].filter(item =>{
   if(item > 3) return item 
})
//  => [4,5]

這個相信也沒啥易錯點，有的話歡迎評論指出~~~

四、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)=> {
   return a.age - b.age
})

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

五、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值，僅此而此，別多想......

六、every()

  若是說some()是"||"判斷，那every()就是"&&"判斷，它用於檢測數組中的每一項是否都知足條件，只有都知足了纔會返回true。這點也很好理解：

var result = [
   {name:'鳴人',age:16},
   {name:'佐助',age:17}
].every(item => {
    return item.age > 16 
});
=> false

2、其餘經典方法

  在咱們的平常工做中，會有不少業務需求是上述方法作不到的，好比下面三個需求：

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幫咱們，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>。

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