在ES6中對(duì)象解構(gòu)的示例分析

這篇文章主要為大家展示了“在ES6中對(duì)象解構(gòu)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“在ES6中對(duì)象解構(gòu)的示例分析”這篇文章吧。

對(duì)象解構(gòu)

1 刪除不需要的屬性

有時(shí)候你不希望保留某些對(duì)象屬性，也許是因?yàn)樗鼈儼舾行畔⒒騼H僅是太大了（just too big）。你可能會(huì)枚舉整個(gè)對(duì)象然后刪除它們，但實(shí)際上只需要簡(jiǎn)單的將這些無(wú)用屬性賦值給變量，然后把想要保留的有用部分作為剩余參數(shù)就可以了。

下面的代碼里，我們希望刪除_internal和tooBig參數(shù)。我們可以把它們賦值給internal和tooBig變量，然后在cleanObject中存儲(chǔ)剩下的屬性以備后用。

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

2 在函數(shù)參數(shù)中解構(gòu)嵌套對(duì)象

在下面的代碼中，engine是對(duì)象car中嵌套的一個(gè)對(duì)象。如果我們對(duì)engine的vin屬性感興趣，使用解構(gòu)賦值可以很輕松地得到它。

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3 合并對(duì)象

ES6帶來(lái)了擴(kuò)展運(yùn)算符（...）。它一般被用來(lái)解構(gòu)數(shù)組，但你也可以用它處理對(duì)象。

接下來(lái)，我們使用擴(kuò)展運(yùn)算符來(lái)展開一個(gè)新的對(duì)象，第二個(gè)對(duì)象中的屬性值會(huì)改寫第一個(gè)對(duì)象的屬性值。比如object2的b和c就會(huì)改寫object1的同名屬性。

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

以上是“在ES6中對(duì)象解構(gòu)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！