JavaScript 數(shù)組操作方法大全

組操作是 JavaScript 中非常重要也非常常用的技巧。本文整理了常用的數(shù)組操作方法（包括 ES6 的 map、forEach、every、some、filter、find、from、of 等），熟悉了這些數(shù)組操作方法，編寫程序也會更加簡潔高效。

push()

push()可以將某些值加入到數(shù)組的最后一個位置，不限制添加數(shù)量，添加的內(nèi)容使用逗號隔開即可，加入后數(shù)組長度會增加。

使用push()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.push(9, 10);
console.log(a);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

pop()

pop()會移除 (取出) 數(shù)組的最后一個元素。

使用pop()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
let b = a.pop();
console.log(a);  // [1, 2, 3, 4, 5, 6, 7]
console.log(b);  // 8

shift()、unshift()

shift()會移除 (取出) 數(shù)組的第一個元素。

使用shift()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
let b = a.shift();
console.log(a);  // [2, 3, 4, 5, 6, 7, 8]
console.log(b);  // 1

unshift()會將指定的元素添加到第一個位置。

使用nushift()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.unshift(100,200,300);
console.log(a);  // [100, 200, 300, 1, 2, 3, 4, 5, 6, 7, 8]

reverse()

reverse()會將數(shù)組反轉(zhuǎn)。

使用push()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.reverse();
console.log(a); // [8, 7, 6, 5, 4, 3, 2, 1]

splice()

splice()可以移除或新增數(shù)組的元素，它包含了三個參數(shù)，第一個是要移除或要添加的序列號碼 (必填)，第二個是要移除的長度 ( 選填，若不填則第一個號碼位置后方的所有元素都會被移除，若設(shè)定為 0 則不會有元素被移除 )，第三個是要添加的內(nèi)容 ( 選填 )

使用splice()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1);
console.log(a);   // [1, 2, 3, 4, 5, 7, 8] ( 6 被移除了 )

設(shè)定第三個參數(shù)就能夠添加或替代元素。

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1,100);
console.log(a);   // [1, 2, 3, 4, 5, 100, 7, 8] ( 6 被移除，100 加到第 5 個位置  )

let b = [1,2,3,4,5,6,7,8];
b.splice(5,3,100,200,300);
console.log(b);   // [1, 2, 3, 4, 5, 100, 200, 300] ( 6,7,8 被移除，100,200,300 加到第 5,6,7 個位置  )

let c = [1,2,3,4,5,6,7,8];
c.splice(5,0,100);
console.log(c);   // [1, 2, 3, 4, 5, 100, 6, 7, 8] ( 沒有元素被移除，100 加到第 5 個位置 )

sort()

sort()可以針對數(shù)組的元素進(jìn)行排序，里頭包含了一個排序用的判斷函數(shù)，函數(shù)內(nèi)必須包含兩個參數(shù)，這兩個參數(shù)分別代表數(shù)組里第 n 個和第 n+1 個元素，通過比較第 n 和第 n+1 個元素的大小來進(jìn)行排序。

使用sort()后會改變原本的數(shù)組內(nèi)容。

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);   // [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);   // [1, 2, 3, 4, 5, 6, 7, 8]

如果不使用判斷函數(shù)，默認(rèn)會將元素轉(zhuǎn)換成字符串，并采用 unicode 來判斷，這也會造成某些數(shù)字的排序錯誤。

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a);   // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

copyWithin()

copyWithin()能復(fù)制數(shù)組中的某些元素，并將它們放到并取同一個數(shù)組指定的位置，copyWithin()有三個參數(shù)，第一個是要替換的位置 (必填)，第二個是從什么位置開始復(fù)制 ( 選填，默認(rèn) 0 )，第三個是停止復(fù)制的元素的前一個位置 ( 選填，默認(rèn)等于數(shù)組長度 )。

使用copyWithin()后會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.copyWithin(2);
console.log(a); // [1,2,1,2,3,4,5,6] ( 因 7 和 8 超過數(shù)組長度，只出現(xiàn)到 6 )

let b = [1,2,3,4,5,6,7,8];
b.copyWithin(3,1,3);
console.log(b); // [1,2,3,2,3,6,7,8] ( 復(fù)制 2,3 替代 4,5 )

fill()

