JavaScript數(shù)組方法實例詳解

更新時間：2021年12月30日 15:29:45 作者：IT利刃出鞘

本文將通過實例為大家詳細介紹JavaScript中的數(shù)組的所有方法。文中的示例代碼講解詳細，對我們深入了解JavaScript數(shù)組有一定的幫助，需要的可以參考一下

簡介

說明

本文用示例介紹JavaScript的數(shù)組的方法。

方法簡介

join()：用指定的分隔符將數(shù)組每一項拼接為字符串

push()：向數(shù)組的末尾添加新元素

pop()：刪除數(shù)組的最后一項

shift()：刪除數(shù)組的第一項

unshift()：向數(shù)組首位添加新元素

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

splice()：對數(shù)組進行增刪改

fill()：方法能使用特定值填充數(shù)組中的一個或多個元素

filter()：“過濾”功能

concat()：用于連接兩個或多個數(shù)組

indexOf()：檢測當前值在數(shù)組中第一次出現(xiàn)的位置索引

lastIndexOf()：檢測當前值在數(shù)組中最后一次出現(xiàn)的位置索引

every()：判斷數(shù)組中每一項都是否滿足條件

some()：判斷數(shù)組中是否存在滿足條件的項

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

sort()：對數(shù)組的元素進行排序

reverse()：對數(shù)組進行倒序

forEach()：循環(huán)遍歷數(shù)組每一項（ES5 及以下）

map()：循環(huán)遍歷數(shù)組每一項（ES6）

copyWithin()：用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中

find()：返回匹配的值

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

toLocaleString()、toString()：將數(shù)組轉(zhuǎn)換為字符串

flat()、flatMap()：扁平化數(shù)組

entries() 、keys()、values()：遍歷數(shù)組

創(chuàng)建數(shù)組

創(chuàng)建方法

JavaScript一共有如下11種方法創(chuàng)建數(shù)組：

