理解spread運算子與rest引數

龍恩0707發表於2017-09-05
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

相關文章