對象解構是 ECMAScript6 新推出的特性，有了它能夠實現不少咱們平時須要比較多操做，或者封裝才能作到的東西，因此這篇文章，我們來詳細瞭解一下 ES6 對象解構的用法與用途。node
本篇文章所示代碼皆可在兼容ES6的環境，好比chrome瀏覽器或是高版本node中供你們自行測試與體驗代碼用處。chrome
對象解構數組
如今咱們來看一個最基礎的例子。瀏覽器
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;
將一個庫中的屬性經過解構的方式取出來，只取當前須要的屬性，能夠節省不少的空間。code
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 去獲取，也能夠經過對象解構的方式只取其中的一個。對象
這樣作的好處是更加的靈活，這個函數多是一個公共函數用於生產某特定種類的數據，可是事實上你的各個組件(或者是模塊)是須要這麼多數據，只須要部分特定數據的，這樣你就能夠使用對象解構專門的去取出來，既靈活操做，又節省內存空間。blog
值得注意的是第四行...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，當你意識到須要使用它的時候，它的做用就展示出來了。