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

Posted 2023-02-14

【中文标题】如何将 javascript 对象转置为键/值数组

【英文标题】：How to transpose a javascript object into a key/value array

【发布时间】：2016-07-24 12:29:54

【问题描述】：

给定一个 javascript 对象，我如何将它转换为一个对象数组（每个对象都有键、值）？

例子：

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

结果如下：

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

【参考方案1】：

var data =  firstName: 'John', lastName: 'Doe', email: '[e-mail]' 
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: '[e-mail]' ;

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: '[e-mail]' ;
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);

【讨论】：

这是相反的方式