摘要：如果沒有提供初始值，則將使用數(shù)組中的第一個元素。如果有錯誤或不嚴謹?shù)牡胤剑瑲g迎批評指正，如果喜歡，歡迎點贊

除了Object類型之外，Array類型恐怕是js中最常用的類型了，并且隨著js的發(fā)展進步，數(shù)組中提供的方法也越來越來，對數(shù)組的處理也出現(xiàn)了各種騷操作，此篇文章將會帶你重新學習數(shù)組中的實例方法

1、join()方法接收一個字符串作為分隔符，并返回用分隔符連接的數(shù)組項字符串

參數(shù)：分隔符字符串

const arr = [1, 2, 3]
console.log(arr.join("|")) // "1|2|3"

2、toString()方法返回數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串

參數(shù)：無

const arr = [1, 2, 3]
console.log(arr.toString()) // "1,2,3"

1、push()方法接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組末尾，并返回修改后的數(shù)組長度

參數(shù)： item...（多個數(shù)組項）

let arr = ["a", "b", "c"]
const count = arr.push("d")
console.log(count) // 4
console.log(arr) // [ "a", "b", "c", "d" ]

2、pop()方法從數(shù)組末尾移除最后一項，減少數(shù)組的length，返回移除的項

參數(shù)：無

let arr = ["a", "b", "c"]
const item = arr.pop()
console.log(item) // "c"
console.log(arr) // [ "a", "b" ]

1、shift()方法移除數(shù)組中的第一項，并返回該項，同時數(shù)組長度減1

參數(shù)：無

let arr = ["a", "b", "c"]
const item = arr.shift()
console.log(item) // "a"
console.log(arr) // [ "b", "c" ]

2、unshit()方法在數(shù)組前端添加任意個項，并返回新數(shù)組的長度

參數(shù)：item...(多個數(shù)組項)

let arr = ["a", "b", "c"]
const count = arr.unshift("d", "e")
console.log(count) // 5
console.log(arr) // [ "d", "e", "a", "b", "c" ]

1、reverse()方法用于反轉(zhuǎn)數(shù)組中每一項，并返回反轉(zhuǎn)后的數(shù)組

參數(shù)：無

let arr = ["a", "b", "c"]
console.log(arr.reverse()) // [ "c", "b", "a" ]

2、sort()方法用將數(shù)組排序，并返回排序后的數(shù)組

參數(shù)：compareFunction(可選)

- 若不傳compareFunction，sort()方法回調(diào)用每個數(shù)組項的toString()方法，然后比較得到的字符串
```js
let arr = [2, 3, 10]
arr.sort()
console.log(arr) // [ 10, 2, 3 ]
```
"10"位于"2"之前
- 若傳compareFunction(a,b)，如果返回值小于0，則a位于b之前，如果返回值等于0則位置不變，如果返回值大于，則b位于a之前
```js
let arr = [2, 5, 3, 1]
arr.sort((a, b) => {
  if (a < b) {
    return -1
  } else if (a > b) {
    return 1
  } else {
    return 0
  }
})
console.log(arr) // [ 1, 2, 3, 5 ]
```

1、concat()方法創(chuàng)建當前數(shù)組一個副本，然后將接收到的參數(shù)添加到這個副本末尾，最后返回新構(gòu)建的數(shù)組

參數(shù)：item...(可以是數(shù)組項，也可以是數(shù)組)

let arr = [1, 2, 3]
let newArr = arr.concat(4, 5, [6, 7])
console.log(newArr) // [ 1, 2, 3, 4, 5, 6, 7 ]

2.slice()方法基于當前數(shù)組中的一或多個項創(chuàng)建一個新數(shù)組

參數(shù): start(起始位置),end(結(jié)束位置，可選)

let arr = [1, 2, 3, 4]
let newArr = arr.slice(1, 3)
console.log(newArr) // [ 2, 3 ]

