如何将 javascript 对象转置为键/值数组

IT技术 javascript arrays javascript-objects
2021-02-03 17:40:48

给定一个 JavaScript 对象,如何将其转换为对象数组(每个对象都有键、值)?

例子:

var data = { firstName: 'John', lastName: 'Doe', email: 'john.doe@gmail.com' }

结果如下:

[
  { key: 'firstName', value: 'John' },
  { key: 'lastName', value: 'Doe' },
  { key: 'email', value: 'john.doe@gmail.com' }
]
6个回答

var data = { firstName: 'John', lastName: 'Doe', email: 'john.doe@gmail.com' }
var output = Object.entries(data).map(([key, value]) => ({key,value}));

console.log(output);

灵感来自这篇文章

使用map功能

var data = { firstName: 'John', lastName: 'Doe', email: 'john.doe@gmail.com' };

var result = Object.keys(data).map(key => ({ key, value: data[key] }));

console.log(result);
    

或更改变量名称以键入地图并使用对象属性速记 key => ({ key, value: data[key] })
2021-03-17 17:40:48
@AlexanderPopov 是的,它的arrow功能
2021-03-29 17:40:48
它是 ECMAScript 6 解决方案吗?
2021-04-05 17:40:48

您可以遍历对象的属性并为每个属性创建一个新对象。

var data = { firstName: 'John', lastName: 'Doe', email: 'john.doe@gmail.com' };
var result = [];

for(var key in data)
{
    if(data.hasOwnProperty(key))
    {
        result.push({
            key: key,
            value: data[key]
        });
    }
}
@EmilOberg——“没有任何关于它的 ES6”——除了 ES6 位(箭头函数,速记属性)。:-/
2021-03-17 17:40:48
@roko-c-buljan,没有任何关于它的 ES6。Object.keys并且Array.map都是旧的 EcmaScript 5.1。(是的,@isvforall 使用的箭头函数是 ES6,但并不是答案中真正有趣的部分,例如,请参阅@rob-brander 的答案)
2021-03-26 17:40:48
弥补hasOwnProperty,但下来没有这样做的一个功能性的方式,像@isvforall
2021-03-27 17:40:48
hasOwnProperty
2021-04-05 17:40:48
@EmilOberg 不以某种ES6方式这样做并不意味着这是一个不可靠(甚至很棒且更具可读性)的答案。反对票似乎很奇怪。
2021-04-08 17:40:48

之前的答案让我认为有更好的方法......

Object.keys(data).map(function(key) {
  return { key, value: data[key] };
});

或者在 ES6 中使用箭头函数:

Object.keys(data).map((key) => ({ key, value: data[key] }));
错误: Unexpected token :
2021-03-21 17:40:48
啊,好收获;我已经修好了。我只是缺少箭头函数返回值周围的括号。
2021-03-21 17:40:48

只是让你的生活更轻松,并在地图上使用 es6 语法

    var output = Object.keys(data).map(key => {
      return {
        key: key,
        value: data[key]
      };
    })