JavaScript 陣列（Arrays），一份權威的備忘清單 – JavaScript 完全手冊（2018版）
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
注：本文為 《 JavaScript 完全手冊（2018版） 》第20節，你可以檢視該手冊的完整目錄。
隨著時間的推移，JavaScript 陣列有了越來越多的功能，有時候想知道何時應該使用何種方法是個很棘手的問題。本節旨在解釋您應該在什麼場景下使用什麼方法，截至2018年。
初始化陣列
const a = [] const a = [1, 2, 3] const a = Array.of(1, 2, 3) const a = Array(6).fill(1) // 初始化一個包含6項元素的陣列，每項使用 1 填充，即：[1, 1, 1, 1, 1, 1]
不要使用舊語法（只是將它用於型別化陣列）
const a = new Array() //never use const a = new Array(1, 2, 3) //never use
獲取陣列長度
const l = a.length
使用 every 迭代陣列
a.every(f)
迭代 a 直到 f() 返回 false 。
使用 some 迭代陣列
some() 方法測試陣列中的某些元素是否通過由指定函式的真值測試。
a.some(f)
迭代 a 直到 f() 返回 true 。
遍歷陣列並返回函式結果組成的新陣列
const b = a.map(f)
遍歷 a ，返回每一個 a 元素執行 f() 產生的結果陣列。
過濾陣列
const b = a.filter(f)
遍歷 a ，返回每一個 a 元素執行 f() 都為 true 的新陣列。
Reduce
a.reduce((accumulator, currentValue, currentIndex, array) => {
//...
}, initialValue)
reduce() 對陣列中每一項都呼叫回撥函式，並逐步計算計算結果。如果 initaiValue 存在， accumulator 在第一次迭代時等於這個值。
示例：
;[1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator * currentValue
}, 1)
// iteration 1: 1 * 1 => return 1
// iteration 2: 1 * 2 => return 2
// iteration 3: 2 * 3 => return 6
// iteration 4: 6 * 4 => return 24
// return value is 24
forEach
ES6 新增。
a.forEach(f)
遍歷 a 執行 f ，中途不能停止。
示例：
a.forEach(v => {
console.log(v)
})
for..of
ES6 新增。
for (let v of a) {
console.log(v)
}
for
for (let i = 0; i < a.length; i += 1) {
//a[i]
}
遍歷 a ，可以通過 return 或者 break 中止迴圈，通過 continue 跳出迴圈。
@@iterator
ES6 新增。
獲取陣列迭代器的值：
const a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next().value) //1 console.log(it.next().value) //2 console.log(it.next().value) //3
.entries() 返回一個鍵值對的迭代器：
let it = a.entries() console.log(it.next().value) //[0, 1] console.log(it.next().value) //[1, 2] console.log(it.next().value) //[2, 3]
.keys() 返回包含所有鍵名的迭代器：
let it = a.keys() console.log(it.next().value) //0 console.log(it.next().value) //1 console.log(it.next().value) //2
陣列結束時 .next() 返回 undefined 。你可以通過 it.next() 返回的 value, done 值檢測迭代是否結束。當迭代到最後一個元素時 done 的值始終為 true 。
在陣列末尾追加值
a.push(4)
在陣列開頭新增值
a.unshift(0) a.unshift(-2, -1)
移除陣列中的值
刪除末尾的值
a.pop()
刪除開頭的值
a.shift()
刪除任意位置的值
a.splice(0, 2) // 刪除前2項元素 a.splice(3, 2) // 刪除從索引 3 開始的 2 個元素
不要使用 remove() ，因為它會留下未定義的值。
移除並插入值
a.splice(2, 3, 2, 'a', 'b') // 刪除從索引 2 開始的 3 個元素, // 並且從索引 2 開始新增 2 元素（'a', 'b'）
合併多個數組
const a = [1, 2] const b = [3, 4] a.concat(b) // 1, 2, 3, 4
查詢陣列中特定元素
ES5 寫法：
a.indexOf()
返回匹配到的第一個元素的索引，元素不存在返回 -1 。
a.lastIndexOf()
返回匹配到的最後一個元素的索引，元素不存在返回 -1 。
ES6 寫法：
a.find((element, index, array) => {
//return true or false
})
返回符合條件的第一個元素，如果不存在返回 undefined。
通常這麼用：
a.find(x => x.id === my_id)
上面的例子會返回陣列中 id === my_id 的第一個元素。
findIndex 返回符合條件的第一個元素的索引，如果不存在返回 undefined ：
a.findIndex((element, index, array) => {
//return true or false
})
ES7 寫法：
a.includes(value)
如果 a 包含 value 返回 true 。
a.includes(value, i)
如果 a 從位置 i 後包含 value 返回 true 。
獲取陣列的一部分
a.slice()
陣列排序
按字母順序排序（按照 ASCII 值 – 0-9A-Za-z ）：
const a = [1, 2, 3, 10, 11] a.sort() //1, 10, 11, 2, 3 const b = [1, 'a', 'Z', 3, 2, 11] b = a.sort() //1, 11, 2, 3, Z, a
自定義排序
const a = [1, 10, 3, 2, 11] a.sort((a, b) => a - b) //1, 2, 3, 10, 11
逆序
a.reverse()
陣列轉字串
a.toString()
返回字串型別的值
a.join()
返回陣列元素拼接的字串。傳遞引數以自定義分隔符：
a.join(',')
複製所有值
const b = Array.from(a) const b = Array.of(...a)
複製部分值
const b = Array.from(a, x => x % 2 == 0)
將值複製到本身其它位置
const a = [1, 2, 3, 4] a.copyWithin(0, 2) // [3, 4, 3, 4] const b = [1, 2, 3, 4, 5] b.copyWithin(0, 2) // [3, 4, 5, 4, 5] // 0 是拷貝的值插到哪裡 // 2 從哪裡開始拷貝 const c = [1, 2, 3, 4, 5] c.copyWithin(0, 2, 4) // [3, 4, 3, 4, 5] //4 是結束索引
拷貝幾個元素，就從插入位置開始替換幾個元素。
如果你覺得本文對你有幫助，那就請分享給更多的朋友
關注「前端乾貨精選」加星星，每天都能獲取前端乾貨
