JavaScript陣列方法例項詳解

阿新 • • 發佈：2021-12-31

join()
push()和 pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf()
forEach()
map()
filter()
fill() （ES6 新增）
every()
some()
includes() （ES7）
reduce()和 reduceRight()
toLocaleString() 和 toString()
find()和 findIndex()
copyWithin() （ES6）
flat() 和 flatMap()（ES6）
entries(),keys() 和 values() （ES6）

簡介

說明

本文用示例介紹的陣列的方法。

方法簡介

join()：用指定的分隔符將陣列每一項拼接為字串

push()：向陣列的末尾新增新元素

pop()：刪除陣列的最後一項

shift()：刪除陣列的第一項

unshift()：向陣列首位新增新元素

slice()：按照條件查找出其中的部分元素

splice()：對陣列進行增刪改

fill()：方法能使用特定值填充陣列中的一個或多個元素

filter()：“過濾”功能

concat()：用於連線兩個或多個數組

indexOf()：檢測當前值在陣列中第一次出現的位置索引

lastIndexOf()：檢測當前值在陣列中最後一次出現的位置索引

every()：判斷陣列中每一項都是否滿足條件

some()：判斷陣列中是否存在滿足條件的項

includes()：判斷一個數組是否包含一個指定的值

sort()：對陣列的元素進行排序

reverse()：對陣列進行倒序

forEach()：迴圈遍歷陣列每一項（ES5 及以下）

map()：迴圈遍歷陣列每一項（ES6）

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

find()：返回匹配的值

findIndex()：返回匹配位置的索引

toLocaleString()、toString()：將陣列轉換為字串

flat()、flatMap()：扁平化陣列

entries() 、keys()、values()：遍歷陣列

建立陣列

建立方法

Script一共有如下11種方法建立陣列：

[1,3,5];
new Array(3);
Array(3);
 
Array.apply(null,new Array(3))
Array.apply(null,Array(3));
Array.apply(null,{length: 3});
 
//ES6寫法
Array.of(1,2);
Array.from({length: 3});
Array(3).fill(2);
Array(...Array(3));
[...Array(3)]

示例

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
<script>
    let arr1 = [1,5];
    let arr2 = new Array(3);
    let arr3 = Array(3);
 
    let arr4 = Array.apply(null,new Array(3))
    let arr5 = Array.apply(null,Array(3));
    let arr6 = Array.apply(null,{length: 3});
 
    //ES6寫法
    let arr7 = Array.of(1,2);
    let arr8 = Array.from({length: 3});
    let arr9 = Array(3).fill(2);
    let arr10 = Array(...Array(3));
    let arr11 = [...Array(3)]
 
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
    console.log(arr5);
    console.log(arr6);
    console.log(arr7);
    console.log(arr8);
    console.log(arr9);
    console.log(arr10);
    console.log(arr11);
</script>
</body>
</html>

簡略結果：

JavaScript陣列方法例項詳解

詳細結果：

JavaScript陣列方法例項詳解

可見：

以下2種方法不能建立元素及索引，只有length屬性

new Array(3);
Array(3);

其他方法可以建立元素、索引、length屬性。

對遍歷的影響

對forEach、for ... in、for ... of的影響是一樣的：對於沒有元素的陣列，會直接跳過，只會遍歷有元素的值（包括undefined）。

詳解

Array.apply(null,{length: 2})的原理

本處介紹Array.apply(null,{length: 2})的原理。

var arrayLike = {length: 2}

↓↓

Array.apply(null,arrayLike)

↓↓

Array(arrayLike[0],arrayLike[1]) // 把一個空陣列中的每一個元素的值逐個傳入Array()方法

↓↓

Array(undefined,undefined) // 而空陣列中的每一個元素的值都為undefined

//最終輸出 [undefined,undefined]

對映轉換

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

