js陣列方法詳解（最新最全）

尋找石頭魚發表於2019-01-22

陣列是js中最常用到的資料集合，其內建的方法有很多，熟練掌握這些方法，可以有效的提高我們的工作效率，同時對我們的程式碼質量也是有很大影響。本文所有的栗子都是在es7環境下測試的，如果有問題歡迎留言交流

建立陣列

我將建立陣列的方式分為以下四大類

一、字面量方式

使用物件字面量方式建立陣列是我們最常用的一種方式

const array1 = [1, 2, 3, 4, 5];

二、使用Array構造方法

無參構造

使用無參構造可以建立一個長度為0的空陣列

const array1 = new Array();

帶參構造

如果只傳一個數值引數，則表示建立一個初始長度為指定數值的空陣列

const array2 = new Array(3);

如果傳入一個非數值的引數或者引數個數大於1，則表示建立一個包含指定元素的陣列

const array3 = new Array(1, 2, 3, `array`); // [1, 2, 3, "array"]

const array4 = new Array(`23`); // ["23"]

三、Array.of方法建立陣列(es6新增)

ES6為陣列新增建立方法的目的之一，是幫助開發者在使用Array構造器時避開js語言的一個怪異點。Array.of()方法總會建立一個包含所有傳入引數的陣列，而不管引數的數量與型別。

let arr = Array.of(1, 2);
console.log(arr.length);//2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

let arr2 = Array.of(`2`);
console.log(arr2.length);//1
console.log(arr2[0]);//`2`

在使用Array.of()方法建立陣列時，只需將想要包含在陣列內的值作為引數傳入。

四、Array.from方法建立陣列(es6新增)

在js中將非陣列物件轉換為真正的陣列是非常麻煩的。在ES6中，將可迭代物件或者類陣列物件作為第一個引數傳入，Array.from()就能返回一個陣列。

function arga(...args) {
    let arg = Array.from(arguments);
    console.log(arg);
}

arga(`arr1`, 26, `from`); // [`arr1`,26,`from`]

對映轉換

如果你想實行進一步的陣列轉換，你可以向Array.from()方法傳遞一個對映用的函式作為第二個引數。此函式會將陣列物件的每一個值轉換為目標形式，並將其儲存在目標陣列的對應位置上。

function arga(...args) {
    return Array.from(arguments, value => value + 1);
}

let arr = arga(`arr`, 26, `pop`);
console.log(arr);//[`arr1`,27,`pop1`]

如果對映函式需要在物件上工作，你可以手動傳遞第三個引數給Array.from()方法，從而指定對映函式內部的this值

const helper = {
  diff: 1,
  add(value) {
    return value + this.diff;
  }
}

function translate() {
  return Array.from(arguments, helper.add, helper);
}

let arr = translate(`liu`, 26, `man`);
console.log(arr); // ["liu1", 27, "man1"]

陣列方法

建立陣列完成之後，接下來我們就來看一下陣列中的每一個方法是什麼功能及其詳細用法。下面的方法是按照字母順序寫的

concat

concat() 方法用於連線兩個或多個陣列。

該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。

const array1 = [22, 3, 31, 12];
const array2 = [19, 33, 20];
const newArray = array1.concat(10, array2, 9);
console.log(array1); // [22, 3, 31, 12]
console.log(newArray); // [22, 3, 31, 12, 10, 19, 33, 20, 9]

通過上面的例子可以看出：concat傳入的引數可以是具體的值，也可以是陣列物件。可以是任意多個。

copyWithin(es6新增)

copyWithin() 方法用於從陣列的指定位置拷貝元素到陣列的另一個指定位置中。

該方法會改變現有陣列

//將陣列的前兩個元素複製到陣列的最後兩個位置
let arr = [1, 2, 3, `arr`, 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

預設情況下，copyWithin()方法總是會一直複製到陣列末尾，不過你還可以提供一個可選引數來限制到底有多少元素會被覆蓋。這第三個引數指定了複製停止的位置（不包含該位置本身）。

let arr = [1, 2, 3, `arr`, 5, 9, 17];

//從索引3的位置開始貼上
//從索引0的位置開始複製
//遇到索引3時停止複製
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

every

every()方法用於判斷陣列中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true。

const array1 = [22, 3, 31, 12];
const isRight1 = array1.every((v, i, a) => {
  return v > 1;
});

const isRight2 = array1.every((v, i, a) => {
  return v > 10;
});
console.log(isRight1); // true
console.log(isRight2); // false

fill(es6新增)

fill()方法能使用特定值填充陣列中的一個或多個元素。當只是用一個引數時，該方法會用該引數的值填充整個陣列。

let arr = [1, 2, 3, `cc`, 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

如果不想改變陣列中的所有元素，而只是想改變其中一部分，那麼可以使用可選的起始位置引數與結束位置引數（不包括結束位置的那個元素）

let arr = [1, 2, 3, `arr`, 5];

arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

filter

filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。該方法不會改變原陣列

const array1 = [22, 3, 31, 12];
const array2 = array1.filter((v, i, a) => {
  if (v > 13) {
    return v;
  }
});
console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [22, 31]

find()與findIndex()(es6新增)

find()與findIndex()方法均接受兩個引數：一個回撥函式，一個可選值用於指定回撥函式內部的this。該回撥函式可接受三個引數：陣列的某個元素，該元素對應的索引位置，以及該陣列本身。該回撥函式應當在給定的元素滿足你定義的條件時返回true，而find()和findIndex()方法均會在回撥函式第一次返回true時停止查詢。

二者唯一的區別是：find()方法返回匹配的值，而findIndex()返回匹配位置的索引。

let arr = [1, 2, 3, `arr`, 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
})); // 3 返回匹配的值

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
})); // 2 返回匹配位置的索引

