ES6 rest參數和擴展運算符... 講解及示例

《JavaScript高級程序設計》在講Function類型時說：

說起來ECMAScript中什麼最有意思，我想那莫過於函數了。

其中有意思的地方之一：rest參數。

我們知道，ES6支持類(class)這種寫法了：

class A {
    constructor(x, y) {
        this._x = x;
        this._y = y;
    }
}

如果是C++，在對象初始化時如果想指定不同的方式來初始化數據成員，可以重載構造函數，然後在定義新對象時，編譯器根據實參類型決定使用哪個構造函數。

而JavaScript沒有函數重載，如何實現支持多種初始化方式呢？

首先，JS函數的參數與大多數其他語言中函數的參數有所不同，即便剛開始只定義了兩個參數，在調用時也未必一定要傳兩個，可以傳一個或者三個。

在函數體內，它可以通過一個對象來獲取所有參數，這個對象是：arguments。比如：

function sayHi() {
    alert("hello " + arguments[0] + "," + arguments[1]);
}

到了ES6，又引入了rest參數，形式爲：...變量名。arguments對象不是數組，只是可以下標訪問而已，而rest參數是一個真正的數組。

 
1.  

使用rest參數，上面的構造函數可以這樣寫：

class A {
    constructor(...args) {
        if (args.length == 3) {
            this._x = args[0];
            this._y = args[1];
            this._z = args[2];
        }
        else if (args.length == 2) {
            this._x = args[0];
            this._y = args[1];
            this._z = 0;
        }
        else {
            throw TypeError("args error!");
        }
    }
}

函數的rest 參數示例

ES6 引入 rest 參數（形式爲…變量名），用於獲取函數的多餘參數，這樣就不需要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function test() {
  return arguments;
}
test(2, 5, 3) // [2, 5, 3]的僞數組

function test(...values) {
  return values;
}
test(2, 5, 3) // [2, 5, 3]

數組的擴展運算符示例

相當於 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3])
// 1 2 3
[...[1,2,3], 4]
// [1, 2, 3, 4]

運用：

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

注意：
只有函數調用時，擴展運算符纔可以放在圓括號中，否則會報錯。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

對象的擴展運算符示例

取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

對象的擴展運算符等同於使用Object.assign()方法：

let aClone = { ...a };
// 等同於
let aClone = Object.assign({}, a);

擴展運算符可以用於合併兩個對象：

let ab = { ...a, ...b };
// 等同於
let ab = Object.assign({}, a, b)

參考文章: 
https://blog.csdn.net/weixin_43972437/article/details/106022308

https://blog.csdn.net/liminwang0311/article/details/84308397