理解spread運算符與rest參數

理解spread運算符與rest參數

spread運算符與rest參數 是ES6的新語法。
它們的作用是什么？能做什么事情？

1. rest運算符用於獲取函數調用時傳入的參數。

function testFunc(...args) {
   console.log(args);  // ['aa', 'bb', 'cc']
   console.log(args.length); // 3
}
 // 調用函數
 testFunc('aa', 'bb', 'cc'); 

2. spread運算符用於數組的構造，析構，以及在函數調用時使用數組填充參數列表。

let arrs1 = ['aa', 'bb'];
let arrs2 = ['cc', 'dd'];

// 合並數組
let arrs = [...arrs1, ...arrs2];
console.log(arrs); // ['aa', 'bb', 'cc', 'dd']

// 析構數組
let param1, param2;
[param1, ...param2] = arrs1;

console.log(param1); // aa
console.log(param2); // ['bb']

3. 類數組的對象轉變成數組。

比如我們常見的是arguments對象，它是類數組，它有長度屬性，但是沒有數組的方法，比如如下代碼：

function testFunc() {
   console.log(arguments); // ['a', 'b']
   console.log(typeof arguments); // object
   console.log(arguments.length); // 2
   console.log(arguments.push('aa')); // 報錯  arguments.push is not a function
    };
 // 函數調用
 testFunc('a', 'b');

把類數組對象轉換成數組，代碼如下：

function testFunc() {
   // 轉換成數組
   var toArray = [...arguments];
   console.log(toArray); // ['a', 'b']
   toArray.push('11');   // ['a', 'b', '11']
   console.log(toArray);
 };
 // 函數調用
 testFunc('a', 'b');

4. 數組的深度拷貝
淺拷貝如下demo：

var arr1 = [1, 2];
var arr2 = arr1;
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

如上代碼，arr1是一個數組有2個值 [1, 2], 然后把 arr1 賦值個 arr2, 接着往arr1中添加一個元素3，然后就會影響arr2中的數組。
因為我們知道淺拷貝是：拷貝的是該對象的引用，所以引用值改變，其他值也會跟着改變。
所以引用值也跟着改變。

深度拷貝對象如下代碼：

var arr1 = [1, 2];
var arr2 = [...arr1];
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]

5. 字符串轉數組
如下代碼：

var str = 'kongzhi';
var arr = [...str];
console.log(arr); // ["k", "o", "n", "g", "z", "h", "i"]

如果一個函數最后一個形參以 ...為前綴的，則在函數調用時候，該形參會成為一個數組，數組中的元素都是傳遞給這個函數多出來的實參的值。
比如如下代碼：

function test(a, ...b) {
   console.log(a); // 11
   console.log(b); // ['22', '33']
}
test('11', '22', '33');

6. 解構賦值
解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。

// 解構數組
var arr = ['aa', 'bb', 'cc'];
let [a1, a2, a3] = arr;
console.log(a1); // aa
console.log(a2); // bb
console.log(a3); // cc

// 對象解構
var o = {a: 1, b: 2};
var {a, b} = o;
console.log(a);  // 1
console.log(b);  // 2

7. 交換變量

var a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

8. 從函數中返回多個值

function test() {
   return {
      aa: 1,
      bb: 2
   }
}
let { aa, bb } = test();
console.log(aa); // 1
console.log(bb); // 2