數組方法不混淆

多且易亂的數組方法

js 中對數組操做比比皆是，不論是單純前端操做數組變量，仍是後臺返回的數組形式接口數據，都須要用到數組一些方法操做數組。不知道你們是否是和我同樣常常忘記或混亂數組一些方法，什麼 find()，some()，reduce()等等，還有哪些會改變原始數組哪些返回新數組，真是一頭霧水。

來張圖片壓壓驚

這張圖是我收藏的數組方法圖，上面列出了常見的數組方法及解釋，界面很舒服，應該一看就懂。

看我整理

構造函數 Array 專屬

Array構造函數的方法常見有三種：

Array.isArray(obj)--- 判斷對象是否爲數組，返回布爾

Array.isArray([]) // true
Array.isArray({}) // false

建立新數組

下面兩種方法意在建立新數組，因此我總結在一個大類裏面。

比較常見的有兩種建立形式，你們能夠理解分類記憶。

1. 能夠指定規則：從一個迭代器對象或一個僞數組按照必定規則生成新的數組。

Array.from(arrayLike[, mapFn[, thisArg]])

參數：

arrayLike
想要轉換成數組的僞數組對象或可迭代對象。

mapFn (可選參數)
既然有規則，一定須要指定規則函數。

thisArg(可選參數)
可選參數，執行回調函數 mapFn 時 this 對象。

Array.from('foo')
// ["f", "o", "o"]

let m = new Map([[1, 2], [2, 4], [4, 8]])
Array.from(m)
// [[1, 2], [2, 4], [4, 8]]

Array.from([1, 2, 3], x => x + x)
// [2, 4, 6]

1. 沒有規則，直接生成

Array.of(element0[, element1[, ...[, elementN]]])

參數：

任意參數

Array.of(1)        // [1]
Array.of(1, 2, 3)  // [1, 2, 3]
Array.of(undefined) // [undefined]

實例對象專屬

實例對象的方法是最多的，也是你們容易混淆的，推薦你們從三個大類去記憶。

能夠改變原數組（9個）

splice() 刪除元素而且向數組添加新元素

array.splice(index,howmany,item1,.....,itemX)

參數：

index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。

howmany：必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。

item1, ..., itemX： 可選。向數組添加的新項目。

var fruits = ["Banana", "Orange", "Apple", "Mango"]

fruits.splice(2,1,"Lemon","Kiwi")

// 結果
// [Banana,Orange,Lemon,Kiwi,Mango]

splice() 方法在 ES5 中經常使用來數組去重，至關經典。

var arr = [1,2,2,3,4,2]
  for(var i=0; i<arr.length; i++){
    for(var j=i+1; j<arr.length; j++){
      if(arr[i]==arr[j]){         //若是第一個和第二個同樣，splice方法減去第二個；
        arr.splice(j,1)
        // 設置j-- 防止刪除元素後，下面第一位元素遺漏
        j--
      }
    }
  }
// arr [1, 2, 3, 4]

sort() 排序數組

參數：排序規則函數或無參數

沒有參數：則按照元素的字母升序，若是不是元素不是字符串的話，會調用toString()方法將元素轉化爲字符串的Unicode(萬國碼)位點，而後再比較字符。

排序規則函數：排序規則函數接受兩個參數：a , b，返回一個正數或負數。這裏教你們一個簡單記憶方法：升序不變返回負，降序改變返回正。

var a = [1,3,3,5,2,0]  
a.sort()
// [0, 1, 2, 3, 3, 5]

a.sort((a, b) => {
  return a-b // 升序不變返回負，不變指參數位置不變
})
// [0, 1, 2, 3, 3, 5]

a.sort((a, b) => {
  return b-a // 降序改變返回正
})
// [5, 3, 3, 2, 1, 0]

下面就是兩組頭尾刪除和添加方法，能夠對應記憶

尾部操做

pop() 刪除數組最後的一個元素而且返回

參數： 無

push(item1, item2...) 數組的末尾添加元素並返回新長度

參數：要添加的新元素

