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

_嗚啦啦啦火車笛發表於2019-04-10

  最近手頭上做了一個很大的後臺管理專案,前端對複雜資料的處理要求頗高,也確實讓自己發現了很多之前被忽視的細節。在此特整理出來,希望不熟悉的朋友們們以後可以繞開我踩的這些坑。本文初衷在於幫助大家梳理一些陣列操作上的重點和易錯點,希望也能幫助和提醒大家,我會盡可能寫的幽默些,加深大家的記憶。水平有限,真心無限。希望大家喜歡,本文很基礎很基礎,請大神繞道,謝謝。。。我不知道為什麼成了熱門。。。

一、常用方法解析

  說起陣列操作,我們肯定第一反應就是想到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絕對不會改變陣列;當是引用型別,則可以改變陣列

  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. 不會在迭代之前建立陣列的副本,這個使用場景太少太少了,忽略了...

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同樣也會改變,所以這也不費事嘛。。。

  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]。別和我說你簡單處理一下就能湊合用, 人生不能湊合,程式碼也是!

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)=> {
   return 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幫我們,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()

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

相關文章