forEach

forEach() 方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。

let sum = 0;
const array1 = [22, 3, 31, 12];
array1.forEach((v, i, a) => {
  sum += v;
});

console.log(sum); // 68

includes(es7新增)

includes() 方法用來判斷一個陣列是否包含一個指定的值，如果是返回 true，否則false。

引數有兩個，其中第一個是（必填）需要查詢的元素值，第二個是（可選）開始查詢元素的位置

const array1 = [22, 3, 31, 12, `arr`];
const includes = array1.includes(31);
console.log(includes); // true

const includes1 = array1.includes(31, 3); // 從索引3開始查詢31是否存在
console.log(includes1); // false

需要注意的是：includes使用===運算子來進行值比較，僅有一個例外：NaN被認為與自身相等。

let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true

indexOf

indexOf() 方法可返回陣列中某個指定的元素位置。

該方法將從頭到尾地檢索陣列，看它是否含有對應的元素。開始檢索的位置在陣列 start 處或陣列的開頭（沒有指定 start 引數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。

如果在陣列中沒找到指定元素則返回 -1。

引數有兩個，其中第一個是（必填）需要查詢的元素值，第二個是（可選）開始查詢元素的位置

const array1 = [22, 3, 31, 12, `arr`];
const index = array1.indexOf(31);
console.log(index); // 2

const index1 = array1.indexOf(31, 3);
console.log(index1); // -1

join

join() 方法用於把陣列中的所有元素轉換一個字串。

元素是通過指定的分隔符進行分隔的。預設使用逗號作為分隔符

const array1 = [22, 3, 31, 12, `arr`];
const str = array1.join(`~`);
console.log(str); // 22~3~31~12~arr

const str1 = array1.join();
console.log(str1); // 22,3,31,12,arr

lastIndexOf

lastIndexOf() 方法可返回一個指定的元素在陣列中最後出現的位置，在一個陣列中的指定位置從後向前搜尋。

如果要檢索的元素沒有出現，則該方法返回 -1。

該方法將從尾到頭地檢索陣列中指定元素 item。開始檢索的位置在陣列的 start 處或陣列的結尾（沒有指定 start 引數時）。如果找到一個 item，則返回 item 從尾向前檢索第一個次出現在陣列的位置。陣列的索引開始位置是從 0 開始的。

如果在陣列中沒找到指定元素則返回 -1。

const array1 = [22, 3, 31, 12, `arr`, 19, 31, 56, 43];
const index1 = array1.lastIndexOf(31);
console.log(index1); // 6

const index2 = array1.lastIndexOf(31, 5);
console.log(index2); // 2

const index3 = array1.lastIndexOf(35);
console.log(index3); // -1

map

map() 方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。

map() 方法按照原始陣列元素順序依次處理元素。

該方法不會改變原陣列

const array1 = [22, 3, 31, 12, `arr`, 19, 31, 56, 43];
const array2 = array1.map((v, i, a) => {
  return v + 1;
});

console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43]
console.log(array2); // [23, 4, 32, 13, "arr1", 20, 32, 57, 44]

pop

pop() 方法用於刪除陣列的最後一個元素並返回刪除的元素。

const array1 = [22, 3, 31, 12, `arr`, 19, 31, 56, 43];
const item = array1.pop();

console.log(item); // 43
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56]

push

push()方法從陣列末尾向陣列新增元素，可以新增一個或多個元素。

const array1 = [22, 3, 31, 12, `arr`, 19, 31, 56, 43];
array1.push(11, 16, 18);
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43, 11, 16, 18]

reduce

reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

const array1 = [22, 3, 31, 12];
const sum = array1.reduce((total, number) => {
  return total + number;
});

console.log(sum); // 68

reduceRight

reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從陣列的末尾向前將陣列中的陣列項做累加。

const array1 = [22, 3, 31, 12];

const sum = array1.reduceRight((total, number) => {
  return total + number;
});

console.log(sum); // 68