tip: 如果slice方法的參數(shù)中有一個負數(shù)，則用數(shù)組長度加上該數(shù)來確定相應的位置

3、splice()方法用法有多種，根據(jù)不同的用法需要傳遞的參數(shù)也不一樣

刪除：可以刪除任意數(shù)量的項，指定兩個參數(shù)：刪除的第一項位置和刪除的數(shù)量

插入：可以向指定位置插入任意數(shù)量的項，第一個參數(shù)：插入的位置，第二個參數(shù)0（刪除0），第三個參數(shù)以后要插入的項

替換：可以將指定位置的項替換，第一個參數(shù)要替換項的位置，第二個替換項個數(shù)，第三個參數(shù)以后新的項

let arr = [1, 2, 3, 4, 5]
arr.splice(0, 1)
console.log(arr) // [ 2, 3, 4, 5 ]
arr.splice(1, 0, "hello", "world")
console.log(arr) // [ 2, "hello", "world", 3, 4, 5 ]
arr.splice(3, 1, "js")
console.log(arr) // [ 2, "hello", "world", "js", 4, 5 ]

1、indexOf()方法從頭開始查找指定項，找到返回對應數(shù)組下標，沒找到返回-1

參數(shù)：item(要查找的數(shù)組項),index(指定開始查找的位置，可選)

let arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(3, 3)) // -1

2、lastIndexOf()方法用法和indexOf基本一致，只是從數(shù)組尾部開始查找

1、every()方法對數(shù)組中每一項運行給定函數(shù)，如果該函數(shù)對每一項都返回true，則返回true

參數(shù)：callback(item, index, arr)

let arr = [3, 4, 5, 6]
let result = arr.every((item) => item > 2)
console.log(result) // true

2、some()方法對數(shù)組中任意一項運行給定函數(shù)，如果該函數(shù)對任意一項返回true，則返回true

參數(shù)：callback(item, index, arr)

let arr = [1, 2, 3, 4]
let result = arr.some((item) => item > 3)
console.log(result) // true

3、map()方法對數(shù)組中的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組

參數(shù)：callback(item, index, arr)

let arr = [1, 2, 3]
let result = arr.map(item =>  item * 2)
console.log(result) // [ 2, 4, 6 ]

4、filter()方法對數(shù)組中的每一項運行給定函數(shù)，返回該函數(shù)調(diào)用會返回true的項組成的數(shù)組

參數(shù)：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.filter(item => item > 2)
console.log(result) // [3, 4, 5]

5、forEach()方法對數(shù)組中的每一項都運行給定函數(shù)，沒有返回值

參數(shù)：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
  console.log(item) // 1 2 3 4 5
})

tip: 修改item的不會影響遍歷的數(shù)組項

1、reduce()方法對數(shù)組中的每一項執(zhí)行一個reducer函數(shù)(升序執(zhí)行)，并將結(jié)果匯總為單個返回值

參數(shù)：callback(accumulator(累計器累計回調(diào)的返回值)，currentValue(數(shù)組中正在處理的元素)，currentIndex(數(shù)組中正在處理的元素的索引，如果提供了initialValue，則起始索引號為0，否則為1，可選)，array(調(diào)用reducer的數(shù)組)), initialValue(作為第一次調(diào)用callback函數(shù)時的第一個參數(shù)的值。 如果沒有提供初始值，則將使用數(shù)組中的第一個元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報錯，可選)

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
})
console.log(result) // 15 1+2+3+4+5

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
}, 10)
console.log(result) // 25 10+1+2+3+4+5

2、reduceRight()方法用法與reduce()方法一致，只是redeceRight()方法調(diào)用從數(shù)組尾部開始，向前遍歷

1、from()方法將類似數(shù)組的對象和可遍歷的對象轉(zhuǎn)化為數(shù)組

