ES6中陣列新增了哪些擴充套件?
一、擴充套件運算子的應用
ES6通過擴充套件元素符...，好比rest引數的逆運算，將一個數組轉為用逗號分隔的引數序列
console.log(...[1,2,3])
//123
console.log(1,...[2,3,4],5)
//12345
[...document.querySelectorAll('div')]
//[<div>,<div>,<div>]
主要用於函式呼叫的時候，將一個數組變為引數序列
functionpush(array,...items){
array.push(...items);
}
functionadd(x,y){
returnx+y;
}
constnumbers=[4,38];
add(...numbers)//42
可以將某些資料結構轉為陣列
[...document.querySelectorAll('div')]
能夠更簡單實現陣列複製
consta1=[1,2];
const[...a2]=a1;
//[1,2]
陣列的合併也更為簡潔了
constarr1=['a','b'];
constarr2=['c'];
constarr3=['d','e'];
[...arr1,...arr2,...arr3]
//['a','b','c','d','e']
注意：通過擴充套件運算子實現的是淺拷貝，修改了引用指向的值，會同步反映到新陣列
下面看個例子就清楚多了
constarr1=['a','b',[1,2]];
constarr2=['c'];
constarr3=[...arr1,...arr2]
arr[1][0]=9999//修改arr1裡面陣列成員值
console.log(arr[3])//影響到arr3,['a','b',[9999,2],'c']
擴充套件運算子可以與解構賦值結合起來，用於生成陣列
const[first,...rest]=[1,2,3,4,5];
first//1
rest//[2,3,4,5]
const[first,...rest]=[];
first//undefined
rest//[]
const[first,...rest]=["foo"];
first//"foo"
rest//[]
如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯
const[...butLast,last]=[1,2,3,4,5];
//報錯
const[first,...middle,last]=[1,2,3,4,5];
//報錯
可以將字串轉為真正的陣列
[...'hello']
//["h","e","l","l","o"]
定義了遍歷器（Iterator）介面的物件，都可以用擴充套件運算子轉為真正的陣列
letnodeList=document.querySelectorAll('div');
letarray=[...nodeList];
letmap=newMap([
[1,'one'],
[2,'two'],
[3,'three'],
]);
letarr=[...map.keys()];//[1,2,3]
如果對沒有 Iterator 介面的物件，使用擴充套件運算子，將會報錯
constobj={a:1,b:2};
letarr=[...obj];//TypeError:Cannotspreadnon-iterableobject
二、建構函式新增的方法
關於建構函式，陣列新增的方法有如下：
- Array.from()
- Array.of()
Array.from()
將兩類物件轉為真正的陣列：類似陣列的物件和可遍歷（iterable）的物件（包括ES6新增的資料結構Set和Map）
letarrayLike={
'0':'a',
'1':'b',
'2':'c',
length:3
};
letarr2=Array.from(arrayLike);//['a','b','c']
還可以接受第二個引數，用來對每個元素進行處理，將處理後的值放入返回的陣列
Array.from([1,2,3],(x)=>x*x)
//[1,4,9]
Array.of()
用於將一組值，轉換為陣列
Array.of(3,11,8)//[3,11,8]
沒有引數的時候，返回一個空陣列
當引數只有一個的時候，實際上是指定陣列的長度
引數個數不少於 2 個時，Array()才會返回由引數組成的新陣列
Array()//[]
Array(3)//[,,,]
Array(3,11,8)//[3,11,8]
三、例項物件新增的方法
關於陣列例項物件新增的方法有如下：
- copyWithin()
- find()、findIndex()
- fill()
- entries()，keys()，values()
- includes()
- flat()，flatMap()
copyWithin()
將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前陣列
引數如下：
- target（必需）：從該位置開始替換資料。如果為負值，表示倒數。
- start（可選）：從該位置開始讀取資料，預設為 0。如果為負值，表示從末尾開始計算。
- end（可選）：到該位置前停止讀取資料，預設等於陣列長度。如果為負值，表示從末尾開始計算。
[1,2,3,4,5].copyWithin(0,3)//將從3號位直到陣列結束的成員（4和5），複製到從0號位開始的位置，結果覆蓋了原來的1和2
//[4,5,3,4,5]
find()、findIndex()
find()用於找出第一個符合條件的陣列成員
引數是一個回撥函式，接受三個引數依次為當前的值、當前的位置和原陣列
[1,5,10,15].find(function(value,index,arr){
returnvalue>9;
})//10
findIndex返回第一個符合條件的陣列成員的位置，如果所有成員都不符合條件，則返回-1
[1,5,10,15].findIndex(function(value,index,arr){
returnvalue>9;
})//2
這兩個方法都可以接受第二個引數，用來繫結回撥函式的this物件。
functionf(v){
returnv>this.age;
}
letperson={name:'John',age:20};
[10,12,26,15].find(f,person);//26
fill()
使用給定值，填充一個數組
['a','b','c'].fill(7)
//[7,7,7]
newArray(3).fill(7)
//[7,7,7]
還可以接受第二個和第三個引數，用於指定填充的起始位置和結束位置
['a','b','c'].fill(7,1,2)
//['a',7,'c']
注意，如果填充的型別為物件，則是淺拷貝
entries()，keys()，values()
keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷
or(letindexof['a','b'].keys()){
console.log(index);
}
//0
//1
for(letelemof['a','b'].values()){
console.log(elem);
}
//'a'
//'b'
for(let[index,elem]of['a','b'].entries()){
console.log(index,elem);
}
//0"a"
includes()
用於判斷陣列是否包含給定的值
[1,2,3].includes(2)//true
[1,2,3].includes(4)//false
[1,2,NaN].includes(NaN)//true
方法的第二個引數表示搜尋的起始位置，預設為0
引數為負數則表示倒數的位置
[1,2,3].includes(3,3);//false
[1,2,3].includes(3,-1);//true
flat()，flatMap()
將陣列扁平化處理，返回一個新陣列，對原資料沒有影響
[1,2,[3,4]].flat()
//[1,2,3,4]
flat()預設只會“拉平”一層，如果想要“拉平”多層的巢狀陣列，可以將flat()方法的引數寫成一個整數，表示想要拉平的層數，預設為1
[1,2,[3,[4,5]]].flat()
//[1,2,3,[4,5]]
[1,2,[3,[4,5]]].flat(2)
//[1,2,3,4,5]
flatMap()方法對原陣列的每個成員執行一個函式相當於執行Array.prototype.map()，然後對返回值組成的陣列執行flat()方法。該方法返回一個新陣列，不改變原陣列
//相當於[[2,4],[3,6],[4,8]].flat()
[2,3,4].flatMap((x)=>[x,x*2])
//[2,4,3,6,4,8]
flatMap()方法還可以有第二個引數，用來繫結遍歷函式裡面的this
四、陣列的空位
陣列的空位指，陣列的某一個位置沒有任何值
ES6 則是明確將空位轉為undefined，包括Array.from、擴充套件運算子、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()
建議大家在日常書寫中，避免出現空位
五、排序穩定性
將sort()預設設定為穩定的排序演算法
constarr=[
'peach',
'straw',
'apple',
'spork'
];
conststableSorting=(s1,s2)=>{
if(s1[0]<s2[0])return-1;
return1;
};
arr.sort(stableSorting)
//["apple","peach","straw","spork"]
排序結果中，straw在spork的前面，跟原始順序一致