reverse

reverse() 方法用於顛倒陣列中元素的順序。

const array1 = [22, 3, 31, 12];
array1.reverse();

console.log(array1); // [12, 31, 3, 22]

shift

shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。

const array1 = [22, 3, 31, 12];
const item = array1.shift();

console.log(item); // 22
console.log(array1); // [3, 31, 12]

slice

slice() 方法可從已有的陣列中返回選定的元素。

slice()方法可提取字串的某個部分，並以新的字串返回被提取的部分。

slice() 方法不會改變原始陣列。

const array1 = [22, 3, 31, 12];
const array2 = array1.slice(1, 3);

console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [3, 31]

some

some() 方法用於檢測陣列中的元素是否滿足指定條件（函式提供）。

some() 方法會依次執行陣列的每個元素：

如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。

const array1 = [22, 3, 31, 12];
const someTrue1 = array1.some((v, i, a) => {
  return v == 11;
});

const someTrue2 = array1.some((v, i, a) => {
  return v == 31;
});

console.log(someTrue1); // false
console.log(someTrue2); // true

sort

sort() 方法用於對陣列的元素進行排序。

排序順序可以是字母或數字，並按升序或降序。

預設排序順序為按字母升序。

const array1 = [22, 3, 31, 12];
array1.sort((a, b) => {
  return a > b ? 1 : -1;
});

console.log(array1); // 數字升序 [3, 12, 22, 31]

splice

splice() 方法用於新增或刪除陣列中的元素。

刪除元素,並返回刪除的元素

const array1 = [22, 3, 31, 12];
const item = array1.splice(1, 2);

console.log(item); // [3, 31]
console.log(array1); // [22, 12]

向指定索引處新增元素

const array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35);

console.log(array1); // [22, 12, 35, 3, 31, 12]

替換指定索引位置的元素

const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8);

console.log(array1); // [22, 8, 31, 12]

toLocaleString和toString

將陣列轉換為字串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();

console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

unshift

unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。

該方法將改變陣列的數目。
const array1 = [22, 3, 31, 12]; const item = array1.unshift(11); console.log(item); // 5 新陣列的長度 console.log(array1); // [11, 22, 3, 31, 12]

js陣列方法詳解
2024-03-19
JS陣列
JavaScript陣列詳解-全網最全
2021-05-06
JavaScript陣列
JS 陣列（Arrey）屬性以及方法詳解
2019-02-16
JS陣列
js 陣列深度拷貝詳解
2020-09-30
JS陣列
js 陣列方法
2019-01-23
JS陣列
好像不是最全的陣列去重方法
2018-12-26
陣列
JavaScript 陣列中的 indexOf 方法詳解
2016-10-20
JavaScript陣列Index
JavaScript陣列操作函式方法詳解
2014-12-06
JavaScript陣列函式
Js陣列方法解析
2019-03-05
JS陣列
js常用陣列方法
2018-11-26
JS陣列
JS陣列基本方法
2018-11-21
JS陣列
js陣列方法集合
2020-12-03
JS陣列
JS陣列的方法
2018-05-25
JS陣列
JS陣列方法收集
2011-10-30
JS陣列
JavaScript陣列去重（12種方法，史上最全）
2018-10-15
JavaScript陣列
Javascript陣列詳解
2016-07-18
JavaScript陣列
js陣列方法之Reduce
2020-06-17
JS陣列
JS陣列方法總結
2019-03-03
JS陣列
js陣列方法(管飽)
2020-11-15
JS陣列
JS陣列字串方法整理
2018-03-22
JS陣列字串
js常用的陣列方法
2017-09-13
JS陣列
JS 陣列的迭代方法
2018-06-28
JS陣列
最新最全的Portlet 通訊過程詳解
2009-11-16
JavaScript中陣列Array.sort()排序方法詳解
2018-05-26
JavaScript陣列排序
JS陣列學習之清空全部元素的4種方法（程式碼詳解）
2021-09-11
JS陣列
你真的瞭解JS陣列的那些方法嗎？
2018-04-14
JS陣列
樹狀陣列詳解
2020-08-01
陣列
字尾陣列詳解
2018-02-06
陣列
【乾貨】js 陣列詳細操作方法及解析合集
2018-05-31
JS陣列
js 陣列的方法小結
2018-10-12
JS陣列
js陣列常用方法總結
2020-12-28
JS陣列
JS-陣列方法總結
2020-12-22
JS陣列
js陣列常見迭代方法
2017-05-10
JS陣列
js陣列和字串的方法
2017-12-12
JS陣列字串
js 物件轉為js陣列 && Object方法
2018-05-06
JS物件陣列Object
最全總結 JavaScript Array 方法詳解
2021-08-09
JavaScript
切片底層陣列詳解
2021-09-19
陣列
JavaScript遍歷陣列詳解
2018-05-22
JavaScript陣列