如何将JavaScript对象转换为键/值数组

Question

如何将 JavaScript 对象转换为对象数组（每个对象都有键和值）？

例如：

var data = { firstName: 'John', lastName: 'Doe', email: '[e-mail]' }

处理后的结果如下：

[
  { key: 'firstName', value: 'John' },
  { key: 'lastName', value: 'Doe' },
  { key: 'email', value: '[e-mail]' }
]

- Rob Brander

Answer 1

var data = { firstName: 'John', lastName: 'Doe', email: '[e-mail]' }
var output = Object.entries(data).map(([key, value]) => ({key,value}));

console.log(output);

受这个帖子的启发

- atiq1589

---

很棒的答案。值得注意的是，也可以进行反向操作，即将键值对转换为对象：Object.fromEntries(data.map(({key,value})=>([key, value]))); - Vijay Jagdale

Answer 2

使用map函数

var data = { firstName: 'John', lastName: 'Doe', email: '[e-mail]' };

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

console.log(result);
    

- isvforall

---

这是一个ECMAScript 6的解决方案吗？ - Alexander Popov

@AlexanderPopov 是的，这是箭头函数。 - isvforall

将变量名称更改为 Map 中的键名，并使用对象属性简写key => ({ key, value: data[key] })。 - Rob Wilkinson

Answer 3

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

var data = { firstName: 'John', lastName: 'Doe', email: '[e-mail]' };
var result = [];

for(var key in data)
{
    if(data.hasOwnProperty(key))
    {
        result.push({
            key: key,
            value: data[key]
        });
    }
}

- Alexander Popov

---

准备使用 hasOwnProperty。 - Roko C. Buljan

支持使用hasOwnProperty，但不支持以非函数式的方式进行操作，例如@isvforall。 - Emil Oberg

@EmilOberg 没有用 ES6 的方式并不意味着这个答案不可靠（甚至很好且更易读）。一个踩反人类啊。 - Roko C. Buljan

@roko-c-buljan，这与ES6无关。Object.keys和Array.map都是良好的旧版EcmaScript 5.1。（是的，@isvforall使用的箭头函数是ES6，但并不是答案中真正有趣的部分，例如请参见@rob-brander的答案） - Emil Oberg

@EmilOberg——“除了ES6位元（箭头函数、简写属性）之外，它与ES6无关。” :-/ - RobG

Answer 4

之前的答案让我想到了有一种更好的方式...

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

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

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

- Rob Brander

---

错误：意外的标记： - joseantgv

啊，好发现；我已经修复了。我只是忘记在箭头函数的返回值周围加上括号。 - Rob Brander

Answer 5

只需使用带有map的es6语法，即可使您的生活更轻松

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

- Rob Wilkinson

Answer 6

var result = [];
for(var k in data) result.push({key:k,value:data[k]});

- Gene R

Answer 7

或者你可以放开手脚，让 key 和 value 可以自定义：

module.exports = function objectToKeyValueArray(obj, keyName = 'key', valueName = 'value') {
    return Object
        .keys(obj)
        .filter(key => Object.hasOwnProperty.call(obj, key))
        .map(key => {
            const keyValue = {};
            keyValue[keyName] = key;
            keyValue[valueName] = obj[key];

            return keyValue;
        });
};

- mandarin

Answer 8

一种替代的方法，适用于多层对象且不使用递归。

var output = []

    var o = {
      x:0,
      y:1,
      z:{
        x0:{
          x1:4,
          y1:5,
          z1:6
        },
        y0:2,
        z0:[0,1,2],
      }
    }

    var  defer = [ [ o ,[ '_root_' ] ] ]
    var _defer = []


    while(defer.length){

    var current = defer.pop()

    var root    = current[1]
        current = current[0]


      for(var key in current ){

        var path = root.slice()
            path.push(key)

        switch( current[key].toString() ){
        case '[object Object]':
          _defer.push( [ current[key] , path ] )
        break;;
        default:
         output.push({
          path  : path ,
          value : current[key]
         })
        break;;
        }
      }

      if(!defer.length)
          defer = _defer.splice(0,_defer.length)
    }

[
{ path: [ '_root_', 'x' ], value: 0 },
{ path: [ '_root_', 'y' ], value: 1 },
{ path: [ '_root_', 'z', 'y0' ], value: 2 },
{ path: [ '_root_', 'z', 'z0' ], value: [ 0, 1, 2 ] },
{ path: [ '_root_', 'z', 'x0', 'x1' ], value: 4 },
{ path: [ '_root_', 'z', 'x0', 'y1' ], value: 5 },
{ path: [ '_root_', 'z', 'x0', 'z1' ], value: 6 }
]

- Tegra Detra

Answer 9

const array = [
    { key: "key1", value: "value1" },
    { key: "key2", value: "value2" },
];

const obj = Object.fromEntries(array.map(item => [item.key, item.value]));

console.log(obj);

- Sudhanshu Sharma

---

这是反向的方式。 - AndyDaSilva52

这刚刚救了我。 - Stephan Du Toit

Answer 10

const array = [
    { key: "key1", value: "value1" },
    { key: "key2", value: "value2" },
];

const obj = Object.fromEntries(array.map(item => [item.key, item.value]));

console.log(obj);

- Sudhanshu Sharma

---

虽然这段代码可能解决了OP的问题，但最好还是说明一下你的代码如何解决OP的问题。这样，未来的访问者就可以从您的帖子中学习，并将其应用到自己的代码中。SO并不是一个编程服务，而是一个知识资源。此外，高质量、完整的答案更有可能被点赞。这些特点以及所有帖子必须是自包含的要求，都是SO作为平台的优势之一，使其与论坛区分开来。您可以编辑以添加其他信息和/或补充您的解释和源文档。 - ysf