fill()會把數(shù)組中所有元素，替換為指定的值，fill()有三個參數(shù)，第一個是準(zhǔn)備要替換的內(nèi)容 (必填)，第二個是從什么位置開始替換 ( 選填，不設(shè)定就全部替換 )，第三個是停止替換的元素的前一個位置 ( 選填，默認(rèn)等于數(shù)組長度 )。

使用fill()會改變原本的數(shù)組內(nèi)容。

let a = [1,2,3,4,5,6,7,8];
a.fill('a');
console.log(a); // ['a','a','a','a','a','a','a','a']

let b = [1,2,3,4,5,6,7,8];
b.fill('b',3,5);
console.log(b); // [1,2,3,'b','b',6,7,8]

length()

length可以取得數(shù)組的長度 (所有元素的數(shù)量)。

let a = [1,2,3,4,5,6,7,8];
console.log(a.length);  // 8

indexOf()、lastIndexOf()

indexOf()會判斷數(shù)組中是否包含某個值，判斷的方式為「由左而右」，如果有包含就返回這個值在數(shù)組中的索引值，如果沒有就返回 -1，有兩個參數(shù)，第一個參數(shù)表示要判斷的值 (必填)，第二個參數(shù)表示從數(shù)組的哪個位置開始判斷 ( 選填，默認(rèn)為 0 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.indexOf(4));   // 3
console.log(a.indexOf(4,5)); // -1 ( 搜索 5,6,7,8 沒有 4 )

lastIndexOf()會判斷數(shù)組中是否包含某個值，判斷的方式為「由右而左」，如果有包含就返回這個值在數(shù)組中的索引值，如果沒有就返回 -1，有兩個參數(shù)，第一個參數(shù)表示要判斷的值 (必填)，第二個參數(shù)表示判斷到數(shù)組的哪個位置 ( 選填，默認(rèn)為整個數(shù)組長度 - 1 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3));   // 2
console.log(a.lastIndexOf(3,1)); // -1 ( 只判斷 1,2，所以沒有 3 )

find()

find()會將數(shù)組中的「每一個」元素帶入指定的函數(shù)內(nèi)做判斷，并會返回第一個符合判斷條件的元素，如果沒有元素符合則會返回 undefined。

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

findIndex()

findIndex()會將數(shù)組中的「每一個」元素帶入指定的函數(shù)內(nèi)做判斷，并會返回第一個符合判斷條件元素的位置號碼，如果沒有元素符合則會返回 -1。

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

filter()

filter()會將數(shù)組中的「每一個」元素帶入指定的函數(shù)內(nèi)做判斷，如果元素符合判斷條件則會返回，成為一個新的數(shù)組元素。

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));    // [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0)); // [2, 4, 6, 8]

forEach()

forEach()會將數(shù)組中每個元素套用到指定的函數(shù)里進(jìn)行運算，函數(shù)有三個參數(shù)，第一個參數(shù)表示每個元素的值 (必填)，第二個參數(shù)為該元素的索引值 ( 選填 )，第三個參數(shù)則表示原本的數(shù)組 ( 選填 )。

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {
    b = b + item;
});
console.log(b); // 15 ( 1+2+3+4+5 )

如果通過第二和第三個參數(shù)搭配，就能做到改變原本數(shù)組的效果。

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {
    arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

join()

join()可以將數(shù)組中所有元素，由指定的字符合并在一起變成字符串呈現(xiàn)，若沒有指定字符默認(rèn)會用「逗號」合并。

let a = [1,2,3,4,5,6,7,8];
console.log(a.join());      // 1,2,3,4,5,6,7,8
console.log(a.join(''));    // 12345678
console.log(a.join('@@'));  // 1@@2@@3@@4@@5@@6@@7@@8

concat()

concat()可以將兩個數(shù)組合并在一起，如果是使用 ES6 語法也可以用擴(kuò)展運算符...來代替。

let a = [1,2,3,4,5];
let b = [6,7,8,9];

let c = a.concat(b);
let d = [...a, ...b]; // 使用 ...

console.log(c); // [1,2,3,4,5,6,7,8,9]
console.log(d); // [1,2,3,4,5,6,7,8,9]

slice()

slice()可以截取出數(shù)組某部份的元素為一個新的數(shù)組，有兩個必填的參數(shù)，第一個是起始位置，第二個是結(jié)束位置 (操作時數(shù)字減 1)。

let a = [1,2,3,4,5,6,7,8];
let b = a.slice(2,4);
console.log(b); // [3, 4]

map()

map()會處理數(shù)組中每個元素，最后返回出一個新的數(shù)組，里頭有一個函數(shù) (必填) 和一個返回函數(shù)里的 this 參數(shù) ( 選填 )，函數(shù)內(nèi)又包含三個參數(shù)，第一個是每個元素的值 ( 必填 )，第二個是當(dāng)前元素的索引值 ( 選填 )，第三個是當(dāng)前的數(shù)組 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {
    return e + 10;
});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

