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

【问题标题】：How to transpose a javascript object into a key/value array如何将 javascript 对象转置为键/值数组
【发布时间】：2016-07-24 12:29:54
【问题描述】：

给定一个 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' }
]

【问题讨论】：

标签： javascript arrays javascript-objects

【解决方案1】：

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

console.log(output);

灵感来自post

【讨论】：

很好的答案。值得注意的是，REVERSE也可以做，即对象的键值： Object.fromEntries(data.map(({key,value})=>([key, value])));

【解决方案2】：

使用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);

【讨论】：

它是 ECMAScript 6 解决方案吗？
@AlexanderPopov 是的，它是 arrow 函数
或更改变量名以键入地图并使用对象属性简写key => ({ key, value: data[key] })

【解决方案3】：

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

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]
        });
    }
}

【讨论】：

hasOwnProperty
支持hasOwnProperty，但因为没有像@isvforall这样的功能性方式这样做而下降
@EmilOberg 没有以ES6 的方式这样做并不意味着这是一个不可靠（甚至更好且更具可读性）的答案。投反对票似乎很奇怪。
@roko-c-buljan，这与 ES6 无关。 Object.keys 和 Array.map 都是不错的旧 EcmaScript 5.1。（是的，@isvforall 使用的箭头函数是 ES6，但并不是答案中真正有趣的部分，例如查看@rob-brander 的答案）
@EmilOberg—"没有 ES6 的内容" — 除了 ES6 位（箭头函数，速记属性）。 :-/

【解决方案4】：

前面的回答让我觉得还有更好的办法……

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

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

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

【讨论】：

错误：Unexpected token :
啊，好抓；我已经修好了。我只是缺少箭头函数返回值周围的括号。

【解决方案5】：

让您的生活更轻松，并使用带有地图的 es6 语法

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案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;
        });
};

【讨论】：

【解决方案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 }
]

【讨论】：

【解决方案9】：

我会说使用 npm package flat。非常适合嵌套对象和数组。

var flatten = require('flat')

flatten({
    key1: {
        keyA: 'valueI'
    },
    key2: {
        keyB: 'valueII'
    },
    key3: { a: { b: { c: 2 } } }
})

// {
//   'key1.keyA': 'valueI',
//   'key2.keyB': 'valueII',
//   'key3.a.b.c': 2
// }

【讨论】：

【解决方案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);

【讨论】：

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

【解决方案11】：

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

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

console.log(obj);

【讨论】：

这是相反的方式