function arga(...args) {  
     return Array.from(args,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() {
 //arguments 是一個對應於傳遞給函式的引數的類陣列物件
  return Array.from(arguments,helper.add,helper); 
}
 
let arr = translate('liu','man');
console.log(arr); // ["liu1","man1"]

方法大全

join()

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

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

var arr = [1,2,3];
console.log(arr.join());      // 1,3
console.log(arr.join("-"));   // 1-2-3
console.log(arr);             // [1,3]（原陣列不變）

通過join()方法可以實現重複字串，只需傳入字串以及重複的次數，就能返回重複後的字串，函式如下：

function repeatString(str,n) {
    //一個長度為n+1的空陣列用string去拼接成字串,就成了n個string的重複
    return new Array(n + 1).join(str);
}
console.log(repeatString("abc",3));   // abcabcabc
console.log(repeatString("Hi",5));    // HiHiHiHiHi

push()和 pop()

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

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

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);  // 5
console.log(arr);    // ["Lily","Tom","Jack","Sean"]
var item = arr.pop();
console.log(item);   // Sean
console.log(arwww.cppcns.comr);    // ["Lily","Jack"]

shift() 和 unshift()

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

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

var arr = ["Lily","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count);   // 5
console.log(arr);   //["Jack","Sean","Lily","Tom"]
var item = arr.shift();
console.log(item);   // Jack
console.log(arr);   // ["Sean","Tom"]

sort()

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

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

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

var arr1 = ["a","d","c","b"];
console.log(arr1.sort());   // ["a","b","d"]
arr2 = [13,24,51,3];
console.log(arr2.sort());   // [13,51]
console.log(arr2);          // [13,51](元陣列被改變)

為了解決上述問題，sort()方法可以接收一個比較函式作為引數，以便我們指定哪個值位於哪個值的前面。

比較函式接收兩個引數，如果第一個引數應該位於第二個之前則返回一個負數，如果兩個引數相等則返回 0，如果第一個引數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函式：

function compare(value1,value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
           return 1;
    } else {
        return 0;
    }
}
arr2 = [13,3];
console.log(arr2.sort(compare));   // [3,13,51]

如果需要通過比較函式產生降序排序的結果，只要交換比較函式返回的值即可：

function compare(value1,value2) {
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}
arr2 = [13,3];
console.log(arr2.sort(compare));   // [51,3]

reverse()

reverse() 方法用於顛倒陣列中元素的順序。
var arr = [13,3];
console.log(arr.reverse());   //[3,13]
console.log(arr);   //[3,13](原陣列改變)

concat()

concat() 方法用於連線兩個或多個數組。

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

var arr = [1,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1,7,9,11,13]
console.log(arr);   // [1,7](原陣列未被修改)

從上面測試結果可以發現：傳入的不是陣列，則直接把引數新增到陣列後面，如果傳入的是陣列，則將陣列中的各個項新增到陣列中。但http://www.cppcns.com是如果傳入的是一個二維陣列呢？

var arrCopy2 = arr.concat([9,13]]);
console.log(arrCopy2);   //[1,Array[2]]
console.log(arrCopy2[5]);   //[11,13]

slice()

slice()：返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列。

slice()方法可以接受一或兩個引數，即要返回項的起始和結束位置。

在只有一個引數的情況下， slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。

如果有兩個引數，該方法返回起始和結束位置之間的項，但不包括結束位置的項。

當出現負數時，將負數加上陣列長度的值（6）來替換該位置的數

var arr = [1,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2); //相當於arr.slice(1,4)
var arrCopy4 = arr.slice(-4,-1);//相當於arr.slice(2,5)
console.log(arr);        //[1,11](原陣列沒變)
console.log(arrCopy);    //[3,11]
console.log(arrCopy2);   //[3,7]
console.log(arrCopy3);   //[3,7]
console.log(arrCopy4);   //[5,9]

splice()

splice()：很強大的陣列方法，它有很多種用法，可以實現刪除、插入和替換。

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

可以刪除任意數量的項，只需指定 2 個引數：要刪除的第一項的位置和要刪除的項數。例如， splice(0,2)會刪除陣列中的前兩項。

var arr = [1,11];
var arrRemoved = arr.splice(0,2);
console.log(arr);          //[5,11]
console.log(arrRemoved);   //[1,3]

2.向指定索引處新增元素

可以向指定位置插入任意數量的項，只需提供 3 個引數：起始位置、 0（要刪除的項數）和要插入的項。例如，splice(2,0,4,6)會從當前陣列的位置 2 開始插入 4 和 6。

var array1 = [22,31,12];
array1.splice(1,12,35);  //[]
 
console.log(array1); // [22,35,12]

3.替換指定索引位置的元素

可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個引數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice (2,1,6)會刪除當前陣列位置 2 的項，然後再從位置 2 開始插入 4 和 6。

const array1 = [22,8);   //[3]
 
console.log(array1);  // [22,8,12]

indexOf()和 lastIndexOf()

接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引。

indexOf()：從陣列的開頭（位置 0）開始向後查詢。

lastIndexOf：從陣列的末尾開始向前查詢。

這兩個方法都返回要查詢的項在陣列中的位置，或者在沒找到的情況下返回-1。在比較第一個引數與陣列中的每一項時，會使用全等操作符。

var arr = [1,1];
console.log(arr.indexOf(5));   //2
console.log(arr.lastIndexOf(5));   //5
console.log(arr.indexOf(5,2));   //2
console.log(arr.lastIndexOf(5,4));   //2
console.log(arr.indexOf("5"));   //-1

forEach()

forEach()：對陣列進行遍歷迴圈，對陣列中的每一項執行給定函式。這個方法沒有返回值。引數都是 function 型別，預設有傳。

引數分別為：遍歷的陣列內容；第對應的陣列索引，陣列本身

var arr = [11,22,33,44,55];
arr.forEach(function(x,index,a){
    console.log(x + '|' + index + '|' + (a === arr));
});

輸出為：

11|0|true

22|1|true

33|2|true

44|3|true

55|4|true

map()

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

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

該方法不會改變原陣列

var arr = [1,5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2);  //[1,16,25]

filter()

