面試官：數(shù)組的哪些方法有副作用，哪些是沒有副作用的？
如題，筆者之前在面試去哪時(shí)還真被問到過，由于平時(shí)只是在用，沒有太注意哪些方法有無副作用，回答的略微有點(diǎn)尷尬，所以今天就來做個(gè)詳細(xì)的總結(jié)。
另外在工作中對(duì)數(shù)組的應(yīng)用也是非常多的，而且es6也新增了很多新的方法，這次也會(huì)找一些高頻的整理出來。
有副作用的（改變?cè)瓟?shù)組）
push()
push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回該數(shù)組的新長(zhǎng)度。
const?arr?=?['1',?'2',?'3'];
const?length?=?arr.push('4');
console.log(length);
//?4
console.log(arr);
//?["1",?"2",?"3",?"4"]
shift()
方法從數(shù)組中刪除第一個(gè)元素，并返回該元素。此方法更改數(shù)組的長(zhǎng)度。
const?arr?=?[1,?2,?3];
const?firstElement?=?arr.shift();
console.log(arr);
//??[2,?3]
console.log(firstElement);
//?1
unshift()
在數(shù)組的首部添加一個(gè)或者多個(gè)元素,返回的是插入元素后數(shù)組的長(zhǎng)度
var?arr?=?[1,?2,?3,?4];
arr.unshift()????//4?????如果沒有插入的值那么返回的長(zhǎng)度是當(dāng)前數(shù)組的原長(zhǎng)度
var?a1?=?[1,?2,?3,?4];
a1.unshift(1,2,3)???//7
a1??//[1,?2,?3,?1,?2,?3,?4]
splice()
對(duì)數(shù)組進(jìn)行增、刪、改。此方法會(huì)改變?cè)瓟?shù)組。
//增
var?arr?=?[1,?2,?3,?4];
arr.splice(2,0,'插入')???//返回的是空數(shù)組?[]
arr??//[1,?2,?"插入",?3,?4]
//刪
var?a1?=?[1,?2,?3,?4];
a1.splice(2,1)???//?返回被刪除的元素?[3]
a1??//??[1,?2,?4]??//返回的是刪除后剩余的數(shù)組元素
//改
var?a1?=?[1,?2,?3,?4];
a1.splice(2,1,'改')???//返回的是被替換刪除掉的元素?[3]
a1??//[1,?2,?"改",?4]?
pop()
從數(shù)組中刪除最后一個(gè)元素，并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度。
const?arr?=?[1,?2,?3];
console.log(arr.pop());
//3
console.log(arr);
//[1,2]
reverse()
方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組。該方法會(huì)改變?cè)瓟?shù)組。
const?arr?=?['1',?'2',?'3'];
console.log(arr.reverse());
//??["3",?"2",?"1"]
console.log(arr)
//??["3",?"2",?"1"]
sort()
對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。默認(rèn)排序順序是將元素轉(zhuǎn)換為字符串，然后比較它們的 Unicode 碼。
const?months?=?['March',?'Jan',?'Feb',?'Dec'];
months.sort();
console.log(months);
//?["Dec",?"Feb",?"Jan",?"March"]
const?array1?=?[1,?30,?4,?21,?100000];
array1.sort();
console.log(array1);
//??[1,?100000,?21,?30,?4]
fill()
用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。
const?arr?=?[1,?2,?3,?4];
console.log(arr.fill(0,?2,?4));
//[1,?2,?0,?0]
console.log(arr.fill(5,?1));
//??[1,?5,?5,?5]
console.log(array1.fill(6));
//??[6,?6,?6,?6]?//無beigin?和??end??則全部填充
無副作用 （不改變?cè)瓟?shù)組）
concat（）
用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組。
const?array1?=?['a',?'b',?'c'];
const?array2?=?['d',?'e',?'f'];
const?array3?=?array1.concat(array2);
console.log(array3);
//?["a",?"b",?"c",?"d",?"e",?"f"]
join()
該方法將一個(gè)數(shù)組（或一個(gè)類數(shù)組對(duì)象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目，那么將返回該項(xiàng)目而不使用分隔符。
const?elements?=?['1',?'2',?'3'];
console.log(elements.join());
//?"1,2,3"
console.log(elements.join(''));
//"123"
console.log(elements.join('-'));
//"1-2-3"
indexOf() , lastIndexOf()
indexOf 返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1。
lastIndexOf 返回指定元素在數(shù)組中的最后一個(gè)的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找。
//indexOf
const?arr?=?['1',?'2',?'3'];
console.log(arr.indexOf('2'));
//?1
console.log(arr.indexOf('0'));
//-1
//lastIndexOf
const?arr?=?['1',?'2',?'3',?'1'];
console.log(arr.lastIndexOf('1'));
//??3
console.log(arr.lastIndexOf('2'));
//?1
slice()
返回截取后的新數(shù)組，截取數(shù)組中的一部分，從開始到結(jié)束，截取原則是，包括開始索引不包括結(jié)束索引值.
第二個(gè)參數(shù)可選：不寫或大于數(shù)組的 length，取將從開始索引到最后一個(gè)參數(shù)
let?a=[1,2,3,4,5]
let?b=a.slice(1,2)
b???//2
let?a=[1,2,3,4,5]
let?b=a.slice(1,1)
b???//undefined
let?a=[1,2,3,4,5]
let?b=a.slice(1)
b???//[2,?3,?4,?5]
entries()
返回一個(gè)新的Array Iterator對(duì)象，該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。
const?array1?=?['a',?'b',?'c'];
const?iterator1?=?array1.entries();
console.log(iterator1.next().value);
//?[0,?"a"]
console.log(iterator1.next().value);
//?[1,?"b"]
keys()
返回一個(gè)包含數(shù)組中每個(gè)索引的Array Iterator對(duì)象。
const?arr?=?['a',?'b',?'c'];
const?iterator?=?arr.keys();
for?(const?key?of?iterator)?{
??console.log(key);
}
//??0
//??1
//??2
values()
返回一個(gè)新的 Array Iterator 對(duì)象，該對(duì)象包含數(shù)組每個(gè)索引的值
const?array1?=?['a',?'b',?'c'];
const?iterator?=?array1.values();
for?(const?value?of?iterator)?{
??console.log(value);
}
//?"a"
//?"b"
//?"c"
every()
測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測(cè)試。它返回一個(gè)布爾值。
若收到一個(gè)空數(shù)組，此方法在一切情況下都會(huì)返回 true。
const?check?=?(currentValue)?=>?currentValue?
const?arr?=?[1,?30,?39,?29,?10,?13];
console.log(arr.every(check));
//?true??數(shù)組元素都<40
filter()
創(chuàng)建一個(gè)新數(shù)組, 返回符合條件的元素。
const?arr?=?[1,?2,?3];
const?result?=?arr.filter(item?=>?item?>?1);//過濾方法，條件?值長(zhǎng)度>6
console.log(result);
//?[2,?3]
forEach()
對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù),但傳入的回調(diào)里是可以更改原數(shù)組的。當(dāng)然不推薦這樣做。
const?array1?=?[{a:100}];
array1.forEach(element?=>{
?element.a=200?//不推薦，此處應(yīng)該是一個(gè)純函數(shù)
});
console.log(array1)
//?[Object?{?a:?200?}]
includes()
用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況，如果包含則返回 true，否則返回false。
onst?array1?=?[1,?2,?3];
console.log(array1.includes(2));
//?true
some()
檢測(cè)數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試。它返回的是一個(gè)Boolean。
const?array?=?[1,?2,?3,?4,?5];
const?even?=?(element)?=>?element?%?2?===?0;?//是否能整除2
console.log(array.some(even));
//??true?
reducer()
相當(dāng)于一個(gè)累加器，第一個(gè)參數(shù)表示上一次累計(jì)的返回值，第二個(gè)參數(shù)表示當(dāng)前元素值
const?arr?=?[1,?2,?3,?4];
const?reducer?=?(sum,?currentValue)?=>?sum?+?currentValue;
console.log(arr.reduce(reducer));
//?10
console.log(arr.reduce(reducer,?5));
//?15
map()
返回一個(gè)新數(shù)組，新數(shù)組的結(jié)果是舊數(shù)組中的每個(gè)元素是調(diào)用一次提供的函數(shù)后的返回值。
let?a=[1,2,3,4,5]
let?b=a.map(item=>item*2)
a???//[1,?2,?3,?3,?5]
b???//[2,?4,?6,?8,?10]
find() , findIndex()
find: 返回?cái)?shù)組中滿足提供的過濾函數(shù)的第一個(gè)元素的值。否則返回 undefined。
findIndex: 和find方法功能一致，但返回的是元素的索引
//find
const?arr?=?[5,?12,?8,?130,?44];
const?found?=?arr.find(item?=>?item?>?10);
console.log(found);
//12
//findIndex
const?arr?=?[5,?12,?8,?130,?44];
const?found?=?arr.findIndex(item?=>?item?>?10);
console.log(found);
//1
flat()
返回一個(gè)扁平化的新數(shù)組，接收一個(gè)數(shù)組（這個(gè)數(shù)組中的某些item本身也是一個(gè)數(shù)組），返回一個(gè)新的一維數(shù)組(如果沒有特別指定depth參數(shù)的話返回一維數(shù)組)。
const?arr?=?[?"a",?["b",?"c"],?["d",?["e",?"f"]]];
//?.flat()?接收一個(gè)可選的深度參數(shù)
const?reuslt?=?arr.flat(2);
console.log(?reuslt?);?
//?[?"a",?"b",?"c",?"d",?"e",?"f"?]
分享到此，希望對(duì)大家有所幫助 ^_^
點(diǎn)個(gè)『在看』支持下?