js 对象转数组的方法|极客笔记

js 对象转数组的方法

在JavaScript开发中，我们经常会遇到将对象转换为数组的需求。对象是键值对的集合，而数组是由元素组成的有序集合，它们之间的数据结构有着明显的区别。这篇文章将详细讨论如何将JavaScript对象转换为数组，并介绍几种常用的方法。

方法一：使用Object.keys和map方法

我们可以使用Object.keys方法获取对象的键，然后通过map方法将键值对转换为数组。以下是一个示例代码：

const obj = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const keys = Object.keys(obj);
const arr = keys.map(key => ({ key: key, value: obj[key]}));

console.log(arr);

运行结果为：

[
  { key: 'name', value: 'Alice' },
  { key: 'age', value: 30 },
  { key: 'gender', value: 'female' }
]

方法二：使用Object.entries方法

Object.entries方法返回一个给定对象自己的可枚举属性[key, value]对的数组。这种方法比起Object.keys更加简洁。以下是一个示例代码：

const obj = {
  name: 'Bob',
  age: 25,
  gender: 'male'
};

const arr = Object.entries(obj);

console.log(arr);

运行结果为：

[
  ['name', 'Bob'],
  ['age', 25],
  ['gender', 'male']
]

方法三：使用for…in循环

除了使用内置方法，我们还可以通过手动遍历对象的属性来将对象转换为数组。这种方法比较繁琐，但是可以灵活控制转换过程。以下是一个示例代码：

const obj = {
  fruit: 'apple',
  color: 'red',
  price: 2.5
};

const arr = [];
for (let key in obj) {
  arr.push({ key: key, value: obj[key]});
}

console.log(arr);

运行结果为：

[
  { key: 'fruit', value: 'apple' },
  { key: 'color', value: 'red' },
  { key: 'price', value: 2.5 }
]

方法四：使用Array.from方法

Array.from方法可以根据一个类数组或可迭代对象创建一个新的数组。我们可以将对象的键值对转换为一个类数组，然后使用Array.from方法将其转换为数组。以下是一个示例代码：

const obj = {
  country: 'USA',
  language: 'English',
  population: 328.2
};

const entries = Object.entries(obj);
const arr = Array.from(entries, ([key, value]) => ({ key, value }));

console.log(arr);

运行结果为：

[
  { key: 'country', value: 'USA' },
  { key: 'language', value: 'English' },
  { key: 'population', value: 328.2 }
]

小结

本文介绍了四种常用的方法来将JavaScript对象转换为数组：使用Object.keys和map方法、使用Object.entries方法、使用for...in循环以及使用Array.from方法。每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法来实现对象到数组的转换。