解構嵌套對象

Question

我正在嘗試玩ES6，並嘗試將ES5函數轉換為ES6。

ES5：

const ResponseData = {
    items: [{name: 'Matt'}]
}

function getName(ResponseData) {
    let itemDetails = ResponseData && ResponseData.items && ResponseData.items[0];
    return itemDetails.name;
}

但是，我不確定如何在ES6解構中訪問items [0]。

這是我的嘗試：

function getItemES6(ResponseData) {
 const { items : item = []   } = ResponseData;
 return item;
}

這幾乎給了我項目數組，我如何獲取項目[0]並使用ES6檢查.name？

很少與破壞混淆。 有人可以開導嗎？

Answer 1

您可以解構嵌套的對象和數組，添加add空對象/數組作為默認值，以在值不存在時得到undefined ：

 const ResponseData = { items: [{name: 'Matt'}] }; const getItemES6 = ({ items: [{ name } = {}] = [] }) => name; console.log(getItemES6(ResponseData)); 

Answer 2

您可以這樣分解對象：

const { key: yourVar = 'defaultVal' } = obj

數組是相似的，但是不是引用鍵，而是引用元素本身： const [ firstElem, secondElem ] = arr

 const obj = { a: 1, b: { b1: 'a' } }; const objWithArr = { a: 1, b: [{ key: 5, }, { key: 6 }] } const { b: { b1: b1Val = 'default', } = {}, } = obj; const { b: [{ key: firstKey, } = {}, { key: secondKey, } = {} ] = [], } = objWithArr; console.log(b1Val); console.log(firstKey); console.log(secondKey);