JS中Object和Array的相互转换：深入全面讲解

news2024/10/2 8:38:58

在JavaScript编程中，对象和数组是两种常用的数据结构。它们各自具有独特的特点和用途，但在某些情况下，我们可能需要将对象转换为数组，或者将数组转换为对象。本文将深入探讨这两种数据结构的相互转换方法，并提供详细的代码示例。

对象转换为数组

对象转换为数组通常涉及提取对象的属性名和属性值，并将它们组合成数组元素。以下是几种常见的方法：

1. 使用`Object.values()`

Object.values()方法返回一个给定对象自身可枚举属性值的数组，其顺序与for...in循环提供的顺序相同。

const obj = { id: 1, value: '值' };
const arr = Object.values(obj);
console.log(arr); // [1, '值']

2. 使用`Object.entries()`

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。每个键值对都是一个包含两个元素的数组，第一个元素是属性名，第二个元素是属性值。

const obj = { id: 1, value: '值' };
const arr = Object.entries(obj);
console.log(arr); // [['id', 1], ['value', '值']]

3. 使用`Object.keys()`

Object.keys()方法返回一个由给定对象的自身可枚举属性组成的数组。这个方法只获取属性名，而不包括属性值。

const obj = { id: 1, value: '值' };
const arr = Object.keys(obj);
console.log(arr); // ['id', 'value']

4. 使用`for...in`循环

for...in循环用于遍历对象的可枚举属性。在循环中，我们可以使用数组的push()方法将属性和值作为新元素添加到数组中。

const obj = { id: 1, value: '值' };
const arr = [];
for (let key in obj) {
  arr.push(obj[key]);
}
console.log(arr); // [1, '值']

或者，如果我们希望将属性和值都存储在数组中，可以使用以下方式：

const obj = { id: 1, value: '值' };
const arr = [];
for (let key in obj) {
  arr.push([key, obj[key]]);
}
console.log(arr); // [['id', 1], ['value', '值']]

数组转换为对象

数组转换为对象通常涉及将数组元素转换为对象的属性名和属性值。以下是几种常见的方法：

1. 使用`Object.fromEntries()`

Object.fromEntries()方法将键值对列表（或其他可迭代对象，其元素是两个元素的键值对）转换为一个对象。

const arr = [['id', 1], ['value', '值']];
const obj = Object.fromEntries(arr);
console.log(obj); // { id: 1, value: '值' }

2. 使用`reduce()`方法

reduce()方法可以对数组中的每个元素执行一个由提供的函数实现的累积器，将其结果汇总为单个值。我们可以使用这个方法将数组转换为对象。

const arr = [['id', 1], ['value', '值']];
const obj = arr.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
console.log(obj); // { id: 1, value: '值' }

3. 使用`for...of`循环

for...of循环用于遍历可迭代对象（包括数组）。在循环中，我们可以使用对象的属性赋值语法将数组元素转换为对象的属性。

const arr = [['id', 1], ['value', '值']];
const obj = {};
for (let [key, value] of arr) {
  obj[key] = value;
}
console.log(obj); // { id: 1, value: '值' }