參數(shù)：arrayLike(想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對象或可迭代對象)，mapFn(如果指定了該參數(shù)，新組數(shù)中的每個元素會執(zhí)行此回調(diào)函數(shù)，可選)，thisArg(執(zhí)行回調(diào)函數(shù)時this對象，可選)

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike)) // [1, 2, 3]

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike, (item) => item * 2)) // [2, 4, 6]

在實際應用中更多應用于Dom操作返回的集合以及函數(shù)內(nèi)部的arguments對象

2、of()方法創(chuàng)建一個具有可變數(shù)量參數(shù)的新數(shù)組實例，而不考慮參數(shù)的數(shù)量或類型

參數(shù)：item...(任意個參數(shù)，將按順序返回數(shù)組中的元素)

let result = Array.of(2, 3, 4)
console.log(result) // [ 2, 3, 4 ]

3、copyWithin()方法，在當前數(shù)組內(nèi)部，將指定位置的成員復制到其他位置(會覆蓋原有位置成員)，返回當前數(shù)組

參數(shù)：target(從該位置開始替換數(shù)據(jù))，start(從該位置開始讀取數(shù)據(jù)，默認為0，如果為負值表示倒數(shù)，可選)，end(到該位置前，停止讀取數(shù)據(jù)，默認為數(shù)組長度，如果為負值，表示倒數(shù))

let arr = [1, 2, 3, 4, 5]
arr.copyWithin(0, 3, 5)
console.log(arr) // [ 4, 5, 3, 4, 5 ]

4、find()方法用于找出第一個符合條件的數(shù)組成員，若沒有符合條件的，返回undefined

參數(shù)：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.find(item => item > 3)
console.log(result) // 4

5、findIndex()方法用法與find()方法相似，返回第一個符合條件的成員的位置，若沒有符合條件的，返回-1

6、fill()方法用一個固定值填充一個數(shù)組中從起始索引到終止索引內(nèi)的全部元素，不包括終止索引

參數(shù)：value(填充數(shù)組元素的值)，start(起始索引，可選)，end(終止索引，可選)

let arr = [1, 2, 3, 4, 5]
arr.fill(6, 2, 5)
console.log(arr) // [ 1, 2, 6, 6, 6 ]

7、entries()、keys()、values() , 三個數(shù)組遍歷方法，返回一個遍歷器對象，entries()鍵值對的遍歷，keys()鍵名的遍歷，values()鍵值的遍歷

參數(shù)：無

let arr = ["a", "b", "c"]
for (let idx of arr.keys()) {
  console.log(idx) // 0 1 2
}
for (let item of arr.values()) {
  console.log(item) // "a" "b" "c"
}
for (let [idx, item] of arr.entries()) {
  console.log(idx + "---" + item) // "0---a" "1---b" "2---c"
}

8、includes()方法用來判斷一個數(shù)組是否包含一個指定的值，如果包含返回true，否則返回false

參數(shù)：value(要查找的元素)，start(開始查找的位置，可選)

let arr = ["a", "b", "c"]
console.log(arr.includes("a")) // true
console.log(arr.includes("d")) // false

9、flat()方法會按照一個指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素和并到一個新數(shù)組中返回

參數(shù)：depth(要提取數(shù)組的嵌套結(jié)構(gòu)深度，默認為1，可選)

let arr = ["a", "b", ["c", "d"]]
let result = arr.flat() // ["a", "b", "c", "d"]
let arr1 = ["a", ["b", ["c"]]]
//使用 Infinity 作為深度，展開任意深度的嵌套數(shù)組
let result1 = arr1.flat(Infinity) // ["a", "b", "c"]

此篇文章記錄了JS中數(shù)組常用的方法，畢竟數(shù)組的實例方法有那么多，好記性不如爛筆頭，寫下此篇文章加深記憶，同時希望對大家也能有所幫助。
如果有錯誤或不嚴謹?shù)牡胤剑瑲g迎批評指正，如果喜歡，歡迎點贊