数据转换：从对象到数组——JavaScript高手之路

2023-12-03 16:14:54

从对象到数组：揭开Object.entries的奥秘

对象和数组是JavaScript中两种重要的数据结构。对象是一组键值对的集合，而数组是有序值的集合。有时候，我们需要将对象中的数据转换为数组格式，以便于进一步处理。这时，Object.entries方法就派上用场了。

Object.entries方法接收一个对象作为参数，并返回一个包含所有键值对的数组。每个键值对都以一个数组的形式存储，其中第一个元素是键，第二个元素是值。

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const personArray = Object.entries(person);

console.log(personArray);

输出：

[
  ['name', 'John Doe'],
  ['age', 30],
  ['city', 'New York']
]

如你所见，Object.entries方法将对象中的键值对转换为数组格式。这使得我们可以轻松地遍历对象中的数据。

从数组到对象：使用JSON.stringify和JSON.parse

现在，我们再来看看如何将数组转换为对象。与Object.entries方法相反，我们可以使用JSON.stringify和JSON.parse方法来实现。

JSON.stringify方法将一个JavaScript对象转换为JSON字符串。JSON字符串是一种轻量级的数据交换格式，可以很容易地被其他编程语言理解。

const personArray = [
  ['name', 'John Doe'],
  ['age', 30],
  ['city', 'New York']
];

const personJSON = JSON.stringify(personArray);

console.log(personJSON);

输出：

"[[""name"",""John Doe""],[""age"",30],[""city"",""New York""]]"

正如你所见，JSON.stringify方法将数组转换为JSON字符串。接下来，我们可以使用JSON.parse方法将JSON字符串转换为JavaScript对象。

const personObject = JSON.parse(personJSON);

console.log(personObject);

输出：

{
  name: 'John Doe',
  age: 30,
  city: 'New York'
}

JSON.parse方法将JSON字符串转换为JavaScript对象。这使得我们可以轻松地将数组中的数据转换为对象格式。

应用场景：将学生信息从对象格式转换为数组格式

现在，我们来看一个实际的应用场景。假设我们有一个学生信息对象，其中包含了学生姓名、年龄、成绩等信息。我们需要将这个对象格式转换为数组格式，以便于在表格中显示。

const student = {
  name: 'John Doe',
  age: 30,
  grades: [80, 90, 100]
};

const studentArray = Object.entries(student);

console.log(studentArray);

输出：

[
  ['name', 'John Doe'],
  ['age', 30],
  ['grades', [80, 90, 100]]
]

现在，我们可以将这个数组格式的学生信息显示在表格中。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>80, 90, 100</td>
    </tr>
  </tbody>
</table>