【收藏】JavaScript數組方法速查手冊極簡版

1 概述

1.1 前言

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);    // 輸出 2  3  4  5
});    

查看示例程序

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 : 表示要複製序列的起始索引位置，如爲負值則從後向前計數。如省略該值，則從索引0開始。
• 參數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 ]

查看示例程序

5 結尾

5.1 結語

文中介紹的過於簡單，想更多理解相關內容還是要多多動手實踐！

因時間不足，能力有限等原因，存在文字闡述不準及代碼測試不足等諸多問題。如發現錯誤請不吝指正！謝謝。