一擴(kuò)展運(yùn)算符
1.含義
（1）擴(kuò)展運(yùn)算符在數(shù)組將一個數(shù)組轉(zhuǎn)化為由逗號隔開的參數(shù)序列,它就相當(dāng)于rest的逆運(yùn)算
console.log(1,2,...[3,4,5]}
//1,2,3,4,5
console.log(...document.querySelectorAll('div')
//[div,div,div]
（2）該運(yùn)算符主要用于函數(shù)調(diào)用。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
在上面的代碼中沪猴，該運(yùn)算符將一個數(shù)組直接變成了參數(shù)序列辐啄，并完成了·arr.push(...items)和add(..numbers)函數(shù)的調(diào)用。
例如上面的add他通過運(yùn)算符直接將numbers的兩個參數(shù)變成了函數(shù)add的參數(shù)并參加運(yùn)算运嗜，如果number的元素個數(shù)比函數(shù)add形參個數(shù)多的話壶辜，那add也只會從前往后取值參加運(yùn)算。
(3)擴(kuò)展運(yùn)算符與正常的函數(shù)參數(shù)可以結(jié)合使用担租，非常靈活砸民。
function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
上面代碼中，利用運(yùn)算符...args傳入了兩個參數(shù)奋救，...[3]傳入一個參數(shù) ,分別代表0,1和3
（4）擴(kuò)展運(yùn)算符后面還可以方表達(dá)式岭参。
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
（5）如果擴(kuò)展運(yùn)算符后面是一個空數(shù)組，則不產(chǎn)生任何效果尝艘。
[...[], 1]
// [1]
2.替代函數(shù)apply方法
由于擴(kuò)展運(yùn)算符可以展開數(shù)組演侯，所以不需要apply方法，將數(shù)組轉(zhuǎn)化為函數(shù)了背亥。
// ES5 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的寫法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
3.應(yīng)用
（1）復(fù)制數(shù)組
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
上面代碼中秒际，a2不是a1的克隆，而是指向同一個房間的地址而已狡汉，修改a2也會導(dǎo)致a1變化娄徊。
ES5通過變通方法來復(fù)制數(shù)組
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
擴(kuò)展運(yùn)算符提供了簡便寫法
const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;
上面兩種寫法a2都是a1的克隆
（2）合并數(shù)組
擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫法
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
這兩種辦法都是淺拷貝，使用時需要注意盾戴。
（3）與解構(gòu)賦值結(jié)合
擴(kuò)展運(yùn)算符可以解構(gòu)賦值結(jié)合起來寄锐，生成數(shù)組。
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 // []
但是如果將擴(kuò)展運(yùn)算符用于數(shù)組復(fù)制尖啡，只能放在數(shù)組最后一位橄仆，否則會報錯。
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
（4）字符串
擴(kuò)展字符串換可以將字符串轉(zhuǎn)為真正的數(shù)組
[...'hello']
// [ "h", "e", "l", "l", "o" ]
二.Array.from（）
Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組可婶，類似數(shù)組的對象和可比遍歷對象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
在實(shí)際應(yīng)用中沿癞，大家常見的對象影視DOM操作后返回的NodeList集合援雇，以及函數(shù)的arguments對象矛渴。Array.from都可以將他們轉(zhuǎn)為真正的數(shù)組。
// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps)
});
// arguments對象
function foo() {
var args = Array.from(arguments);
// ...
}
如果參數(shù)是一個真正的數(shù)組，Array.from會返回一個一樣的新數(shù)組具温。
Array.from([1, 2, 3])
// [1, 2, 3]
值得提醒的是蚕涤，擴(kuò)展運(yùn)算符（...）也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組。
// arguments對象
function foo() {
const args = [...arguments];
}
// NodeList對象
[...document.querySelectorAll('div')]
三.Array.from()
Array.of方法用于將一組值铣猩，轉(zhuǎn)換為數(shù)組
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
這個方法的主要目的揖铜，是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因?yàn)閰?shù)個數(shù)的不同达皿，會導(dǎo)致Array()的行為有差異天吓。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代碼中，Array方法沒有參數(shù)峦椰、一個參數(shù)龄寞、三個參數(shù)時，返回結(jié)果都不一樣汤功。只有當(dāng)參數(shù)個數(shù)不少于 2 個時物邑，`Array()才會返回由參數(shù)組成的新數(shù)組。參數(shù)個數(shù)只有一個時滔金，實(shí)際上是指定數(shù)組的長度色解。
Array.of基本上可以用來替代Array()或new Array()，并且不存在由于參數(shù)不同而導(dǎo)致的重載餐茵。它的行為非常統(tǒng)一科阎。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of總是返回參數(shù)值組成的數(shù)組。如果沒有參數(shù)忿族，就返回一個空數(shù)組
