es6擴充套件運算子 三個點(...)
阿新 • • 發佈:2019-01-28
1 含義
擴充套件運算子( spread )是三個點(...)。它好比 rest 引數的逆運算,將一個數組轉為用逗號分隔的引數序列。
- console.log(...[1, 2, 3])
- // 1 2 3
- console.log(1, ...[2, 3, 4], 5)
- // 1 2 3 4 5
- [...document.querySelectorAll('div')]
- // [<div>, <div>, <div>]
該運算子主要用於函式呼叫。
[javascript]
- function push(array, ...items) {
- array.push(...items);
- }
- function add(x, y) {
- return x + y;
- }
- var numbers = [4, 38];
- add(...numbers) // 42
擴充套件運算子與正常的函式引數可以結合使用,非常靈活。
[javascript]- function f(v, w, x, y, z) { }
- var args = [0, 1];
- f(-1, ...args, 2, ...[3]);
由於擴充套件運算子可以展開陣列,所以不再需要apply方法,將陣列轉為函式的引數了。
[javascript] view plain copy- // ES5 的寫法
- function f(x, y, z) {
- // ...
- }
- var args = [0, 1, 2];
- f.apply(null, args);
-
// ES6 的寫法
- function f(x, y, z) {
- // ...
- }
- var args = [0, 1, 2];
- f(...args);
下面是擴充套件運算子取代apply方法的一個實際的例子,應用Math.max方法,簡化求出一個數組最大元素的寫法。 [javascript] view plain copy
- // ES5 的寫法
- Math.max.apply(null, [14, 3, 77])
- // ES6 的寫法
- Math.max(...[14, 3, 77])
- // 等同於
- Math.max(14, 3, 77);
另一個例子是通過push函式,將一個數組新增到另一個數組的尾部。
[javascript] view plain copy- // ES5 的寫法
- var arr1 = [0, 1, 2];
- var arr2 = [3, 4, 5];
- Array.prototype.push.apply(arr1, arr2);
- // ES6 的寫法
- var arr1 = [0, 1, 2];
- var arr2 = [3, 4, 5];
- arr1.push(...arr2);
上面程式碼的 ES5 寫法中,push方法的引數不能是陣列,所以只好通過apply方法變通使用push方法。有了擴充套件運算子,就可以直接將陣列傳入push方法。
下面是另外一個例子。
- // ES5
- new (Date.bind.apply(Date, [null, 2015, 1, 1]))
- // ES6
- new Date(...[2015, 1, 1]);
( 1 )合併陣列
擴充套件運算子提供了數組合並的新寫法。
[javascript] view plain copy- // ES5
- [1, 2].concat(more)
- // ES6
- [1, 2, ...more]
- var arr1 = ['a', 'b'];
- var arr2 = ['c'];
- var arr3 = ['d', 'e'];
- // ES5 的合併陣列
- arr1.concat(arr2, arr3);
- // [ 'a', 'b', 'c', 'd', 'e' ]
- // ES6 的合併陣列
- [...arr1, ...arr2, ...arr3]
- // [ 'a', 'b', 'c', 'd', 'e' ]
擴充套件運算子可以與解構賦值結合起來,用於生成陣列。
[javascript] view plain copy- // 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 // []
- const [...butLast, last] = [1, 2, 3, 4, 5];
- // 報錯
- const [first, ...middle, last] = [1, 2, 3, 4, 5];
- // 報錯
( 3 )函式的返回值
JavaScript 的函式只能返回一個值,如果需要返回多個值,只能返回陣列或物件。擴充套件運算子提供瞭解決這個問題的一種變通方法。
- var dateFields = readDateFields(database);
- var d = new Date(...dateFields);
( 4 )字串
擴充套件運算子還可以將字串轉為真正的陣列。
[javascript] view plain copy- [...'hello']
- // [ "h", "e", "l", "l", "o" ]
- 'x\uD83D\uDE80y'.length // 4