該文章中大多數(shù)都是轉(zhuǎn)載:http://es6.ruanyifeng.com ? ?
感謝阮一峰老師的文章為我解答了不少疑惑桌粉。
含義
擴(kuò)展運(yùn)算符(spread)是三個(gè)點(diǎn)(...)盐碱。它好比 rest 參數(shù)的逆運(yùn)算潘拨,將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
console.log([...document.querySelectorAll('div')]);
// [<div>, <div>, <div>]
該運(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
上面代碼中炫隶,array.push(...items)和add(...numbers)這兩行,都是函數(shù)的調(diào)用仑荐,它們的都使用了擴(kuò)展運(yùn)算符雕拼。該運(yùn)算符將一個(gè)數(shù)組,變?yōu)閰?shù)序列粘招。
擴(kuò)展運(yùn)算符與正常的函數(shù)參數(shù)可以結(jié)合使用啥寇,非常靈活。
function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
替代函數(shù)的 apply 方法?
由于擴(kuò)展運(yùn)算符可以展開(kāi)數(shù)組洒扎,所以不再需要apply方法示姿,將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。
// ES5 的寫(xiě)法
function f(x, y, z) {
? // ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的寫(xiě)法
function f(x, y, z) {
? // ...
}
let args = [0, 1, 2];
f(...args);
下面是擴(kuò)展運(yùn)算符取代apply方法的一個(gè)實(shí)際的例子逊笆,應(yīng)用Math.max方法栈戳,簡(jiǎn)化求出一個(gè)數(shù)組最大元素的寫(xiě)法。
// ES5 的寫(xiě)法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫(xiě)法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
上面代碼中难裆,由于 JavaScript 不提供求數(shù)組最大元素的函數(shù)子檀,所以只能套用Math.max函數(shù)镊掖,將數(shù)組轉(zhuǎn)為一個(gè)參數(shù)序列,然后求最大值褂痰。有了擴(kuò)展運(yùn)算符以后亩进,就可以直接用Math.max了。
另一個(gè)例子是通過(guò)push函數(shù)缩歪,將一個(gè)數(shù)組添加到另一個(gè)數(shù)組的尾部归薛。
// ES5的 寫(xiě)法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的寫(xiě)法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
上面代碼的 ES5 寫(xiě)法中,push方法的參數(shù)不能是數(shù)組匪蝙,所以只好通過(guò)apply方法變通使用push方法主籍。有了擴(kuò)展運(yùn)算符,就可以直接將數(shù)組傳入push方法逛球。
下面是另外一個(gè)例子千元。
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);