套用第二個和第三個參數(shù)的變化

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {
    return `${e}${i}${arr.find(e => e%5 == 1)}`; // 組合成「元素 + 索引值 + 除以五余數(shù)為 1 的元素」
});
console.log(b); // ['101', '211', '321', '431', '541', '651', '761', '871']

如果要使用返回函數(shù)里 this 的參數(shù)，則「不能使用」箭頭函數(shù)，因為箭頭函數(shù)的 this 指向和函數(shù)的 this 指向不同，所以要用一般的函數(shù)處理。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){
    return e + this; // 此處的 this 為 10
}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

reduce()、reduceRight()

reduce()可以將數(shù)組中每個元素進(jìn)行計算，每次計算的結(jié)果會再與下個元素作計算，直到結(jié)束為止，里頭包含一個函數(shù) (必填) 和初始計算的數(shù)值 ( 選填 )，函數(shù)內(nèi)有四個參數(shù)，第一個是計算的值 ( 必填 )，第二個是取得的元素 ( 必填 )，第三個是該元素的索引值 ( 選填 )，第四個是原本的數(shù)組 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total + e;
});
console.log(b); // 36 ( 1+2+3+4+5+6+7+8=36 )

reduceRight()和reduce()大同小異，只是其計算方式是由右到左，對于加法來說沒什么影響，但對于減法而言就有差異。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total - e;
});
console.log(b); // -34 ( 1-2-3-4-5-6-7-8 = -34 )
let c = a.reduceRight(function(total, e){
    return total - e;
});
console.log(c); // -20 ( 8-7-6-5-4-3-2-1 = -20 )

flat()

flat()可以將一個多維數(shù)組的深度轉(zhuǎn)成一維 (扁平化)，它有一個選填的參數(shù)，代表要轉(zhuǎn)換的深度數(shù)字，默認(rèn)為 1，如果深度有很多層，可使用Infinity來全部展開成一維數(shù)組。

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b);   // [1, 2, 3, 4, [5, [6]]]
console.log(c);   // [1, 2, 3, 4, 5, [6]]
console.log(d);   // [1, 2, 3, 4, 5, 6]

flatMap()

flatMap()的方法等于map()和flat()的組合，在運算后直接將數(shù)組扁平化處理。

let a = [1,2,[3],[4,5]];
let b = a.flatMap(e => e+1);
let c = a.map(e => e+1).flat();
console.log(b);  // [2, 3, "31", "4,51"] ( 可以看到 b 和 c 得到的結(jié)果相同 )
console.log(c);  // [2, 3, "31", "4,51"]

Array.isArray()

Array.isArray()能判斷一個對象是否為數(shù)組，如果是就返回 true，不然就返回 false。

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

Array.from()

Array.from()會將「類數(shù)組對象」或是「可迭代的對象」轉(zhuǎn)換成數(shù)組，Array.from()有兩個參數(shù)，第一個參數(shù)為「類數(shù)組對象」或「可迭代的對象」(必填)，第二個參數(shù)則是改變轉(zhuǎn)換成數(shù)組元素的函數(shù) ( 選填 )。

類數(shù)組對象具有 length 屬性以及索引化 index 的元素，可迭代對象表示具有可以利用迭代的方式取得它自己本身的元素，例如 Map 和 Set... 等。(參考 MDN 說法)

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']

let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

類數(shù)組對象寫法必須包含 length 屬性，且對象 key 須為 0 開始的數(shù)字，對應(yīng)轉(zhuǎn)換后的元素索引。

let a = {
    '0': 14,
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b);  // [14,7,13,9,6]

Array.of()

Array.of()可以快速將數(shù)字、字符串等內(nèi)容，轉(zhuǎn)換成數(shù)組。

