1.push()

push()可以將某些值加入到數(shù)組的最后一個(gè)位置妙痹，并且不限制添加數(shù)量（注：數(shù)組長(zhǎng)度是有限制的）铸史，如果需要添加多項(xiàng)內(nèi)容使用逗號(hào)隔開即可，加入后數(shù)組長(zhǎng)度會(huì)增加怯伊。

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]

2.pop()

pop()會(huì)移除數(shù)組的最后一個(gè)元素琳轿。

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

a.pop();

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

3.shift()、unshift()

shift()會(huì)移除數(shù)組的第一個(gè)元素耿芹。

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

a.shift();

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

unshift()會(huì)將指定的元素添加到數(shù)組的第一個(gè)位置崭篡。

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]

4.reverse()

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

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

a.reverse();

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

5.splice()

splice()可以移除或新增數(shù)列的元素，它包含了三個(gè)參數(shù)吧秕，第一個(gè)是要移除或要添加的序列號(hào)( 必填)琉闪，第二個(gè)是要移除的長(zhǎng)度( 選填，若不填則從第一個(gè)參數(shù)序號(hào)位置開始砸彬，后方的所有元素都會(huì)被移除颠毙，若設(shè)定為0則不會(huì)有元素被移除)斯入，第三個(gè)是要替換的內(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 被移除了 )

添加第三個(gè)參數(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個(gè)位置 )

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 個(gè)位置 )

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 個(gè)位置 )

6.sort()

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

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)會(huì)將元素轉(zhuǎn)換成字串椰憋，并采用unicode來判斷厅克，這也會(huì)造成某些數(shù)字的排序錯(cuò)誤，如下段示例：

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]

7.copyWithin()

copyWithin()能復(fù)制數(shù)組中的某些元素橙依，并將它們放到同一個(gè)數(shù)組指定的位置证舟，copyWithin()有三個(gè)參數(shù)，第一個(gè)是要置換的位置(必填)窗骑，第二個(gè)是從什么位置開始復(fù)制(選填女责，預(yù)設(shè)0 )，第三個(gè)是停止復(fù)制的元素的前一個(gè)位置(選填创译，默認(rèn)值等于數(shù)組長(zhǎng)度)抵知。

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ù)組長(zhǎng)度，只出只復(fù)制到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 )

8.fill()

fill()會(huì)把數(shù)組中所有元素软族，置換為指定的值刷喜，fill()有三個(gè)參數(shù)，第一個(gè)是準(zhǔn)備要置換的內(nèi)容(必填)立砸，第二個(gè)是從什么位置開始置換(選填掖疮，不設(shè)定就全部置換) ，第三個(gè)是停止置換的元素的前一個(gè)位置(選填颗祝，預(yù)設(shè)等于數(shù)組長(zhǎng)度)浊闪。

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]

9.length()

length可以取得數(shù)組的長(zhǎng)度。

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

console.log(a.length);// 8

10.indexOf()螺戳、lastIndexOf()

indexOf()會(huì)判斷數(shù)組中是否包含某個(gè)值规揪，判斷的方式為「由左而右」，如果有包含就返回這個(gè)值在數(shù)組中的索引值温峭，如果沒有就返回-1猛铅，有兩個(gè)參數(shù)，第一個(gè)參數(shù)表示要判斷的值( 必填)凤藏，第二個(gè)參數(shù)表示從數(shù)組的哪個(gè)位置開始判斷( 選填奸忽，預(yù)設(shè)為0 )堕伪。

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

console.log(a.indexOf(4));// 3

console.log(a.indexOf(4,5));// -1 ( 在6,7,8中搜索有沒有4 )

lastIndexOf()會(huì)判斷數(shù)組中是否包含某個(gè)值，判斷的方式為「由右而左」栗菜，如果有包含就返回這個(gè)值在數(shù)組中的索引值欠雌，如果沒有就返回-1，這個(gè)方法有兩個(gè)參數(shù)疙筹，第一個(gè)參數(shù)表示要判斷的值( 必填)富俄，第二個(gè)參數(shù)表示判斷從數(shù)組的哪個(gè)位置開始從右往左查找( 選填，默認(rèn)為整個(gè)數(shù)組長(zhǎng)度-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 )

11.find()

find()會(huì)將數(shù)組中的「每一個(gè)」元素帶入指定的函數(shù)內(nèi)做判斷，并會(huì)返回第一個(gè)符合判斷條件的元素暴备，如果沒有元素符合則會(huì)返回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

12.findIndex()

findIndex()會(huì)將數(shù)組中的「每一個(gè)」元素帶入指定的函數(shù)內(nèi)做判斷，并會(huì)返回第一個(gè)符合判斷條件元素的位置索引涯捻，如果沒有元素符合則會(huì)返回-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

13.filter()?

filter()會(huì)將數(shù)組中的「每一個(gè)」元素帶入指定的函數(shù)內(nèi)做判斷，如果元素符合判斷條件則會(huì)返回障癌，組成一個(gè)新的數(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]

14.forEach()

