擴展運算符
擴展運算符是三個...,該運算父會將一個數(shù)組轉(zhuǎn)化為用逗號分隔的參數(shù)序列，例如：
console.log(...[1,2,3]);//1,2,3
擴展運算符后面可以放置表達式
const x=1;
const arr = [
...(x > 0 ? ["a"] : []),
"b"
]
console.log(arr);
如果擴展運算符后是一個空數(shù)組巢寡，那么不會產(chǎn)生任何效果
[...[],1];//[1]
該方法主要用于函數(shù)調(diào)用
const args = [0, 1];
function f(v, w, x, y, z) {
console.log(v + w + x + y + z);
}
f(-1, ...args, 2, ...[3]);//5
使用該方法可以極大的簡化我們之前的寫法，例如
//es5
Math.max.apply(null, [1, 2, 3]);
var arr1 = [1, 2, 3],
arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
//es6
Math.max(...[1, 2, 3]);
arr1.push(...arr2);
實現(xiàn)數(shù)組的深拷貝
//在數(shù)組中我們實現(xiàn)數(shù)組的復制轰豆，如
var arr1=[1,2,3];
arr2=arr1;
//這種方式只是復制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針妻率，而不是克隆了一個全新的數(shù)組
arr2[0]=0;
console.log(arr1[0]);//0
//如果我們想要在底層再開辟一塊空間來克隆一個新數(shù)組，
//es5
const arr2=arr1.concat();
//es6
const arr2=[...arr1];
合并數(shù)組
//es5
const arr2=arr1.concat(arr3);
//es6
const arr2=[...arr1,...arr3];
其它一些例子
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 // []
注意如果將擴展運算符應用于數(shù)組的賦值郊闯，只能發(fā)在參數(shù)的最后一位，否則會報錯
const [first,...arr,last]=[1,2,3,4]//報錯
Array.from（）
Array.from方法用于將兩類對象轉(zhuǎn)化為真正的數(shù)組：類數(shù)組對象和可遍歷的對象
類數(shù)組對象如document.querySelectorAll獲取到的對象(object NodeList類型)蛛株，以及arguments對象
var arrayLike = document.querySelectorAll("div");
//NodeList(2) [div#block1, div#block2]
console.log(Array.from(arrayLike));
//(2) [div#block1, div#block2]团赁，此時可以正常使用數(shù)組的方法
Array.from(arrayLike).push(2);
//ES5
arrayLike=[].slice.call(arrayLike)
Array.from方法還可以接受第二個參數(shù)，該參數(shù)的作用類似于數(shù)組的map方法谨履，用來對每一個元素進行處理將處理后返回的值放入返回的數(shù)組
var arr={
0:"name",
1:"age",
length:2
};
console.log(Array.from(arr, t => t + "i"));
//["namei", "agei"]
該方法也可以用來處理字符串欢摄，將字符串轉(zhuǎn)換為數(shù)組，同時可以避免javascript將大于/uFFFF的Unicode字符算作兩個字符的bug
var str="12345";
console.log(Array.from(str));
// ["1", "2", "3", "4", "5"]
Array.of()
Array.of方法用于將一組值轉(zhuǎn)換為數(shù)組
Array.of(1, 2, 1);
//[1, 2, 1]
相比于之前的Array方法笋粟，該方法不會出現(xiàn)下面的情況
Array(3)
//[empty × 3] || [ , , ,]
console.log(Array.of(3));
//[3]
我們可以模擬實現(xiàn)該方法
function ArrayOf() {
return [].slice.call(arguments);
}
copyWithin()
該方法用來在數(shù)組內(nèi)部將指定位置的成員復制到其他位置怀挠，該位置的原有成員會被覆蓋析蝴，數(shù)組將會被修改，然會返回修改后的數(shù)組
Array.prototype.copyWithin(target,start,end)
該方法接受三個參數(shù)
- target绿淋，必需參數(shù)闷畸，從該位置開始替換數(shù)據(jù)
- start，可選參數(shù)吞滞，從該位置開始讀取數(shù)據(jù)佑菩，默認為0，如果為負值裁赠，表示倒數(shù)
- end殿漠，可選參數(shù)，表示到該位置停止讀取數(shù)據(jù)佩捞，默認等于數(shù)組長度绞幌，如果為負值，表示倒數(shù)
var arr=[1,2,3,4,5];
arr.copyWithin(2,0,4);
//[1, 2, 1, 2, 3]
注意的一個事項一忱，從開始位置替換原數(shù)組是指將我們截取的等長度的數(shù)組從target位置開始的等長度的數(shù)組替換為我們通過start和end截取的字符
find()莲蜘、findIndex()
find()方法用于查找數(shù)組中是否包含符合條件的成員，它的參數(shù)是一個回調(diào)函數(shù)帘营，所有的數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)菇夸，直到找到符合該回調(diào)函數(shù)條件的成員，返回第一個符合條件的成員仪吧，如果沒有找到那么返回undefined
var arr=[1,2,3,4,-5];
arr.find((n) => n < 0);
//-5
find中傳入的回調(diào)函數(shù)也可以接受三個參數(shù)庄新，分別是當前的值，當前的位置和原數(shù)組，這些值都可以做為條件來篩選我們要查找的數(shù)組成員
var arr=[1,2,3,4,-5];
arr.find((val, index, arr) => {
return index != 4 && value >2;
//返回位置不為4并且值大于2的第一個成員
});
//3
findIndex方法的用法與find方法非常相似，返回第一個符合條件的數(shù)組成員的位置梗醇，如果所有成員都不符合條件查乒，那么返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
// 2
fill()
[ ].fill(val,start,end)
該方法用于使用給定的值填充一個數(shù)組
[1,2,3,4].fill("hi",0,2);
//["hi", "hi", 3, 4]
該方法可以接收3個參數(shù)
- val，表示用來填充數(shù)組的字符
- start，表示填充開始的位置
- end，表示填充結(jié)束的位置
如果不傳入?yún)?shù)，會將原數(shù)組中的成員都替換為undefined
includes()
Array.prototype.includes方法返回一個布爾值荷科，表示某個數(shù)組中是否包含給定的值，與字符串的includes方法類似纱注，該方法其實可以看作是es6在自己的規(guī)范中實現(xiàn)了$.inArray();
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
//JQuery
$.inArray(1, arr, 0) //存在返回位置畏浆，不存在返回-1
該方法可以接收第二個參數(shù)來表示從什么位置開始檢索，默認為0狞贱，負數(shù)表示倒數(shù)位置刻获，如果大于數(shù)組長度，那么會重置檢索位置為0瞎嬉，比起之前我們常用的indexof蝎毡，返回布爾值相比-1更加直觀