let a = Array.of(1,'a',2,'b',3);
console.log(a);   // [1, "a", 2, "b", 3]

toString()

toString()會把整個數(shù)組轉(zhuǎn)換成文字。

let a = [1,2,3,4,5,6,7,8];
let b = a.toString();
console.log(b);   // 1,2,3,4,5,6,7,8

every()

every()會將數(shù)組中的「每一個」元素帶入指定的函數(shù)內(nèi)做判斷，只要有任何一個元素不符合判斷條件，會返回 false，如果全部符合，就會返回 true。

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3)); // fasle ( 因為 1、2 小于 3，3 等于 3 )
console.log(a.every(e => e > 0)); // true

some()

some()會將數(shù)組中的「每一個」元素帶入指定的函數(shù)內(nèi)做判斷，只要有任何一個元素符合判斷條件，就會返回 true，如果全都不符合，就會返回 false。

let a = [1,2,3,4,5,6];
console.log(a.some(e => e > 3)); // 返回 true，因為 4、5、6 大于 3
console.log(a.some(e => e > 6)); // 返回 fasle，因為全都小于或等于 6

includes()

includes()會判斷數(shù)組中是否包含某個值，如果有包含就返回 true，否則返回 false，有兩個參數(shù)，第一個參數(shù)表示要判斷的值 (必填)，第二個參數(shù)表示從數(shù)組的哪個位置開始判斷 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.includes(2));   // true
console.log(a.includes(2,2)); // false ( 搜索 3,4,5,6,7,8 沒有 2 )

valueOf()

valueOf()會返回數(shù)組的原始值，如果原本的數(shù)組有修改，那么返回的原始值也會跟著改變

let a = [1,2,3,4,5,6,7,8];
let b = a.valueOf();
console.log(a);    // [1, 2, 3, 4, 5, 6, 7, 8]
let c = a.valueOf();
a.shift();
console.log(a);    // [2, 3, 4, 5, 6, 7, 8]
console.log(b);    // [2, 3, 4, 5, 6, 7, 8] ( 因為 a 的原始值更動了，所以 b 也變了 )
console.log(c);    // [2, 3, 4, 5, 6, 7, 8]

keys()

keys()會返回數(shù)組中的每一個索引值 (key) 成為一個新的 Array Iterator 對象，因為是 Array Iterator 對象，可以通過for...of來取得。

let a = ['a','b','c','d','e'];
let b = a.keys();

for (let key of b) {
    console.log(key); // 連續(xù)出現(xiàn) 1、2、3、4、5
}

javascript2

JavaScript中數(shù)組基本操作可歸納為增刪改查

push

push方法可以接受任意數(shù)量的參數(shù)，并將他們添加在數(shù)組的最后面，返回的值是新數(shù)組的長度。

unshift

unshift 在數(shù)組開頭添加任意多的值，返回值為新的數(shù)組長度

splice

splice 接收三個參數(shù)，分別為開始位置，要刪除的元素數(shù)量，插入的元素返回值是刪除元素組成的數(shù)組

concat

先創(chuàng)建當(dāng)前數(shù)組的副本，然后再將他的參數(shù)添加到副本尾部，最后返回這個新構(gòu)建的數(shù)組，不影響原數(shù)組

pop

pop 刪除數(shù)組的最后一個元素，返回刪除的元素

shift

shift 刪除數(shù)組的第一個元素，返回刪除的數(shù)組

slice

slice 用于創(chuàng)建一個包含原數(shù)組中一個或者多個元素的新數(shù)組，不會影響原數(shù)組。只有一個參數(shù)代表生成該參數(shù)位數(shù)到結(jié)尾元素組成的數(shù)組，參數(shù)代表數(shù)組下標(biāo)，生成數(shù)組為第一個參數(shù)下標(biāo)開始到第二個參數(shù)的下標(biāo)

indexof

indexof 返回要查找元素的位置，沒有的話則返回-1

includes

includes 返回布爾值，找到為true,找不到為false。

區(qū)別: 1：includes可以判斷NaN，indexOf不可以 2：includes對數(shù)組中沒值的時候會默認(rèn)是undefiend，而indexOf不會。

find

find 返回第一個匹配的元素,接收回調(diào)的三個參數(shù)分別為當(dāng)前遍歷到的元素，當(dāng)前遍歷到元素的下標(biāo)，原數(shù)組

reverse