forEach()會(huì)將數(shù)組中每個(gè)元素套用到指定的函數(shù)里進(jìn)行運(yùn)算，函數(shù)有三個(gè)參數(shù)涛浙，第一個(gè)參數(shù)表示每個(gè)元素的值( 必填)康辑，第二個(gè)參數(shù)為該元素的索引值( 選填)，第三個(gè)參數(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 )

如果結(jié)合第二和第三個(gè)參數(shù)進(jìn)行搭配使用晾捏，就能做到改變?cè)緮?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]

15.join()

join()可以將數(shù)組中所有元素哀托，變成由指定的字符分割合并在一起組合成字符串進(jìn)行呈現(xiàn)，若沒有指定字符默認(rèn)會(huì)用「逗號(hào)」合并劳秋。

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

16.concat()

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

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]

17.slice()

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

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

let b=a.slice(2,4);

console.log(b);// [3, 4]

18.map()

map()會(huì)處理數(shù)組中每個(gè)元素添坊，最后返回一個(gè)新的數(shù)組，里頭有一個(gè)函數(shù)( 必填) 和一個(gè)返回函數(shù)里的this參數(shù)( 選填)箫锤，函數(shù)內(nèi)又包含三個(gè)參數(shù)贬蛙，第一個(gè)是每個(gè)元素的值( 必填)雨女，第二個(gè)是當(dāng)前元素的索引值( 選填)，第三個(gè)是當(dāng)前的數(shù)組( 選填)阳准。

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

let b=a.map(e=>{returne+10;});

console.log(b);// [11, 12, 13, 14, 15, 16, 17, 18]

使用第二個(gè)和第三個(gè)參數(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的第一個(gè)元素」});

console.log(b);// ['101', '211', '321', '431', '541', '651', '761', '871']

如果要使用回調(diào)函數(shù)里this的參數(shù)氛堕，則「不能使用」箭頭函數(shù)，因?yàn)榧^函數(shù)的this指向和函數(shù)的this指向不同野蝇，所以要用一般的函數(shù)處理讼稚。

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

let b=a.map(function(e){

????returne+this;// 此處的 this為10

},10);

console.log(b);// [11, 12, 13, 14, 15, 16, 17, 18]

19.reduce()、reduceRight()

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

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

let b=a.reduce(function(total,e){returntotal+e;});

console.log(b);// 36 ( 1+2+3+4+5+6+7+8=36 )

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

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

let b=a.reduce(function(total,e){returntotal-e;});

console.log(b);// -34 ( 1-2-3-4-5-6-7-8 = -34 )

let c=a.reduceRight(function(total,e){returntotal-e;});

console.log(c);// -20 ( 8-7-6-5-4-3-2-1 = -20 )

20.flat()

flat()可以將一個(gè)多維數(shù)組的深度轉(zhuǎn)成一維(扁平化或稱作降維)收津，它有一個(gè)選填的參數(shù)，代表要轉(zhuǎn)換的深度數(shù)字浊伙，預(yù)設(shè)為1（只展開一層放到一維數(shù)組里撞秋，如果是2，只展開2層放到一維數(shù)組里）嚣鄙，如果深度有很多層吻贿，可使用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]

21.flatMap()

flatMap()的方法等于map()和flat()的組合哑子，在運(yùn)算后直接將數(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"]

22.Array.isArray()

Array.isArray()能判斷一個(gè)元素是否為數(shù)組，如果是就返回true卧蜓，不然就返回false帐要。

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

let b=123;letc='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

23.Array.from()

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

類數(shù)組對(duì)象具有l(wèi)ength 屬性以及索引化index 的元素，可迭代對(duì)象表示具有可以利用迭代的方式取得它自己本身的元素赠橙，例如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ù)組對(duì)象寫法必須包含length 屬性，且對(duì)象的key須為0開始的數(shù)字简烤，對(duì)應(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]

24.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]

25.toString()

toString()會(huì)把整個(gè)數(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

26.every()

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

let a=[1,2,3,4,5,6];

console.log(a.every(e=>e>3));// fasle ( 因?yàn)?、2 小于 3翼虫，3 等于 3 )

console.log(a.every(e=>e>0));// true

27.some()

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

let a=[1,2,3,4,5,6];

console.log(a.some(e=>e>3));// 返回 true招拙，因?yàn)?4唧瘾、5、6 大于 3

console.log(a.some(e=>e>6));// 返回 fasle别凤，因?yàn)槿夹∮诨虻扔?6

28.includes()

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

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 )

29.valueOf()

valueOf()會(huì)返回?cái)?shù)組的原始值注祖，如果原本的數(shù)組有修改猾蒂，那么返回的原始值也會(huì)跟著改變（相當(dāng)淺復(fù)制）

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] ( 因?yàn)?a 的原始值更新了均唉，所以 b 也變了 )

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

30.keys()

keys()會(huì)返回?cái)?shù)組中的每一個(gè)索引值( key )成為一個(gè)新的Array Iterator對(duì)象，因?yàn)槭茿rray Iterator對(duì)象肚菠，可以使用for...of進(jìn)行迭代舔箭。

let a=['a','b','c','d','e'];

let b=a.keys();

for(let key of b){

????console.log(key);// 1、2、3层扶、4箫章、5

}

感謝作者：前端達(dá)人，微信公眾號(hào) -?前端達(dá)人（frontend84）