ECMAScript 之 Object Destructuring
栏目: JavaScript · 发布时间: 6年前
内容简介：ECMAScript 2015 提供了很有創意的 Object Destructuring，原本需要好幾行才能完成的 code，只需要一行就能解決。ECMAScript 2015
ECMAScript 2015 提供了很有創意的 Object Destructuring，原本需要好幾行才能完成的 code，只需要一行就能解決。
Version
ECMAScript 2015
Basic Assignment
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const firstName = obj.firstName;
const lastName = obj.lastName;
console.log(firstName, lastName);
obj 有 firstName 與 lastName 兩個 property，想建立兩個變數也是 firstName 與 lastName ，ECMAScript 5 寫法必須要 2 行。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const { firstName, lastName } = obj;
console.log(firstName, lastName);
ECMAScript 2015 將變數名稱直接寫在 object literal 內，object 會依照變數名稱去尋找 object 的 property key，直接分解到變數，只需 1 行。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
let firstName = '';
let lastName = '';
({ firstName, lastName } = obj);
console.log(firstName, lastName);
也可以先宣告變數，在由 Object Destructuring 分解，不過這種寫法時，必須加上 () ，因為 {} 在 = 左側時，會被誤認為 block 而非 Object Literal，導致語法錯誤。
New Variable Name
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const givenName = obj.firstName;
const familyName = obj.lastName;
console.log(givenName, familyName);
若變數名稱與 object 的 property key 不同，在 ECMAScript 5 必須要 2 行。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const { firstName: givenName, lastName: familyName } = obj;
console.log(givenName, familyName);
在 ECMAScript 2015 的 Object Destruction 分解成變數時，預設變數名稱與 property key 相同，若要改變變數名稱，可加上 : ，並在 : 右側加上新的變數名稱。
Cloning Object
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};
const obj2 = obj1;
console.log(obj2);
console.log(obj2 === obj1);
若要複製 object，直覺會使用 = ，但這只是將 reference 加以複製，所以 obj1 與 obj2 指向同一個 object，而不是真的複製 object。
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};
const obj2 = Object.assign({}, obj1);
console.log(obj2);
console.log(obj2 === obj1);
ECMAScript 5 可使用 Object.assign() 將 object 加以複製， assign() 是真的回傳一個新的 object，而非指向同一個 object。
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
};
const {...obj2} = obj1;
console.log(obj2);
console.log(obj2 === obj1);
ECMAScript 2015 則有新的寫法，Object Destructuring 配合 ... spread operator，其結果等同於 ECMAScript 5 的 Object.assign() 。
Function Parameter
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = function(args) {
const firstName = args.firstName;
const lastName = args.lastName;
console.log(firstName, lastName);
};
func(obj);
若 parameter 為 object，在 ECMAScript 會使用 . 的方式存取 property key，需要 2 行。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = ({ firstName, lastName }) => console.log(firstName, lastName);
func(obj);
在 ECMAScript 2015 可在 parameter 使用 Object Destructuring，直接在 parameter list 分解成變數。
雖然只是一個 object，但若使用 Arrow Function 時，仍須加上 () 將 array 刮起來。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = ({ firstName, lastName, age = 20 }) => console.log(firstName, lastName, age);
func(obj);
若想提供 default value 也行，在 = 之後提供 default value 即可。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = ({ firstName: givenName, lastName: familyName, age = 20 }) =>
console.log(givenName, familyName, age);
func(obj);
若想同時改變 parameter 名稱，並提供 default value，也可以同時寫在 parameter list。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = ({ firstName = 'John', lastName = 'Doe', age = 20 } = {}) =>
console.log(firstName, lastName, age);
func();
若 object 是 optional parameter，可加上 = ，並在右側加上 {} 。
const obj = {
firstName: 'Sam',
lastName: 'Xiao',
};
const func = (args = {}) => {
const {
firstName = 'John',
lastName = 'Doe',
age = 20,
} = args;
console.log(firstName, lastName, age);
};
func();
若要分解的 parameter 太多，通通寫在 parameter list 導致可讀性不佳，其實可考慮在 parameter list 只寫 optional parameter，而 Object Destructuring 與 default value 寫在 function body。
const obj = {
id: 1,
name: 'Sam',
scores: {
math: 90,
english: 80,
},
};
const func = function(args) {
const id = args.id;
const name = args.name;
const math = args.scores.math;
const english = args.scores.english;
console.log(id, name, math, english);
};
func(obj);
若 parameter 為 nested object，在 ECMAScript 5 必須一一分解變數，需要 4 行。
const obj = {
id: 1,
name: 'Sam',
scores: {
math: 90,
english: 80,
},
};
const func = ({id, name, scores: { math, english }}) =>
console.log(id, name, math, english);
func(obj);
ECMAScript 2015 也可直接在 parameter list 分解 nested object。
Function Return Object
const func = function() {
return {
firstName: 'Sam',
lastName: 'Xiao',
};
};
const result = func();
const firstName = result.firstName;
const lastName = result.lastName;
console.log(firstName, lastName);
若 function 回傳 object，要將 object 每個 property 指定到變數，在 ECMAScript 會使用 . 的方式存取 property key，需要 2 行。
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
});
const { firstName, lastName } = func();
console.log(firstName, lastName);
在 ECMAScript 2015 可使用 Object Destructuring 接收 function 回傳的 object，會自動分解成變數。
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
});
const { firstName } = func();
console.log(firstName);
若並不想分解 function 所傳回的全部 property，可在 {} 寫要分解的變數即可。
const func = () => ({
firstName: 'Sam',
lastName: 'Xiao',
age: 20,
gender: 'Male',
});
const { firstName, lastName, ...info } = func();
console.log(firstName, lastName);
console.log(info);
若 function 回傳的 object，想部分也分解成 object，可搭配 ... rest operator。
但這種寫法必須寫在 Object Destructuring 的最後才行
Conclusion
- Object Destructing 的基本精神就是
一個蘿蔔一個坑，ECMAScript 2015 會自動將 object 的 property 分解到變數 -
:左側為 property key，右側為新的變數名稱，可搭配=設定 default value - Object Destruncturing 配合 Spread Operator，可以取代原本
Object.assign()才能複製 object - Object Destructuring 配合 function parameter 特別好用，可以直接在 parameter list 中就分解 parameter，還可搭配 default value
- Object Destructuring 可將 function 回傳的 object 直接分解到變數
Reference
以上所述就是小编给大家介绍的《ECMAScript 之 Object Destructuring》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
用户至上：用户研究方法与实践（原书第2版）
凯茜·巴克斯特 / 王兰、杨雪、苏寅 / 机械工业出版社 / 2017-5-1 / 99
《UI/UE系列丛书 用户至上：用户研究方法与实践（原书第2版）》是用户研究方法指南，谷歌用户体验研究员十几年工作经验结晶，从理论到实战，包含完整的实操案例，是设计以人为中心产品的实用手册。 《UI/UE系列丛书 用户至上：用户研究方法与实践（原书第2版）》包含五个部分共15章。入门篇包括第1～5章：介绍用户体验入门，如何理解目标用户，道德与法律问题，如何搭建研究设施，如何选择用户体验研究方......一起来看看 《用户至上：用户研究方法与实践（原书第2版）》 这本书的介绍吧!