reverse 倒序排列數(shù)組。會改變原數(shù)組

sort

sort 用于對數(shù)組的元素進(jìn)行排序，參數(shù)必須是函數(shù) a-b 為升序，b-a為降序

join

join 將數(shù)組轉(zhuǎn)換成字符串參數(shù)為分隔符

some

some 遍歷數(shù)組中的每一項，有一項滿足條件，則返回true

every

every 遍歷數(shù)組中的每一項，每一項為滿足條件，則返回true 否則返回false

forEach

forEach 遍歷數(shù)組的每一項，沒有返回值

filter

遍歷數(shù)組的每一項，根據(jù)傳入的函數(shù)若返回為true 返回值為返回true的元素組成新的數(shù)組

map

map 遍歷數(shù)組每一項，返回值為每次調(diào)用函數(shù)返回的值

總結(jié)：

增（前三個會改變原數(shù)組） push unshift splice contact
刪（前三個會改變原數(shù)組） pop shift splice slice
改會改變原數(shù)組 splice
查返回元素坐標(biāo)，或者元素值都不會改變原數(shù)組 indexof include find
排序方法 reverse, sort 都會改變原數(shù)組
轉(zhuǎn)換方法不會改變原數(shù)組 join
常用的數(shù)組迭代方法都不會改變原數(shù)組 some,every,forEach,filter,map

#如何學(xué)習(xí)編程##編程語言##前端##web前端怎么入門學(xué)習(xí)##web面試#

點贊關(guān)注加收藏，每天都會更新一個JavaScript知識！！！！！！！！！

CMAScript 中的數(shù)組的每個元素可以保存任何類型，數(shù)組的大小也可以調(diào)整。

//聲明一個空數(shù)組，屬于object類型

var arr = new Array();

console.log(arr); //[]

console.log(typeof arr); //object

//創(chuàng)建一個數(shù)組，并分配了三個元素

var arr = new Array("Sam",20,"America");

console.log(arr[0]); //Sam

console.log(arr[1]); //20

console.log(arr[2]); //America

//創(chuàng)建一個包含十個元素的數(shù)組

var arr = new Array(10);

console.log(arr); //[ <10 empty items> ]

arr[3] = "Sam";

arr[5] = 20;

//[ <3 empty items>, 'Sam', <1 empty item>, 20, <4 empty items> ]

console.log(arr);

//可以省略new關(guān)鍵字

var arr = Array();

console.log(arr); //[]

console.log(typeof arr) //object

//字面量創(chuàng)建

var arr = [];

console.log(typeof arr); //object

var arr1 = ["Sam",20,"America"];

console.log(arr1.length); //3

//修改某一個索引的值

var arr = ["Sam",20,"America"];

console.log(arr); //[ 'Sam', 20, 'America' ]

arr[1] = 100;

console.log(arr); //[ 'Sam', 100, 'America' ]

// //增加一個元素

arr[4] = "Computer";

//[ 'Sam', 100, 'America', <1 empty item>, 'Computer' ]

console.log(arr);

//使用 .length 獲得最后一個元素下標(biāo)值

var arr = new Array("Sam",20,"America");

arr[arr.length] = "COMPUTER";

console.log(arr);

//復(fù)雜一點的數(shù)組

var arr = [

{

name: "Sam",

age: 20

[3,4,5,"Amer", new Object()],

"Computer",

10+10,

new Array(5,6,7)

];

// [ { name: 'Sam', age: 20 },[ 3, 4, 5, 'Amer', {} ],'Computer',20,[ 5, 6, 7 ] ]

console.log(arr);

console.log(arr[0].name); //Sam

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

在線咨詢

上一篇：快速掌握html 的關(guān)鍵字
下一篇：JavaScript與PHP到底有何不同？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript 數(shù)組操作方法大全

push()

pop()

shift()、unshift()

reverse()

splice()

sort()

copyWithin()

fill()

length()

indexOf()、lastIndexOf()

find()

findIndex()

filter()

forEach()

join()

concat()

slice()

map()

reduce()、reduceRight()

flat()

flatMap()

Array.isArray()

Array.from()

Array.of()

toString()

every()

some()

includes()

valueOf()

keys()

push

unshift

splice

concat

pop

shift

slice

indexof

includes

find

reverse

sort

join

some

every

forEach

filter

map

總結(jié)：

您的項目需求