filter()：“過濾”功能，陣列中的每一項執行給定函式，返回滿足過濾條件組成的陣列。

var arr = [1,6,10];
var arr2 = arr.filter(function(x,index) {
    return index % 3 === 0 || x >= 8;
});
console.log(arr2);  //[1,10]

fill() （ES6 新增）

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

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

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

3 個引數：填充數值，起始位置引數，結束位置引數（不包括結束位置的那個元素）

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

every()

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

var arr = [1,5];
 
var arr2 = arr.every(function(x) {
    return x < 10;
});
console.log(arr2);  //true
 
var arr3 = arr.every(function(x) {
    return x < 3;
});
console.log(arr3);  // false

some()

some()：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回 true。

var arr = [1,5];
var arr2 = arr.some(function(x) {
    return x < 3;
});
console.log(arr2);  //true
var arr3 = arr.some(function(x) {
    return x < 1;
});
console.log(arr3);  // false

includes() （ES7）

www.cppcns.com

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

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

const array1 = [22,'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

reduce()和 reduceRight()

這兩個方法都會實現迭代陣列的所有項(即累加器)，然後構建一個最終返回的值。

reduce()方法從陣列的第一項開始，逐個遍歷到最後。

reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。

4 個引數：前一個值、當前值、項的索引和陣列物件。

var values = [1,5];
var sum = values.reduceRight(function(prev,cur,array){
    return prev + cur;
},10);   //陣列一開始加了一個初始值10,可以不設預設0
console.log(sum);  //25

toLocaleString() 和 toString()

將陣列轉換為字串

const array1 = [22,12];
const str  = array1.toLocaleString();
const str1 = array1.toString();
 
console.log(str);  // 22,12
console.log(str1); // 22,12

find()和 findIndex()

find()與 findIndex()方法均接受兩個引數：一個回撥函式，一個可選值用於指定回撥函式內部的 this。

該回調函式可接受三個引數：陣列的某個元素，該元素對應的索引位置，以及該陣列本身。

該回調函式應當在給定的元素滿足你定義的條件時返回 true，而 find()和 findIndex()方法均會在回撥函式第一次返回 true 時停止查詢。

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

let arr = [1,9];
 
console.log(arr.find((value,keys,arr) => {
    return value > 2;
})); // 3 返回匹配的值
 
console.log(arr.findIndex((value,arr) => {
    return value > 2;
})); // 2 返回匹配位置的索引

copyWithin() （ES6）

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

該方法會改變現有陣列

//將陣列的前兩個元素複製到陣列的最後兩個位置
let arr = [1,5];
 
arr.copyWithin(3,0);
console.log(arr);//[1,2]

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

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

flat() 和 flatMap()（ES6）

flat() 方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。

該方法返回一個新陣列，對原資料沒有影響。

引數：指定要提取巢狀陣列的結構深度，預設值為 1。

const arr1 = [0,[3,4]];
 
console.log(arr1.flat());
// expected output: [0,4]
 
const arr2 = [0,[[[3,4]]]];
 
console.log(arr2.flat(2));
// expected output: [0,4]]
 
//使用 Infinity，可展開任意深度的巢狀陣列
var arr4 = [1,[5,[7,[9,10]]]]];
arr4.flat(Infinity);
// [1,10]
 
// 扁平化陣列空項,如果原陣列有空位，flat()方法會跳過空位
var arr4 = [1,5];
arr4.flat();
// [1,5]

flatMap()方法對原陣列的每個成員執行一個函式，相當於執行Array.prototype.map(),然後對返回值組成的陣列執行flat()方法。

該方法返回一個新陣列，不改變原陣列。

// 相當於 [[2,4],6],[4,8]].flat()
[2,4].flatMap((x) => [x,x * 2])
// [2,8]

entries(),keys() 和 values() （ES6）

entries()，keys()和values() —— 用於遍歷陣列。它們都返回一個遍歷器物件，可以用for...of迴圈進行遍歷。

區別是keys()是對鍵名的遍歷、values()是對鍵值的客棧遍歷，entries()是對鍵值對的遍歷

for (let index of ['a','b'].keys()) {  
    console.log(index);  
}  
// 0  
// 1  
 
for (let elem of ['a','b'].values()) {  
    console.log(elem);  
}  
// 'a'  
// 'b'  
 
for (let [index,elem] of ['a','b'].entries()) {  
    console.log(index,elem);  
}  
// 0 "a"  
// 1 "b"

如果不使用for...of迴圈，可以手動呼叫遍歷器物件的next方法，進行遍歷。

let letter = ['a','b','c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0,'a']  
console.log(entries.next().value); // [1,'b']  
console.log(entries.next().value); // [2,'c']

以上就是JavaScript陣列方法例項詳解的詳細內容，更多關於JavaScript陣列方法的資料請關注我們其它相關文章！

JavaScript陣列方法例項詳解

目錄簡介建立陣列建立方法詳解方法大全join()push()和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf()forEach()map()filter()fill() （ES6 新增）every()some()include