JS數組方法大彙總(ES5和ES6)，是時候檢測你對數組的瞭解了

0 前言

---

本文的內容將ES5提供的比較經常使用方法和ES6中新增的方法進行了彙總，同時列舉出了各個方法的特色、使用方法、注意事項、是否改變原數組、返回值等信息。這是一個彙總大綱，不會詳細講解每一個方法的使用，只是列舉出了要點。方便記憶以及查詢。同時能夠檢測本身是否對該方法瞭如指掌了。

若是你都掌握如下列舉的方法，那邊你對JS的數組算是瞭如指掌了。

本文如有錯誤之處，還望不吝指正！

1 正文

---

如下是ES5中的已有的方法：

1. Array.isArray(value)

• ES5提供的判斷一個值是否爲數組的方法
• 該方法沒有instanceof因爲環境不一樣致使準確的問題。可能有兼容性問題
• Object.prototype.toString.call(value) == "[object Array]"。使用該方法沒有兼容性，也是經常使用的方法

2. map( (item, index, array) => {})

• 對數組每一項運行給定的函數，返回每次調用函數的結果組成的數組
• 不會改變原數組，返回值是一個新數組
• 若是數組元素是對象，那麼是淺拷貝過去，修改對象屬性會影響到原數組對象的屬性

3. filter((item, index, array) => {})

• 對數組進行過濾，對數組每一項運行給定的函數，返回該函數返回true的項組成的數組
• 返回是一個新數組，不會影響到原數組
• 一樣，對於對象元素，是淺拷貝

4. forEach( (item, index, array) => {})

• 遍歷函數，不會修改原數組，該方法沒有返回值
• 沒法使用break終止循環，意味着forEach是沒法終止循環的
• for循環可以使用continue跳過本次循環，forEach中能夠return false 來跳過本次循環

5. some((item, index, array) => {})

• 用於查詢數組中的項是否知足某個條件
• 只要有一項返回true，則調用結束，返回true。所有返回false，則調用結果爲false
• 不會改變原數組

6. every((item, index, array) => {})

• 用於查詢數組中的項是否知足某個條件
• 只要有一項返回false，則調用結束，返回false。所有返回true，則調用結果爲true
• 不會改變原數組

7. reduce( (prev, cur, index, array) => {}, init)

• 數組的歸併方法
• 第二個參數可選，做爲歸併的起始值，默認是數組第一個元素
• 第一次歸併是，prev是數組第一個元素，cur爲第二個元素，返回值爲下次歸併的prev。以此類推
• 返回值是最後一次歸併的回調函數返回值
• 不會改變原數組

8. reduceRight

• 同reduce，reduce是從左邊開始歸併，reduceRight是從右邊開始歸併

9. splice(deleteIndex, deleteNum, addValue1, addValue2, ...)

• 該方法算是最強大的數組方法了，在指定位置開始(deleteIndex，包括該位置)，刪除相應個數(deleteNum)，並在該位置插入相應值(從第三個參數開始，依次插入)
• 該方法能夠實現對數組的刪除、插入、替換
• 返回值爲一個數組，包含從原數組刪除的想，沒有刪除則返回空數組
• 該方法會修改原數組

10. indexOf(value, start)

• 查找某個元素的索引
• 內部使用全等符號，必須嚴格相等
• 第二個參數指定查找起點
• lastIndexOf()從右到左，indexOf從左到右
• 可使用ES6中includes、find、findIndex代替

11. slice(start, end)

• 返回新數組，不會改變原數組
• 截取原數組一段返回，從start（包括）位置，到end（不包括）結束位置

12. concat

• 合併數組，返回新數組，不會改變原數組
• 沒有傳參，返回當前調用該方法的數組(淺拷貝)
• 若是參數不是數組，依次加入到數組末尾，若是是數組，將數組拆開(只能拆開一層)依次加入到末尾

13. sort(function)

• 數組各項比較時會先調用數組項的toString()方法，因此比較時字符串的比較，

14. reverse()

• 顧名思義，就是對數組進行倒序，該方法是在原數組上進行的，會修改原數組
• 返回值是原數組

15. join(symbol)

• 以給定的符合將數組鏈接起來，返回值爲字符串
• 如何元素中有數組，會把元素數組合並放入該位置

數組的shift、unshift、push、pop會改變原數組，shift返回第一個元素、pop返回最後一個元素、unshift在首部加入一個元素，返回值爲添加後數組長度、push在末尾加入一個元素，返回值爲添加後的數組長度。

如下是ES6新增方法：

1. Array.from(targeObj, mapFunction, mapThis)

• 生成數組的方法，返回值爲一個新數組
• 從類數組對象、數組、實現了iterator接口的對象生成一個數組
• 是對原對象的拷貝，且是淺拷貝，意味着修改新的數組元素會影響到原對象
• 若是數組元素爲非對象類型，修改新數組不會影響到原對象
• 能夠接受第二個參數，一個函數，至關於map函數，對每一個元素進行相應處理再放入新數組中
• 第三個參數，指定第二個參數函數內this

2. Array.of(val1, val2, val3, ....)

• 生成數組的方法，返回一個新的數組
• 經過將一組數據生成數組
• 解決Array()因爲參數不一樣產生不一樣行爲的問題
• 當參數爲空時，返回一個空數組

3. copyWithin(target, start = 0, end = this.length)

• 在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組
• 該方法會修改當前數組
• 結束參數不包括end位置
• 數組長度不變，數組start到end-1的元素會從target(包括該位置)開始依次覆蓋數組原有成員
• 參數能夠是負數，表示倒數

4. find((value, index ,arr) => {})

• 找出第一個符合條件的數組成員，當回調函數中返回true，則符合條件；若是都沒有，則返回undefined
• 接受第二個參數，用來綁定回調函數的this對象

5. findIndex

• 使用與find一致，該方法返回數組成員的位置

6. fill(value, start, end)

• 將給定的值，填充數組
• 第二個參數，指定填充的起始位置(包括該位置)
• 第三個參數，指定填充的結束位置(不包括該位置)
• 若是填充的對象是對象，那麼賦值的是同一個內存地址的對象，也就是淺拷貝(嗯，淺拷貝，就知道會發生什麼事)

7. entries()

• 用於遍歷數組
• 返回值爲數組，裏面的元素也是數組，第一元素是下標，第二個是元素值。[[0, 'a'], [1, 'b'], [3, 'c']]

8. keys()

• 用於遍歷數組
• 返回數組的鍵名組成的數組

9. values()

• 用於遍歷數組
• 返回數組鍵值組成的數組

10. includes(start = 0)

• 返回值一個布爾值，判斷數組是否包含給定的值
• ES2016引入該方法，相似於字符串的includes方法
• 第二個參數指定搜索的起始位置，若是是負數，表示倒數位置
• 相對於indexOf，該方法更加語義化。另外NaN.includes(NaN)返回true，而indexOf不能判斷。
• 可使用ES5中的some方法實現該功能

11. flat()

• 對數組內嵌套的數組「拉平」，就是把數組中的數組的元素挨個拿出來，放數組元素所在位置，返回一個新的數組，不會影響到原來的數組
• 接收第二個參數，只能拉平的層數，默認只有一層。想無限拉平能夠傳入Infinity關鍵字

12. flatMap(function)

• 同flat同樣，先執行map函數再進行拉平
• 只能拉平一層