ES6 對象解構的用法與用途
對象解構是 ECMAScript6 新推出的特性，有了它可以實現很多我們平時需要比較多操作，或者封裝才能做到的東西，所以這篇文章，咱們來詳細了解一下 ES6 對象解構的用法與用途。
本篇文章所示代碼皆可在兼容ES6的環境，比如chrome瀏覽器或是高版本node中供大家自行測試與體驗代碼用處。
對象解構
現在我們來看一個最基礎的例子。
let { age, name, data } = { name: "jobsofferings", age: 21 };
console.log(name); // jobsofferings
console.log(age); // 21
console.log(data); // undefined
可以很明顯的觀察到，在對象解構中，外部定義的變量由大括號包裹、變量必須與屬性同名、對應的變量和屬性沒有次序、變量無同名對應屬性的相當於未定義(undefined)。
那么對象解構有什么好處呢？在我看來，對象解構能夠很便捷的將現有對象的內置方法提取出來，還能靈活的獲取特定的值，比如
let { log, sin, cos } = Math;
將一個庫中的屬性通過解構的方式取出來，只取當前需要的屬性，可以節省很多的空間。
function getStyle(w, defaultStyle) {
let width = w || '300px';
// someCode
return { width, ...defaultStyle };
}
const defaultStyle = { height: '100px', display: 'block' }
const style = getStyle('200px', defaultStyle);
const { width } = getStyle('200px', defaultStyle);
console.log(style); // { width: '200px', height: '100px', display: 'block' }
console.log(width); // 200px
這是一個很有意思的用法，我的函數接受一個 width 和 defaultStyle (這里甚至可以用 arguments 會更好，不過為了簡便演示，這個函數也不需要具體的意義，所以就沒寫出來)，使用了對象解構的方式去返回一個對象，我可以直接使用 style 去獲取，也可以通過對象解構的方式只取其中的一個。
這樣做的好處是更加的靈活，這個函數可能是一個公共函數用於生產某特定種類的數據，但是事實上你的各個組件(或者是模塊)是需要這么多數據，只需要部分特定數據的，這樣你就可以使用對象解構專門的去取出來，既靈活操作，又節省內存空間。
值得注意的是第四行...defaultStyle，這種寫法叫做擴展運算符，會將一個數組或者對象轉為用逗號分隔的參數序列。
/**
* 對象擴展
**/
const info = { name: "jobsofferings", age: 21, email: '222222' };
const infoChanged1 = { ...info, email: '3' };
const infoChanged2 = { email: '3', ...info };
console.log(infoChanged1); // { name: 'jobsofferings', age: 21, email: '3' }
console.log(infoChanged2); // { email: '222222', name: 'jobsofferings', age: 21 }
/**
* 額外：數組擴展
**/
console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
對於對象來說，通過...obj這種寫法，可以將除了外面最新定義的屬性(通常稱為默認值)以外的其他屬性循環綁定到新的對象中去。值得注意的是，如果放在新定義的屬性放在了后面，會覆蓋原數據的屬性，若是放在前面，則相當於在初始化了這個對象中的一個值的時候，在此將這個值重置了一次(解構中有的值)，所以才會出現第四行、第五行，結果不同的情況，所以這種寫法是有順序的。
同時要注意，對象的解構賦值是可以取到繼承的屬性的，這點可以通過 Object.setPrototypeOf 來進行操作。
const obj1 = {};
const obj2 = { name: 'jobsofferings' };
Object.setPrototypeOf(obj1, obj2);
const { name } = obj1;
console.log(name); // jobsofferings
靈活、適當地使用對象解構會是你的代碼更加的科學與可維護，所以在心里有關於"對象解構"這個概念和用法就OK，當你意識到需要使用它的時候，它的作用就展現出來了。