首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript对象转为数组

JavaScript将对象转换为数组的多种方式

2025-05-16 08:39:14 作者：一杯甜梦去冰全糖

在 JavaScript 中,将对象转换为数组有多种方式,具体取决于对象的类型和需要提取的内容,以下是常见的几种场景及实现方法,需要的朋友可以参考下

JavaScript对象转数组

1. 将对象的键（Keys）转换为数组

使用 Object.keys() 提取对象的所有可枚举属性名：

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); 
console.log(keys); // ["a", "b", "c"]

2. 将对象的值（Values）转换为数组

使用 Object.values() 提取对象的所有可枚举属性值：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); 
console.log(values); // [1, 2, 3]

3. 将对象的键值对（Entries）转换为数组

使用 Object.entries() 提取键值对，返回 [key, value] 格式的二维数组：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); 
console.log(entries); 
// [ ["a", 1], ["b", 2], ["c", 3] ]

4. 将类数组对象（Array-like Object）转为数组

使用 Array.from() 或 扩展运算符（...） 转换类数组对象（如 arguments、DOM 元素集合）：

// 示例 1: arguments 对象
function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray); // [1, 2, 3]
}
example(1, 2, 3);

// 示例 2: NodeList（DOM 元素列表）
const divs = document.querySelectorAll("div");
const divArray = [...divs]; // 扩展运算符

5. 自定义转换（复杂对象处理）

使用 Array.map() 或 reduce() 对对象属性进行灵活处理：

const obj = { a: 1, b: 2, c: 3 };

// 转换为 [{ key: 'a', value: 1 }, ...]
const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));
console.log(arr); 
// [
//   { key: "a", value: 1 },
//   { key: "b", value: 2 },
//   { key: "c", value: 3 }
// ]

6. 处理嵌套对象（递归转换）

若对象包含嵌套结构，需递归处理：

function deepConvert(obj) {
  return Object.entries(obj).map(([key, value]) => {
    if (typeof value === "object" && value !== null) {
      return [key, deepConvert(value)]; // 递归处理嵌套对象
    }
    return [key, value];
  });
}

const nestedObj = { a: 1, b: { c: 2, d: { e: 3 } } };
console.log(deepConvert(nestedObj)); 
// [ ["a", 1], ["b", [ ["c", 2], ["d", [ ["e", 3] ] ] ] ]

总结

场景	方法	示例
提取键	`Object.keys()`	`["a", "b", "c"]`
提取值	`Object.values()`	`[1, 2, 3]`
提取键值对	`Object.entries()`	`[ ["a",1], ["b",2] ]`
类数组对象转数组	`Array.from()` 或 `[...]`	`[div1, div2]`
自定义格式转换	`map` + `Object.entries()`	`[{ key: "a", value: 1 }, ...]`
嵌套对象转多维数组	递归处理	`[ ["a",1], ["b", [ ["c",2] ] ]`

注意事项

Symbol 属性：Object.keys()/values()/entries() 不包含 Symbol 类型的键，需使用 Object.getOwnPropertySymbols()。
不可枚举属性：上述方法仅提取可枚举属性，若需包含所有属性，需用 Reflect.ownKeys()。
旧浏览器兼容性：Object.values() 和 Object.entries() 需 ES2017+ 支持，旧环境需 Polyfill。

到此这篇关于JavaScript将对象转换为数组的多种方式的文章就介绍到这了,更多相关JavaScript对象转为数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！