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

 更新时间:2025年05月16日 08:39:13   作者:一杯甜梦去冰全糖  
在 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对象转为数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法

    本篇文章主要介绍了详解JavaScript数组过滤相同元素的5种方法,详细的介绍了5种实用方法,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • Webpack ECMAScript 模块详解

    Webpack ECMAScript 模块详解

    ECMAScript 模块(ESM)是在 Web 中使用模块的规范, 所有现代浏览器均支持此功能,同时也是在 Web 中编写模块化代码的推荐方式,这篇文章主要介绍了Webpack ECMAScript 模块,需要的朋友可以参考下
    2023-12-12
  • 慎用 somefunction.prototype 分析

    慎用 somefunction.prototype 分析

    在写 JavaScript 脚本的时候,为了创建一个类,如果不使用框架,一般情况我们都会使用 prototype 来给要创建的类增加公有方法
    2009-06-06
  • JS判断字符串包含的方法

    JS判断字符串包含的方法

    这篇文章主要介绍了JS判断字符串包含的方法,可有效的检测字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • d3.js入门教程之数据绑定详解

    d3.js入门教程之数据绑定详解

    这篇文章主要介绍了关于d3.js数据绑定的相关资料,文中通过示例代码介绍的非常详细,对大家学习只d3.js具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-04-04
  • JS根据奖品权重计算中奖概率

    JS根据奖品权重计算中奖概率

    这篇文章主要介绍了JS计算中奖概率实现抽奖的方法,对算法感兴趣的同学,可以参考下
    2021-05-05
  • javascript 动态修改样式和层叠样式表代码

    javascript 动态修改样式和层叠样式表代码

    javascript 动态修改样式和层叠样式表代码,需要的朋友可以参考下。
    2010-04-04
  • ionic中列表项增加和删除的实现方法

    ionic中列表项增加和删除的实现方法

    在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧
    2017-01-01
  • js 实现无缝滚动 兼容IE和FF

    js 实现无缝滚动 兼容IE和FF

    js 实现无缝滚动 兼容IE FF,大家可以看看。
    2009-07-07
  • 浅谈JS继承_借用构造函数 & 组合式继承

    浅谈JS继承_借用构造函数 & 组合式继承

    下面小编就为大家带来一篇浅谈JS继承_借用构造函数 & 组合式继承。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论