解構復雜對象

Question

非常感謝你們對這個答案的所有幫助！！ 總的來說，我對編碼非常陌生，您可以更輕松地掌握事物！ 到目前為止，我已經根據我在這里看到的內容更新了代碼（我不想只是復制和粘貼答案，我想了解代碼中發生的一切）。 從我現在所擁有的，我唯一遇到的問題是從輸出中刪除“未定義”結果。 我假設這與“for”循環中的“if”語句有關，但我不確定。 任何見解？

 let userList = { "people": [ { firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } } ] }; for (var i = 0; i < userList.people.length; i++) { let table = document.getElementById("info"); let newRow = table.insertRow(1); let cell = newRow.insertCell(0); let dobCell = newRow.insertCell(1); let langs = newRow.insertCell(2); let { firstName } = userList.people[i]; let { lastName } = userList.people[i]; let { dateOfBirth } = userList.people[i]; let { spokenLanguages: { native, fluent, intermediate } } = userList.people[i]; cell.innerHTML += firstName + ' ' + lastName + "<br/>"; dobCell.innerHTML += dateOfBirth + "<br/>"; langs.innerHTML += native + ', ' + fluent + ', ' + intermediate + "<br/><br/>"; }

 th { border: 6 px solid blue; border - collapse: collapse; } table { border - collapse: collapse; } td { border: 6 px solid black; border - collapse: collapse;

 <div id="show"> <table id="info"> <tr> <th><strong>First/Last Name</strong></th> <th><strong>Date of Birth</strong></th> <th><strong>Spoken Languages</strong></th> </tr> </table> </div>

Answer 1

intermediate對列表中的一個人沒有價值。 如果缺少該屬性，則默認設置為undefined 。

您可以將默認值定義為解構賦值的一部分

let {
       spokenLanguages: {
          native = '',
          fluent = '',
          intermediate = ''
       }
    } = userList.people[i];

有很多方法可以重構代碼以使其更簡潔。

 let userList = { "people": [ { firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } } ] }; for (var i = 0; i < userList.people.length; i++) { let table = document.getElementById("info"); let newRow = table.insertRow(1); let cell = newRow.insertCell(0); let dobCell = newRow.insertCell(1); let langs = newRow.insertCell(2); const { firstName = '', lastName = '', dateOfBirth = '', spokenLanguages: { native = '', fluent = '', intermediate = '' } } = userList.people[i]; cell.textContent = `${firstName} ${lastName}`; dobCell.textContent = dateOfBirth; langs.textContent = `${native}, ${fluent}, ${intermediate}`; }

• 由於您已經在使用es6 ，您可以依靠模板文字使您的代碼更具可讀性。
• 對於每次迭代，您都將插入一個新行和單元格，因此您實際上並不需要使用+=運算符。