ES6詳解六:賦值語法糖 destructing & spread
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編譯。
相關文章
- 你必須收藏的 ES6 語法密糖 - Spread Operator 技巧
- 你必須收藏的 ES6 語法密糖 – Spread Operator 技巧
- Java語法糖詳解Java
- es6語法詳解
- Java登陸第三十三天——ES6(二)reset、spread、Class類語法糖Java
- 【ES6基礎】展開語法(Spread syntax)
- ES6語法學習筆記之let const 解構賦值筆記賦值
- ES6解構賦值賦值
- ES6 解構賦值賦值
- ES6之解構賦值賦值
- ES6 解構賦值+改名賦值
- JAVA語法糖和語法糖編譯Java編譯
- 語法糖
- ES6學習解構賦值賦值
- ES6中的解構賦值賦值
- 深入解析 ES6:解構賦值賦值
- 為什麼說ES6的class是語法糖?
- ES6學習-4 解構賦值(1)陣列的解構賦值賦值陣列
- Java 語法糖Java
- ES6:變數的解構賦值變數賦值
- ES6 變數的解構賦值變數賦值
- ES6 => new Set || map||...解構賦值賦值
- [譯]JavaScript ES6解構賦值指南JavaScript賦值
- 十分鐘帶你欣賞ES6語法糖
- 重學ES6基礎語法(六)
- ES6 - 變數的解構賦值解析變數賦值
- ES6之變數的解構賦值變數賦值
- ES6 - let與const,解構賦值賦值
- vue 常用語法糖Vue
- 大話 語法糖
- Golang常用語法糖Golang
- ES6 變數宣告與賦值:值傳遞、淺拷貝與深拷貝詳解變數賦值
- 基礎知識梳理~ES6 解構賦值賦值
- 深入ES6 三 變數的解構賦值變數賦值
- ES6 -- 變數的解構賦值的用途變數賦值
- vue.js語法糖Vue.js
- 【ES6基礎】解構賦值(destructuring assignment)賦值Struct
- ES6入門之變數的解構賦值變數賦值