// 刪除
var a = [1, 3, 5, 7, 9]
a.pop() // [1, 3, 5, 7]
// 添加
a.push(9, 11)
// [1, 3, 5, 7, 9, 11]

頭部操做

shift() 刪除數組第一個元素並返回

參數： 無

unshift(item1, item2...) 數組頭部添加元素並返回新長度

參數：要添加的新元素

// 刪除
var a = [1, 3, 5, 7, 9]
a.shift() // [1, 3, 5, 7]
// 添加
a.unshift(0) // [0, 1, 3, 5, 7]

reverse() 顛倒數組中元素的順序

參數： 無

let  a =  [1,2,3]
a.reverse()
console.log(a)  // [3,2,1]

下面是 ES6 新增的兩個方法

fill(item, start, end) 用指定元素填充數組

參數：

item(必需): 要填充數組的值

start(可選): 填充的開始位置,默認值爲0

end(可選)：填充的結束位置，默認是爲this.length

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

copyWithin(target, start, end) 指定位置的成員複製到其餘位置並返回替換後的新數組。

參數：

target（必需）：從該位置開始替換數據。若是爲負值，表示倒數。

start（可選）：從該位置開始讀取數據，用哪些數據來替換，默認爲 0。若是爲負值，表示倒數。

end（可選）：到該位置前中止讀取數據，默認等於數組長度。使用負數可從數組結尾處規定位置。

