重學JS：數組

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

數組轉換

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

參數：分隔符字符串

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

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

參數：無

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

棧方法

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

參數： item...（多個數組項）

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

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

參數：無

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

隊列方法

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

參數：無

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

2、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' ]

排序方法

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

參數：無

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

2、sort()方法用將數組排序，並返回排序後的數組

參數：compareFunction(可選)

- 若不傳compareFunction，sort()方法回調用每個數組項的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()方法創建當前數組一個副本，然後將接收到的參數添加到這個副本末尾，最後返回新構建的數組

參數：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方法的參數中有一個負數，則用數組長度加上該數來確定相應的位置

3、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 ]

位置方法

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

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

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

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

迭代方法

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

參數：callback(item, index, arr)

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

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

參數：callback(item, index, arr)

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

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

參數：callback(item, index, arr)

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

4、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]

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的不會影響遍歷的數組項

縮小方法

1、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

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

ES6新增方法

1、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對象

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

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

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

3、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 ]

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

參數：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()方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素，不包括終止索引

參數：value(填充數組元素的值)，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() , 三個數組遍歷方法，返回一個遍歷器對象，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'
}

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

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

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

9、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"]

總結

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

數組轉換

棧方法

隊列方法

排序方法

操作方法

位置方法

迭代方法

縮小方法

ES6新增方法

總結

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

Java-揹包算法實現

重學JS: 多態封裝繼承

小程序篇(2)：登錄獲取用戶信息

小程序下拉刷新

首頁白屏優化實踐

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結