重學JS：數組

時間 2019-11-05

原文原文鏈接

除了Object類型以外，Array類型恐怕是js中最經常使用的類型了，而且隨着js的發展進步，數組中提供的方法也愈來愈來，對數組的處理也出現了各類騷操做，此篇文章將會帶你從新學習數組中的實例方法前端

數組轉換

一、join()方法接收一個字符串做爲分隔符，並返回用分隔符鏈接的數組項字符串
參數：分隔符字符串

const arr = [1, 2, 3]
console.log(arr.join('|')) // '1|2|3'
複製代碼

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

const arr = [1, 2, 3]
console.log(arr.toString()) // '1,2,3'
複製代碼

棧方法

一、push()方法接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後的數組長度
參數： item...（多個數組項）

let arr = ['a', 'b', 'c']
const count = arr.push('d')
console.log(count) // 4
console.log(arr) // [ 'a', 'b', 'c', 'd' ]
複製代碼

二、pop()方法從數組末尾移除最後一項，減小數組的length，返回移除的項
參數：無

let arr = ['a', 'b', 'c']
const item = arr.pop()
console.log(item) // 'c'
console.log(arr) // [ 'a', 'b' ]
複製代碼

隊列方法

一、shift()方法移除數組中的第一項，並返回該項，同時數組長度減1
參數：無

let arr = ['a', 'b', 'c']
const item = arr.shift()
console.log(item) // 'a'
console.log(arr) // [ 'b', 'c' ]
複製代碼

二、unshit()方法在數組前端添加任意個項，並返回新數組的長度
參數：item...(多個數組項)

let arr = ['a', 'b', 'c']
const count = arr.unshift('d', 'e')
console.log(count) // 5
console.log(arr) // [ 'd', 'e', 'a', 'b', 'c' ]
複製代碼

排序方法

一、reverse()方法用於反轉數組中每一項，並返回反轉後的數組
參數：無

let arr = ['a', 'b', 'c']
console.log(arr.reverse()) // [ 'c', 'b', 'a' ]
複製代碼

二、sort()方法用將數組排序，並返回排序後的數組
參數：compareFunction(可選)
- 若不傳compareFunction，sort()方法回調用每一個數組項的toString()方法，而後比較獲得的字符串
```
let arr = [2, 3, 10]
arr.sort()
console.log(arr) // [ 10, 2, 3 ]
複製代碼
```
'10'位於'2'以前
- 若傳compareFunction(a,b)，若是返回值小於0，則a位於b以前，若是返回值等於0則位置不變，若是返回值大於，則b位於a以前
```
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 ]
複製代碼
```

操做方法

一、concat()方法建立當前數組一個副本，而後將接收到的參數添加到這個副本末尾，最後返回新構建的數組
參數：item...(能夠是數組項，也能夠是數組)

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()方法基於當前數組中的一或多個項建立一個新數組
參數: start(起始位置),end(結束位置，可選)

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

tip: 若是slice方法的參數中有一個負數，則用數組長度加上該數來肯定相應的位置數組

三、splice()方法用法有多種，根據不一樣的用法須要傳遞的參數也不同
- 刪除：能夠刪除任意數量的項，指定兩個參數：刪除的第一項位置和刪除的數量
- 插入：能夠向指定位置插入任意數量的項，第一個參數：插入的位置，第二個參數0（刪除0），第三個參數之後要插入的項
- 替換：能夠將指定位置的項替換，第一個參數要替換項的位置，第二個替換項個數，第三個參數之後新的項

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 ]
複製代碼

位置方法

一、indexOf()方法從頭開始查找指定項，找到返回對應數組下標，沒找到返回-1
參數：item(要查找的數組項),index(指定開始查找的位置，可選)

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

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

迭代方法

一、every()方法對數組中每一項運行給定函數，若是該函數對每一項都返回true，則返回true
參數：callback(item, index, arr)函數

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

二、some()方法對數組中任意一項運行給定函數，若是該函數對任意一項返回true，則返回true
參數：callback(item, index, arr)

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

三、map()方法對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組
參數：callback(item, index, arr)

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

四、filter()方法對數組中的每一項運行給定函數，返回該函數調用會返回true的項組成的數組 參數：callback(item, index, arr)

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

五、forEach()方法對數組中的每一項都運行給定函數，沒有返回值
參數：callback(item, index, arr)

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

tip: 修改item的不會影響遍歷的數組項學習

縮小方法

一、reduce()方法對數組中的每一項執行一個reducer函數(升序執行)，並將結果彙總爲單個返回值
參數：callback(accumulator(累計器累計回調的返回值)，currentValue(數組中正在處理的元素)，currentIndex(數組中正在處理的元素的索引，若是提供了initialValue，則起始索引號爲0，不然爲1，可選)，array(調用reducer的數組)), initialValue(做爲第一次調用callback函數時的第一個參數的值。若是沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用 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
複製代碼

二、reduceRight()方法用法與reduce()方法一致，只是redeceRight()方法調用從數組尾部開始，向前遍歷

ES6新增方法

一、from()方法將相似數組的對象和可遍歷的對象轉化爲數組
參數：arrayLike(想要轉換成數組的僞數組對象或可迭代對象)，mapFn(若是指定了該參數，新組數中的每一個元素會執行此回調函數，可選)，thisArg(執行回調函數時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操做返回的集合以及函數內部的arguments對象ui

二、of()方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型
參數：item...(任意個參數，將按順序返回數組中的元素)

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

三、copyWithin()方法，在當前數組內部，將指定位置的成員複製到其餘位置(會覆蓋原有位置成員)，返回當前數組
參數：target(從該位置開始替換數據)，start(從該位置開始讀取數據，默認爲0，若是爲負值表示倒數，可選)，end(到該位置前，中止讀取數據，默認爲數組長度，若是爲負值，表示倒數)

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

四、find()方法用於找出第一個符合條件的數組成員，若沒有符合條件的，返回undefined
參數：callback(item, index, arr)

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

五、findIndex()方法用法與find()方法類似，返回第一個符合條件的成員的位置，若沒有符合條件的，返回-1
六、fill()方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素，不包括終止索引
參數：value(填充數組元素的值)，start(起始索引，可選)，end(終止索引，可選)

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

七、entries()、keys()、values() , 三個數組遍歷方法，返回一個遍歷器對象，entries()鍵值對的遍歷，keys()鍵名的遍歷，values()鍵值的遍歷
參數：無

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'
}
複製代碼

八、includes()方法用來判斷一個數組是否包含一個指定的值，若是包含返回true，不然返回false 參數：value(要查找的元素)，start(開始查找的位置，可選)

let arr = ['a', 'b', 'c']
console.log(arr.includes('a')) // true
console.log(arr.includes('d')) // false
複製代碼

九、flat()方法會按照一個指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素和併到一個新數組中返回 參數：depth(要提取數組的嵌套結構深度，默認爲1，可選)

let arr = ['a', 'b', ['c', 'd']]
let result = arr.flat() // ["a", "b", "c", "d"]
let arr1 = ['a', ['b', ['c']]]
//使用 Infinity 做爲深度，展開任意深度的嵌套數組
let result1 = arr1.flat(Infinity) // ["a", "b", "c"]
複製代碼