ECMAScript 之 Object Destructuring
栏目: JavaScript · 发布时间: 5年前
内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Impractical Python Projects
Lee Vaughan / No Starch Press / 2018-11 / USD 29.95
Impractical Python Projects picks up where the complete beginner books leave off, expanding on existing concepts and introducing new tools that you’ll use every day. And to keep things interesting, ea......一起来看看 《Impractical Python Projects》 这本书的介绍吧!
