JavaScript陣列方法速查手冊極簡版
JavaScript陣列方法速查手冊極簡版中共收了32個數組的常用方法和屬性，並根據方法的用途進行重新排序和分類，在文中簡要的介紹了方法作用和用例說明。收藏備用吧！
文中介紹的過於簡單，想更更多理解相關內容還是要多多動手實踐！
2 陣列屬性
2.1 length-長度屬性
每個陣列都有一個length屬性。針對稠密陣列，length屬性值代表陣列中元素的個數。當陣列是稀疏陣列時，length屬性值大於元素的個數。
var array1 = [ 'a', 'b', 'c' ]; console.log(array1.length);// 輸出 3 array1.length = 2; console.log(array1);// 輸出 [ "a", "b" ] 複製程式碼
3 陣列方法
3.1 Array.isArray-型別判定
Array.isArray()
陣列型別判定。
console.log(Array.isArray([1, 2, 3]));// 輸出 true
console.log(Array.isArray({num: 123}));//輸出 false
複製程式碼
3.2 Array.of-建立陣列
Array.of()
從可變數量的引數建立陣列，不管引數的數量或型別如何。
console.log(Array.of(3));// 輸出 [3] console.log(Array.of(1,2,3));// 輸出 [1,2,3] 複製程式碼
3.3 Array.from-建立陣列
Array.from()
用類陣列或可迭代物件建立新陣列。
console.log(Array.from('abcd'));// 輸出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1));// 輸出 [ 2, 3, 4 ]
複製程式碼
4 陣列原型方法
4.1 查詢元素
4.1.1 find-按函式查詢
Array.prototype.find()
找到第一個滿足檢測函式條件的元素，並返回該元素，沒找到則返回 undefined。
var array1 = [1, 2, 3, 4, 5]; console.log(array1.find(x => x > 3));// 輸出4 複製程式碼
4.1.2 findIndex-按函式查詢
Array.prototype.findIndex()
找到第一個滿足檢測函式條件的元素，並返回該元素索引。找不到返回-1。
var array1 = [6, 7, 8, 9, 10]; console.log(array1.findIndex(x => x > 8));// 輸出3 複製程式碼
4.1.3 indexOf-按元素值查詢
Array.prototype.indexOf()
查詢元素並返回元素索引值，找不到返回-1。
var arr= [1, 2, 3, 4]; console.log(arr.indexOf(3));// 輸出 2 console.log(arr.indexOf(6));// 輸出 -1 console.log(arr.indexOf(2, 2));// 輸出 -1 複製程式碼
第二個引數表示查詢的起始位置。
4.1.4 lastIndexOf-按元素值查詢
Array.prototype.lastIndexOf()
從後向前查詢元素並返回元素索引值，找不到返回 -1。
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b'));// 輸出 1
console.log(arr.lastIndexOf('e'));// 輸出 -1
複製程式碼
4.2 新增元素
4.2.1 push-尾部新增
Array.prototype.push()
在尾部新增一個或多個元素，返回陣列的新長度。
var array1= ['a', 'b', 'c'];
console.log(array1.push('d'));// 輸出 4
console.log(array1);// 輸出 [ "a", "b", "c", "d" ]
複製程式碼
4.2.2 unshift-頭部新增
Array.prototype.unshift()
在頭部新增一個或多個元素，並返回陣列的新長度。
var array1 = [ 4, 5, 6 ]; console.log(array1.unshift(3));// 輸出 4 console.log(array1);// 輸出 [ 3, 4, 5, 6 ] console.log(array1.unshift(1, 2));// 輸出 6 console.log(array1);// 輸出 [ 1, 2, 3, 4, 5, 6 ] 複製程式碼
4.3 刪除元素
4.3.1 pop-尾部刪除
Array.prototype.pop()
從尾部刪除一個元素，並返回該元素。
var array1= ['a', 'b', 'c', 'd']; console.log(array1.pop());// 輸出 d console.log(array1);// 輸出 [ "a", "b", "c" ] 複製程式碼
4.3.2 shift-頭部刪除
Array.prototype.shift()
從頭部刪除一個元素，並返回該元素。
var array1 = [1, 2, 3]; console.log(array1.shift());// 輸出 1 console.log(array1);// 輸出 [ 2, 3 ] 複製程式碼
4.4 替換元素
4.4.1 splice-新增替換刪除
Array.prototype.splice()
新增、替換、刪除元素。會改變原陣列。
var array1 = [ 'a', 'c', 'd' ]; array1.splice( 1, 0, 'b'); console.log(array1);// 輸出 [ "a", "b", "c", "d" ] array1.splice(1,1); console.log(array1);// 輸出 [ "a", "c", "d" ] array1.splice(1,1,'bb','cc'); console.log(array1);// 輸出 [ "a", "bb", "cc", "d" ] 複製程式碼
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start deleteCount item1...
4.5 順序相關
4.5.1 sort-排序
Array.prototype.sort()
陣列排序，改變原陣列。
var array1 = [ 4, 3, 10, 2 ]; console.log(array1.sort());// 輸出 [ 10, 2, 3, 4 ] console.log(array1.sort((x1, x2) => x1 > x2));// 輸出 [ 2, 3, 4, 10 ] 複製程式碼
4.5.2 reverse-反序
Array.prototype.reverse()
倒置陣列，並返回新陣列。會改變原陣列。
var sourceArray= [ 'a', 'b', 'c' ]; var reverseArray = sourceArray.reverse(); console.log(reverseArray);// 輸出 [ "c", "b", "a" ] console.log(sourceArray == reverseArray);// 輸出 true 複製程式碼
4.6 遍歷迭代
4.6.1 keys-鍵迭代器
Array.prototype.keys()
陣列的鍵迭代器。
var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
console.log(key);// 輸出 0, 1, 2
}
複製程式碼
4.6.2 values-值迭代器
Array.prototype.values()
陣列的值迭代器。
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);// 輸出 a b c
}
複製程式碼
4.6.3 entries-鍵/值對迭代器
Array.prototype.entries()
陣列的鍵/值對迭代器。
var array1 = ['a', 'b', 'c']; var iterator1 = array1.entries(); console.log(iterator1.next().value);// 輸出 Array [0, "a"] console.log(iterator1.next().value);// 輸出 Array [ 1, "b" ] 複製程式碼
4.6.4 forEach-遍歷
Array.prototype.forEach()
遍歷陣列中的元素，並執行回撥函式。
var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
console.log(x + 1);// 輸出 2345
});
複製程式碼
4.7 檢測
4.7.1 includes-值包含檢測
Array.prototype.includes()
值包含檢測，如包含返回 true，不包含返回false。
var array1 = [1, 2, 3]; console.log(array1.includes(2));// 輸出 true console.log(array1.includes(4));// 輸出 false 複製程式碼
4.7.2 some-函式包含檢測
Array.prototype.some()
檢測陣列中是否有元素可以通過檢測函式驗證。
var array1 = [ 1, 2, 3, 4 ]; console.log(array1.some(x => x >3));// 輸出true console.log(array1.some(x => x > 5));// 輸出false 複製程式碼
4.7.3 every-函式完全檢測
Array.prototype.every()
檢測陣列中是否所有元素都可以通過檢測函式驗證。
var array1 = [ 1, 2, 3, 4, 5 ]; console.log(array1.every(x => x < 8));//輸出 true console.log(array1.every(x => x < 4));//輸出 false 複製程式碼
4.8 合併
4.8.1 join-合併成字串
Array.prototype.join()
合併陣列中所有元素成為字串並返回。
var array1= [ 'a', 'b', 'c' ];
console.log(array1.join());// 輸出 a,b,c
console.log(array1.join("-"));// 輸出 a-b-c
複製程式碼
4.8.2 concat-合併成陣列
Array.prototype.concat()
合併兩個或多個數組，返回一個全新陣列，原陣列不變。
var array1 = [ 'a', 'b' ]; var array2 = [ 'c', 'd' ]; console.log(array1.concat(array2));// 輸出 [ "a", "b", "c", "d" ] 複製程式碼
該方法可以有多個引數。
4.9 累計
4.9.1 reduce-左側累計
Array.prototype.reduce()
從左至右按reducer
函式組合元素值，並返回累計器終值。
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer));// 輸出 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5));// 輸出 15，其中5是累計器初始值。 複製程式碼
4.9.2 reduceRight-右側累計
Array.prototype.reduceRight()
從右至左按reducer
函式組合元素值，並返回累計器終值。
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator.concat(currentValue); console.log(array1.reduceRight(reducer));// 輸出 [ 4, 3, 2, 1 ] console.log(array1.reduceRight(reducer, 5));// 輸出 [ 5, 4, 3, 2, 1 ] 複製程式碼
4.10 copyWithin-內部複製
Array.prototype.copyWithin()
陣列內部複製，不改變原陣列長度。
var array1 = ['a', 'b', 'c', 'd', 'e','f']; console.log(array1.copyWithin(0, 3, 5));// 輸出 [ "d", "e", "c", "d", "e", "f" ] console.log(array1.copyWithin(1, 3));// 輸出 [ "d", "d", "e", "f", "e", "f" ] 複製程式碼
arr.copyWithin(target[, start[, end]])
target start end
4.11 fill-填充函式
Array.prototype.fill()
用固定值填充起始索引到終止索引區間內的全部元素值，不包括終止索引。
var array1 = [1, 2, 3, 4]; console.log(array1.fill(9, 2, 4));// 輸出 [ 1, 2, 9, 9 ] console.log(array1.fill(8, 1));// 輸出 [ 1, 8, 8, 8 ] console.log(array1.fill(7));// 輸出 [ 7, 7, 7, 7 ] 複製程式碼
4.12 filter-過濾函式
Array.prototype.filter()
生成由通過檢測函式驗證元素組成的新陣列並返回。
var arr = [ 9 , 8 , 7 , 6]; console.log(arr.filter(x => x >7));//輸出 [ 9, 8 ] 複製程式碼
4.13 flat-陣列扁平化
Array.prototype.flat()
按指定深度遞迴遍歷陣列，並返回包含所有遍歷到的元素組成的新陣列。不改變原陣列。
var arr1 = [ 1, 2, [ 3, 4 ] ]; console.log(arr1.flat());// 輸出 [ 1, 2, 3, 4 ] var arr2 = [ 1, 2, [3, 4, [ 5, 6 ] ] ]; console.log(arr2.flat());// 輸出 [ 1, 2, 3, 4,[ 5, 6 ] ] var arr3 = [1, 2, [ 3, 4, [ 5, 6 ] ] ]; console.log(arr3.flat(2));// 輸出 [ 1, 2, 3, 4, 5, 6 ] 複製程式碼
4.14 map-對映
Array.prototype.map()
建立一個新陣列，該陣列中的元素由原陣列元素呼叫map函式產生。
var array1 = [1, 2, 3, 4]; console.log(array1.map(x => x * 2));// 輸出 [ 2, 4, 6, 8 ] 複製程式碼
4.15 slice-擷取陣列
Array.prototype.slice()
按引數begin
和end
擷取陣列，不改變原陣列。
var array1 = [ 1, 2, 3, 4, 5]; console.log(array1.slice( 2, 4 ));//輸出 [ 3, 4 ] console.log(array1);//輸出 [ 1, 2, 3, 4, 5 ] 複製程式碼