[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, 3, 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>

簡略結(jié)果：

詳細結(jié)果：?

可見：

以下2種方法不能創(chuàng)建元素及索引，只有l(wèi)ength屬性

new Array(3);
Array(3);

其他方法可以創(chuàng)建元素、索引、length屬性。

對遍歷的影響

對forEach、for ... in、for ... of的影響是一樣的：對于沒有元素的數(shù)組，會直接跳過，只會遍歷有元素的值（包括undefined）。

詳解

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

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

var arrayLike = {length: 2}

↓↓

Array.apply(null, arrayLike)

↓↓

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

↓↓

Array(undefined, undefined) // 而空數(shù)組中的每一個元素的值都為undefined

//最終輸出 [undefined, undefined]?

映射轉(zhuǎn)換

如果你想進一步的數(shù)組轉(zhuǎn)換，你可以向 Array.from()方法傳遞一個映射用的函數(shù)作為第二個參數(shù)。此函數(shù)會將數(shù)組對象的每一個值轉(zhuǎn)換為目標形式，并將其存儲在目標數(shù)組的對應(yīng)位置上。

function arga(...args) {  
     return Array.from(args, value => value + 1);
}
 
let arr = arga('arr', 26, 'pop');
console.log(arr);//['arr1',27,'pop1']

如果映射函數(shù)需要在對象上工作，你可以手動傳遞第三個參數(shù)給 Array.from()方法，從而指定映射函數(shù)內(nèi)部的 this 值

const helper = {
  diff: 1,
  add(value) {
    return value + this.diff;
  }
}
 
function translate() {
 //arguments 是一個對應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對象
  return Array.from(arguments, helper.add, helper); 
}
 
let arr = translate('liu', 26, 'man');
console.log(arr); // ["liu1", 27, "man1"]

方法大全

join()

join()方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個字符串。

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

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

通過join()方法可以實現(xiàn)重復字符串，只需傳入字符串以及重復的次數(shù)，就能返回重復后的字符串，函數(shù)如下：

function repeatString(str, n) {
    //一個長度為n+1的空數(shù)組用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() 方法從數(shù)組末尾向數(shù)組添加元素，可以添加一個或多個元素。

pop() 方法用于刪除數(shù)組的最后一個元素并返回刪除的元素。

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

shift() 和 unshift()

shift() 方法用于把數(shù)組的第一個元素從其中刪除，并返回第一個元素的值。

unshift() 方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度。

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

sort()

sort() 方法用于對數(shù)組的元素進行排序。

排序順序可以是字母或數(shù)字，并按升序或降序。

默認排序順序為按字母升序。

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

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

?比較函數(shù)接收兩個參數(shù)，如果第一個參數(shù)應(yīng)該位于第二個之前則返回一個負數(shù)，如果兩個參數(shù)相等則返回 0，如果第一個參數(shù)應(yīng)該位于第二個之后則返回一個正數(shù)。以下就是一個簡單的比較函數(shù)：

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

如果需要通過比較函數(shù)產(chǎn)生降序排序的結(jié)果，只要交換比較函數(shù)返回的值即可：

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

reverse()

reverse() 方法用于顛倒數(shù)組中元素的順序。
var arr = [13, 24, 51, 3];
console.log(arr.reverse());   //[3, 51, 24, 13]
console.log(arr);   //[3, 51, 24, 13](原數(shù)組改變)

concat()

concat() 方法用于連接兩個或多個數(shù)組。

該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);   // [1, 3, 5, 7](原數(shù)組未被修改)

從上面測試結(jié)果可以發(fā)現(xiàn)：傳入的不是數(shù)組，則直接把參數(shù)添加到數(shù)組后面，如果傳入的是數(shù)組，則將數(shù)組中的各個項添加到數(shù)組中。但是如果傳入的是一個二維數(shù)組呢？

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

slice()

slice()：返回從原數(shù)組中指定開始下標到結(jié)束下標之間的項組成的新數(shù)組。

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

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

如果有兩個參數(shù)，該方法返回起始和結(jié)束位置之間的項，但不包括結(jié)束位置的項。

當出現(xiàn)負數(shù)時，將負數(shù)加上數(shù)組長度的值（6）來替換該位置的數(shù)

var arr = [1,3,5,7,9,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, 3, 5, 7, 9, 11](原數(shù)組沒變)
console.log(arrCopy);    //[3, 5, 7, 9, 11]
console.log(arrCopy2);   //[3, 5, 7]
console.log(arrCopy3);   //[3, 5, 7]
console.log(arrCopy4);   //[5, 7, 9]

splice()

splice()：很強大的數(shù)組方法，它有很多種用法，可以實現(xiàn)刪除、插入和替換。

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

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

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

2.向指定索引處添加元素

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

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

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

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

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

indexOf()和 lastIndexOf()

接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引。

indexOf()：從數(shù)組的開頭（位置 0）開始向后查找。

lastIndexOf：從數(shù)組的末尾開始向前查找。

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

var arr = [1,3,5,7,7,5,3,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()：對數(shù)組進行遍歷循環(huán)，對數(shù)組中的每一項運行給定函數(shù)。這個方法沒有返回值。參數(shù)都是 function 類型，默認有傳。

參數(shù)分別為：遍歷的數(shù)組內(nèi)容；第對應(yīng)的數(shù)組索引，數(shù)組本身

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() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

該方法不會改變原數(shù)組

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

filter()

filter()：“過濾”功能，數(shù)組中的每一項運行給定函數(shù)，返回滿足過濾條件組成的數(shù)組。

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

fill()? （ES6 新增）

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

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

如果不想改變數(shù)組中的所有元素，而只是想改變其中一部分，那么可以使用可選的起始位置參數(shù)與結(jié)束位置參數(shù)（不包括結(jié)束位置的那個元素）。

3 個參數(shù)：填充數(shù)值，起始位置參數(shù)，結(jié)束位置參數(shù)（不包括結(jié)束位置的那個元素）

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];

every()

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

var arr = [1, 2, 3, 4, 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()：判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件，就會返回 true。

var arr = [1, 2, 3, 4, 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）

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

參數(shù)有兩個，其中第一個是（必填）需要查找的元素值，第二個是（可選）開始查找元素的位置。

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

reduce()和 reduceRight()

這兩個方法都會實現(xiàn)迭代數(shù)組的所有項(即累加器)，然后構(gòu)建一個最終返回的值。

?reduce()方法從數(shù)組的第一項開始，逐個遍歷到最后。

reduceRight()則從數(shù)組的最后一項開始，向前遍歷到第一項。

4 個參數(shù)：前一個值、當前值、項的索引和數(shù)組對象。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
},10);   //數(shù)組一開始加了一個初始值10,可以不設(shè)默認0
console.log(sum);  //25

toLocaleString() 和 toString()

將數(shù)組轉(zhuǎn)換為字符串

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

find()和 findIndex()

find()與 findIndex()方法均接受兩個參數(shù)：一個回調(diào)函數(shù)，一個可選值用于指定回調(diào)函數(shù)內(nèi)部的 this。

該回調(diào)函數(shù)可接受三個參數(shù)：數(shù)組的某個元素，該元素對應(yīng)的索引位置，以及該數(shù)組本身。

該回調(diào)函數(shù)應(yīng)當在給定的元素滿足你定義的條件時返回 true，而 find()和 findIndex()方法均會在回調(diào)函數(shù)第一次返回 true 時停止查找。

二者的區(qū)別是：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 返回匹配位置的索引

copyWithin() （ES6）

copyWithin() 方法用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中。

該方法會改變現(xiàn)有數(shù)組

//將數(shù)組的前兩個元素復制到數(shù)組的最后兩個位置
let arr = [1, 2, 3, 'arr', 5];
 
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

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

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]

flat() 和 flatMap()（ES6）

flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

該方法返回一個新數(shù)組，對原數(shù)據(jù)沒有影響。

參數(shù)：指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認值為 1。

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

flatMap()方法對原數(shù)組的每個成員執(zhí)行一個函數(shù)，相當于執(zhí)行Array.prototype.map(),然后對返回值組成的數(shù)組執(zhí)行flat()方法。

該方法返回一個新數(shù)組，不改變原數(shù)組。

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

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

entries()，keys()和values() —— 用于遍歷數(shù)組。它們都返回一個遍歷器對象，可以用for...of循環(huán)進行遍歷。

區(qū)別是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循環(huán)，可以手動調(diào)用遍歷器對象的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數(shù)組方法實例詳解的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)組方法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: