javascript - 解构复杂对象

非常感谢您对这个答案的所有帮助！一般来说，我对编码非常陌生，因此您可以轻松掌握各种东西！到目前为止，我已经根据在这里看到的内容获得了更新的代码种类（我不想只复制并粘贴答案，我想了解代码中发生的一切）。从现在开始，我唯一遇到的麻烦是从输出中删除“未定义”的结果。我假设这与“ 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>

最佳答案

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，因此可以依靠template literals使代码更具可读性。
对于每次迭代，您都将插入新的行和单元格，因此您实际上不需要使用+=运算符。

关于javascript - 解构复杂对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59743055/