ES6詳解六:賦值語法糖 destructing & spread

lihongxun945發表於2015-10-06

destructing

這個不知道怎麼翻譯就不翻譯了,意思就是可以通過析構表示式的右邊值來同時對左邊的多個值進行賦值。說起來有點繞,舉幾個簡單的例子就可以理解:

var [a,b,c]=[1,2,3];    //通過陣列給多個變數賦值
var {name, age} = {name: "Tom", age:12} //通過一個物件來給多個變數賦值

上面兩個例子分別用一個陣列和一個物件對多個變數進行賦值。而且並用嚴格一一對應,可以在賦值的時候省略掉一些屬性:

var [a, ,c]=[1,2,3];    //忽略陣列中的第二個
var {name, age} = {name: "Tom", age:12, gender: "male"} //通過一個物件來給多個變數賦值

如果你用babel編譯,會發現上面的程式碼編譯出來是這樣的:

var _ref = [1, 2, 3];
var a = _ref[0];
var c = _ref[2];
var _name$age$gender = { name: "Tom", age: 12, gender: "male" };
var name = _name$age$gender.name;
var age = _name$age$gender.age;

結合 spread 語法,可以實現更靈活的賦值:

 var [a, b, ...others]=[1,2,3,4,5,6];

上面的程式碼把 陣列的第一個元素賦值給 a,第二個元素賦值給 b,剩餘的全部給 others,注意 others 前面的三個點。其實用babel編譯出來最好理解:

var a = 1;
var b = 2;
var others = [3, 4, 5, 6];

而且這個destructing不止能取扁平的物件屬性,其實只要結構對應 都能取到:

 var {name, child: {age}} = {name: "Bob", child: {age: 12}}     //取出age

還可以在for迴圈中通過destructing語法直接取出遍歷物件中的屬性:

var students = [
  {name: "Bob"},
  {name: "Lily"}
  ]

for(var {name} of students) {     //直接取出name屬性
  console.log(name);
}

同理在函式形參中也可以用來直接取實參的某些屬性:

function sayName({name}) {
  console.log(name);
}

sayName({name: "Bob"});

這個特性也只是一個語法糖而已,通過複雜一點點的ES4的程式碼完全可以實現同樣的效果。
不過坑爹的chrome現在還是不支援這兩個特性,想嘗試的只能用babel編譯。

相關文章