[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

var a=['a','b','c','d','e','f','g','h','i','j']
// 2位置開始被替換,3位置開始讀取要替換的 5位置前面中止替換
a.copyWithin(2,3,5)
// ["a","b","d","e","e","f","g","h","i","j"]

這裏能夠總結下：

1. 替換先後數組的長度保持不變；

2. 讀取數據在終止位置的前一個位置中止，而且保存這個位置的數據不動

3. 讀取出來了多少數據，就須要在前面按順序替換掉多少數據。

上面大類屬於能夠改變原數組的實例方法，下面一大類固然就是不改變原數組了。

不改變原數組（8個）

slice(start, end) 截取數組片斷，返回新數組

參數：

start：（可選）規定從何處開始選取，負數表示從數組尾部算起

end: （可選）沒指定則一直截取到數組最後一個元素，包括最後一個。指定了則截取到指定位置前一個元素。

[1, 2, 3, 4].slice()
//  [1, 2, 3, 4]
[1, 2, 3, 4].slice(1)
// [2, 3, 4]
[1, 2, 3, 4].slice(1, 3)
// [2, 3]

join(str) 按照鏈接符將數組鏈接成字符串並返回字符串

參數：

沒有參數： 則使用 , 鏈接

有參數： 按照參數指定鏈接符鏈接

let a= ['hello','world']
let str=a.join()  // 'hello,world'
let str2=a.join('+')  // 'hello+world'

特別注意：當原始數組中含有對象時，使用 join() 方法鏈接時會把對象轉成 [object Object]字符串，看下面：

var b = [{name: 'pubdreamcc', age: 24}, 'test']
b.join()
// [object Object],test

cancat(item1,item2...) 合併多個數組並返回

參數：

能夠是數組對象：等待合併的數組

也能夠是具體的值（元素）： 等待合併的元素

var a = [1, 2, 3]
var b = [4, 5, 6]
a.concat(b)
// [1, 2, 3, 4, 5, 6]

a.concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

toLocaleString() 數組轉字符串

參數： 無

該方法一樣也是數組轉字符串，是將數組中每個元素調用自身的toLocaleString() 方法後用 , 鏈接獲得的字符串。

能夠理解爲先把數組中每一個元素都調用下 toLocaleString() 方法，再把獲得的結果數組調用 join() 方法。

let a=[{name:'pubdreamcc'},24,'cc',new Date()]
a.toLocaleString()
// [object Object],24,cc,2019/7/18 下午1:52:20

toString() 數組轉字符串

這個方法應該比較熟悉，它是定義在 Object 原型上面的一個方法，用來把一個對象轉成字符串，在這裏其實同 join(無參數) 方法效果同樣。

實際開發中不推薦使用。

indexOf(item, start) 查找數組某個元素並返回其第一次出現位置下標

參數：

item（必需）: 須要查找的元素值

start（可選）: 規定在數組中開始檢索的位置（0-array.length）

若是沒找到，返回 -1

var a = [1, 2, 1]
a.indexOf() // -1
a.indexOf(1) // 0
a.indexof('1') // -1

注意： indexOf()不能識別NaN， 由於 NaN 與任何數不相等，包括自身。

lastIndexOf(item, fromIndex) 查找數組某個元素並返回其最後一次出現位置下標

該方法與 indexOf() 剛好相反，查找不到一樣返回 -1

參數:

item(必需): 被查找的元素

fromIndex(可選): 逆向查找開始位置，默認值數組的長度-1，即查找整個數組。

let a=['cc',4,'pubdreamcc',1,2,'pubdreamcc',3,4,5,'pubdreamcc'] // 數組長度爲10
 // let b=a.lastIndexOf('pubdreamcc',4) // 從下標4開始往前找 返回下標2
 // let b=a.lastIndexOf('pubdreamcc',100) //  大於或數組的長度 查找整個數組 返回9
 // let b=a.lastIndexOf('pubdreamcc',-11) // -1 數組不會被查找
 let b=a.lastIndexOf('pubdreamcc',-9) // 從第二個元素4往前查找，沒有找到 返回-1

下面這個方法是 ES7 中新增

includes(item, fromIndex) 查找數組是否包含某個元素返回布爾

參數：

item (必需)：要查找的元素

fromIndex (可選)： 默認值爲0，參數表示搜索的起始位置，接受負值。正值超過數組長度，數組不會被搜索，返回false。負值絕對值超過長數組度，重置從0開始搜索。

注意： includes()方法能夠檢測 NaN

let a=['cc','pubdreamcc',1,NaN]
// let b=a.includes(NaN) // true 識別NaN
// let b=a.includes('pubdreamcc',100) // false 超過數組長度 不搜索
// let b=a.includes('pubdreamcc',-3)  // true 從倒數第三個元素開始搜索
// let b=a.includes('pubdreamcc',-100)  // true 負值絕對值超過數組長度，搜索整個數組

總結完了數組的基本兩大類方法後，接下來咱們開始上數組的遍歷方法。

遍歷方法 （12個）

數組的遍歷也是很是重要，在實際項目開發中用的不少，不一樣的場景使用不一樣的遍歷方法能夠加快咱們開發速度。

數組的遍歷並不會改變原始數組。

forEach(func, thisValue) 遍歷數組，爲每一項執行一次回調函數

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

array.forEach((value, index, arr) => {}, thisValue)

關於 forEach() 這裏須要注意的幾點：

1. 沒法中途退出循環，只能用return退出本次回調，進行下一次回調。

2. 它老是返回 undefined值,即便你return了一個值。

3. 若是在回調中須要更改數組中的基本類型數據，請使用 array[index] = XXX，不能直接給 value 賦值。

every(func, thisValue) 檢測數組全部元素是否都符合判斷條件返回布爾

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

若是有一項元素執行回調返回false，剩餘元素再也不執行回調，整個方法返回 false

若是全部元素都知足條件，則整個方法返回 true。

[12, 5, 8, 130, 44].every(x => x >= 10) // 判斷數組中每一個元素是否大於或等於 10
// false

some(func, thisValue) 檢測數組中的是否有知足條件的元素返回布爾

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

some() 剛好和 every() 相反，只要數組中有一項知足條件判斷，則整個方法返回 true，若是所有元素都不知足條件，則返回 false。

[12, 5, 8, 130, 44].every(x => x >= 10) // 判斷數組中是否有元素大於或等於 10
// true

filter(func, thisValue) 按照條件過濾原始數組返回新數組

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

var arr1 = [1, 3, 8, 4, 6, 7, 2]
var arr2 = arr1.filter((item, index)=>{return item > 5})
// 從原數組中過濾出大於 5 的元素
// [6, 7, 8]

map(func, thisValue) 對數組中每一個元素進行一次回調，返回回調返回的元素組成的數組

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

能夠發現這個幾個方法的參數都同樣，只是返回值不一樣而已。

let a1 = ['1','2','3','4']
let a2 = a1.map((value, index) => {
  return +value
})
// [1, 2, 3, 4]

reduce(func, initialValue) 爲數組提供一個累加器，把數組合併爲一個值

reduce() 方法不少人搞的不是很清楚，也包括本身，講真的這個方法還真有點繞，可是弄明白以後確實能夠給咱們帶來不少的便利。

參數：

func（必需）：指定的回調函數

initialValue（可選）：傳遞給回調的初始值，說白了便是回調第一個參數 prev 的初始值。

func(prev, curr, currIndex, arr)

參數解析：

prev（必需）: 函數上一次 return 回來的值。若是提供了 initialValue，則初始值爲initialValue，若是沒有提供，則 prev初始值爲數組第一個元素。

curr（必需）: 當前執行回調時，數組中的元素

currIndex（可選）: 當前執行回調時，數組中元素的下標

arr（可選）：當前元素所屬的數組對象

利用 reduce() 方法 咱們操做數組更加方便，例如一些常見的例子：

1. 數組元素求和

var arr = [1, 3, 5, 7, 9]
var sum = arr.reduce((prev, curr) => {
  return prev+curr
})
// 25

1. 統計數組中元素出現的次數

var arr = ['cc', 'cc1', 'cc', 'cc2', 'cc1', 'cc', 'cc5']
var obj = arr.reduce((prev, curr) => {
  if (!prev[curr]) {
    prev[curr] = 1
  } else {
    prev[curr] += 1
  }
  return prev
}, {})

// {'cc': 3, 'cc1': 2, 'cc2': 1, 'cc5': 1}

reduceRight(func, initialValue) 從右至左的方向把數組累加爲一個值

該方法同上面講的 reduce() 方法使用基本一致，只不過累加的方式爲數組的末尾向前將數組中的數組項作累加。

下面幾個關於遍歷的方法是 ES6 新增的，一種關於查找，一種是關於遍歷。

find(func, thisValue) 找出第一個符合條件的數組成員並返回

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

若是沒有找到，則返回 undefined

var arr = [1, 3, 5, 7]
var num = arr.find((item, index) => {return item > 1})
// 3

findIndex(func, thisValue) 找出第一個符合條件的數組成員下標並返回

參數：

func（必需）：指定的回調函數

thisValue（可選）：當執行回調函數時this綁定對象的值，默認值爲undefined

若是沒有找到則返回 -1

var arr = [1, 3, 5, 7]
var index = arr.findIndex((item, index) => {return item > 1})
// 1

注意：

這兩個方法均可以識別 NaN,彌補了indexOf 的不足。

keys()&values()&entries() 遍歷鍵名、遍歷鍵值、遍歷鍵名+鍵值

這三種方法都會返回一個新的 Array Iterator 對象

array.keys() 返回一個包含數組全部下標組成的 Iterator。

array.values() 返回一個包含數組全部元素組成的 Iterator。

array.entries() 返回一個包含數組元素加下標組成的 Iterator。

返回的 遍歷器 能夠用 ES6 提供的 for...of 循環來遍歷。

for (let index of ['pubdreamcc', 'pubdreamcc1'].keys()) {
  console.log(index)
}
// 0
// 1

for (let item of ['pubdreamcc', 'pubdreamcc1'].values()) {
  console.log(item)
}
// 'pubdreamcc'
// 'pubdreamcc1'

for (let [index, item] of ['pubdreamcc', 'pubdreamcc1'].entries()) {
  console.log(index, item)
}
// 0 "pubdreamcc"
// 1 "pubdreamcc1"

結語

花了將近一下午的時間來整理出數組的一些方法，但願本身可以更加清晰包括理解 它們 的用法，固然最最重要仍是在平時擼碼的過程當中可以運用到對的地方加快開發效率，畢竟我們學技術仍是要服務於產品，把技術變現呢。

最後，但願你可以細心看完，保證你會有不同的收穫。

參考資料

阮一峯 ES6 數組擴展

路易斯 [深度長文]JavaScript數組全部API全解密