1.擴充運算符
擴充運算符(spread)是三個點(
...
)。将一個數組轉為用逗号分隔的參數序列。
console.log(...[1,2,3])
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5 6
[...document.querySelectorAll('div')]
// [div,div,div...]
該運算符主要用于函數調用
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
該運算符将一個數組,變為參數序列。
如果擴充運算符後面是一個空數組,則不産生任何效果。
[...[], 1]
// [1]
替代函數的 apply 方法
由于擴充運算符可以展開數組,是以不再需要
apply
方法,将數組轉為函數的參數了。
// 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);
下面是擴充運算符取代
apply
方法的一個實際的例子,應用
Math.max
方法,簡化求出一個數組最大元素的寫法。
// ES5 的寫法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
上面代碼中,由于 JavaScript 不提供求數組最大元素的函數,是以隻能套用
Math.max
函數,将數組轉為一個參數序列,然後求最大值。有了擴充運算符以後,就可以直接用
Math.max
了。
另一個例子是通過
push
函數,将一個數組添加到另一個數組的尾部。
// ES5的 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的寫法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
擴充運算符的應用
(1)複制數組
數組是複合的資料類型,直接複制的話,隻是複制了指向底層資料結構的指針,而不是克隆一個全新的數組。
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
上面的代碼,a2并不是a1的克隆,而是指向同一份資料的另一個指針。修改
a2
,會直接導緻
a1
的變化。
ES5 隻能用變通方法來複制數組。
const a1=[1, 2];
const a2=a1.concat();
a2[0]=2;
console.log(a1) // [1,2]
上面代碼中,
a1
會傳回原數組的克隆,再修改
a2
就不會對
a1
産生影響。
擴充運算符提供了複制數組的簡便寫法。
const a1=[1, 2]
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;
以上2種方法a2都是a1的克隆。
(2)合并數組
擴充運算符提供了數組合并的新寫法。
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
不過,這兩種方法都是淺拷貝,使用的時候需要注意。
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3
和
a4
是用兩種不同方法合并而成的新數組,但是它們的成員都是對原數組成員的引用,這就是淺拷貝。如果修改了原數組的成員,會同步反映到新數組。
修改a1[0].foo=4,
a3
和
a4裡的foo也會變成4。
(3)與解構指派結合
擴充運算符可以與解構指派結合起來,用于生成數組。
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
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 // []
如果将擴充運算符用于數組指派,隻能放在參數的最後一位,否則會報錯。
(4)字元串
擴充運算符還可以将字元串轉為真正的數組。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
(未完待續)
原文連結:http://es6.ruanyifeng.com/#docs/array