如何在 JavaScript 中将 Object 转换为 Array [] 键值对

Posted 2023-02-25

技术标签:

【中文标题】如何在 JavaScript 中将 Object 转换为 Array [] 键值对【英文标题】：How to convert an Object to an Array [] of key-value pairs in JavaScript如何在 JavaScript 中将 Object 转换为 Array [] 键值对 【发布时间】：2016-12-13 22:36:28 【问题描述】：

我想像这样转换一个对象：

"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0

到这样的键值对数组中：

[[1,5],[2,7],[3,0],[4,0]...].

如何在 javascript 中将 Object 转换为键值对数组？

【问题讨论】：

【参考方案1】：

最好的办法是：

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0
var result = Object.entries(obj);

console.log(result);

调用entries（如此处所示）将返回[key, value] 对，正如调用者请求的那样。

或者，您可以调用Object.values(obj)，它只会返回值。

【讨论】：

仅供参考：Object.entries 将返回 [key,value]，但键是字符串，值会有所不同。使用Object.fromEntries() 会将[key, value] 对转换回一个对象。【参考方案2】：

这是一种使用 es6 的“新”方式，将 spread 运算符与 Object.entries 结合使用。

const data = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0;

const dataSpread = [...Object.entries(data)];

// data spread value is now:
[
  [ '1', 5 ],  [ '2', 7 ],
  [ '3', 0 ],  [ '4', 0 ],
  [ '5', 0 ],  [ '6', 0 ],
  [ '7', 0 ],  [ '8', 0 ],
  [ '9', 0 ],  [ '10', 0 ],
  [ '11', 0 ], [ '12', 0 ]
]

【讨论】：

【参考方案3】：

var obj =  "1": 5, "2": 7, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0 
let objectKeys = Object.keys(obj);

let answer = objectKeys.map(value => 
    return [value + ':' + obj[value]]
);

【讨论】：

【参考方案4】：

在 Ecmascript 6 中，

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0;

var res = Object.entries(obj);

console.log(res);

var obj = 
  "1": 5,
  "2": 7,
  "3": 0,
  "4": 0,
  "5": 0,
  "6": 0,
  "7": 0,
  "8": 0,
  "9": 0,
  "10": 0,
  "11": 0,
  "12": 0
;
var res = Object.entries(obj);
console.log(res);

【讨论】：

【参考方案5】：

您可以使用Object.keys() 和map() 来执行此操作

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0
var result = Object.keys(obj).map((key) => [Number(key), obj[key]]);

console.log(result);

【讨论】：

@blvkkasvp 您是否使用数字作为密钥？如果不是，当它尝试将您的密钥转换为数字时，它将失败并返回NaN。如果您想使用字符串作为键，请将返回值从 [Number(key), obj[key]] 更改为 [key, obj[key]] 或使用 @Pila 在他们的回答中建议的 Object.entries【参考方案6】：

你可以使用Object.values([])，如果你还没有的话，你可能需要这个polyfill：

const objectToValuesPolyfill = (object) => 
  return Object.keys(object).map(key => object[key]);
;
Object.values = Object.values || objectToValuesPolyfill;

https://***.com/a/54822153/846348

那么你可以这样做：

var object = 1: 'hello', 2: 'world';
var array = Object.values(object);

请记住，js 中的数组只能使用数字键，所以如果您在对象中使用其他东西，那么这些将变为 `0,1,2...x``

删除重复项会很有用，例如，如果您有唯一的键。

var obj = ;
object[uniqueKey] = '...';

【讨论】：

【参考方案7】：

这是我的简单准系统实现：

let obj = 
  "1": 5,
  "2": 7,
  "3": 0,
  "4": 0,
  "5": 0,
  "6": 0,
  "7": 0,
  "8": 0,
  "9": 0,
  "10": 0,
  "11": 0,
  "12": 0
;    

const objectToArray = obj => 
      let sol = [];
      for (key in obj) 
        sol.push([key, obj[key]]);
      
      return sol;
    ;

objectToArray(obj)

【讨论】：

【参考方案8】：

我建议使用Object.entries()这个最简单的解决方案

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0
var result =Object.entries(obj)

console.log(result);

【讨论】：

【参考方案9】：

这是我的解决方案，我也有同样的问题，而且这个解决方案似乎对我有用。

yourObj = [].concat(yourObj);

【讨论】：

【参考方案10】：

我们可以将 Key 的 Number 更改为 String 类型，如下所示：

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0
var result = Object.keys(obj).map(function(key) 
  return [String(key), obj[key]];
);
    
console.log(result);

【讨论】：

【参考方案11】：

如果Object.entries 不适合您，还有另一种解决方案。

const obj = 
      '1': 29,
      '2': 42
    ;
const arr = Array.from(Object.keys(obj), k=>[`$k`, obj[k]]);
console.log(arr);

【讨论】：

这对我有用。我遇到了一个问题，即导入 JSON 添加了索引，导致无法使用 Angulars ngFor 循环。这在保留结构的同时删除了索引。 @RAC +1 使用“索引”而不是“索引”。走吧，古老的（即任意且毫无意义的偏离）英国传统！【参考方案12】：

使用 lodash，除了上面提供的答案之外，您还可以在输出数组中拥有键。

输出数组中没有对象键

为：

const array = _.values(obj);

如果 obj 如下：

 “art”:  id: 1,  title: “aaaa” , “fiction”:  id: 22,  title: “7777”

那么数组将是：

[  id: 1, title: “aaaa” ,  id: 22, title: “7777”  ]

输出数组中的对象键

如果你改写（'genre' 是你选择的字符串）：

const array= _.map(obj, (val, id) => 
    return  ...val, genre: key ;
  );

你会得到：

[ 
   id: 1, title: “aaaa” , genre: “art”, 
   id: 22, title: “7777”, genre: “fiction” 
]

【讨论】：

【参考方案13】：

现在回顾一下 2018 年的一些答案，其中 ES6 是标准。

从对象开始：

let const="1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5;

只是盲目地获取数组上的值，不关心键：

const obj="1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5;
console.log(Object.values(obj));
//[9,8,7,6,5,4,3,2,1,0,5]

简单地获取数组中的对：

const obj="1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5;
console.log(Object.entries(obj));
//[["1",9],["2",8],["3",7],["4",6],["5",5],["6",4],["7",3],["8",2],["9",1],["10",0],["12",5]]

与之前相同，但每对都有数字键：

const obj="1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5;
console.log(Object.entries(obj).map(([k,v])=>[+k,v]));
//[[1,9],[2,8],[3,7],[4,6],[5,5],[6,4],[7,3],[8,2],[9,1],[10,0],[12,5]]

使用对象属性作为新数组的键（可以创建稀疏数组）：

const obj="1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5;
console.log(Object.entries(obj).reduce((ini,[k,v])=>(ini[k]=v,ini),[]));
//[undefined,9,8,7,6,5,4,3,2,1,0,undefined,5]

最后一种方法，它还可以根据键的值重新组织数组顺序。有时这可能是期望的行为（有时不是）。但现在的优势是这些值在正确的数组槽上建立索引，对它进行搜索是必不可少且微不足道的。

映射而不是数组

最后（不是原始问题的一部分，而是为了完整性），如果您需要使用键或值轻松搜索，但您不想要稀疏数组、没有重复和没有重新排序而不需要转换为数字键（甚至可以访问非常复杂的键），那么数组（或对象）不是你需要的。我会推荐Map：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

let r=new Map(Object.entries(obj));
r.get("4"); //6
r.has(8); //true

【讨论】：

第四个要点及以后的问题与问题完全无关，您的其余答案只是在这里总结前三个答案。这个答案不会给讨论带来任何不存在或完全不相关的内容。是的，作为第一行的状态，这是答案的摘要，然后更新它们以使用现代 ES6 技术而不是完整的功能。当您从支持关联数组的语言（例如 php）中移动 JSON 数组时，第四个答案很有用。这里提供的所有方法都已经在前三个答案中的两个中以简单的形式提供，它们不在函数中，所以我不知道你在那里做什么。至于第四个，正如我所说，这与所提出的问题完全无关。它可能与另一个问题有关，但与这个问题无关。无论如何，无论是使用 PHP、JavaScript 还是 Haskell 创建的，JSON 都是 JSON。【参考方案14】：

Object.entries() 返回一个数组，其元素是对应于在object 上直接找到的可枚举属性[key, value] 对的数组。属性的顺序与手动循环对象的属性值的顺序相同。

^{-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Description}

Object.entries 函数返回几乎与您要求的完全相同的输出，除了键是字符串而不是数字。

const obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0;

console.log(Object.entries(obj));

如果您需要键是数字，您可以使用回调函数将结果映射到一个新数组，该回调函数将每对中的键替换为从中强制转换的数字。

const obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0;

const toNumericPairs = input => 
    const entries = Object.entries(input);
    return entries.map(entry => Object.assign(entry,  0: +entry[0] ));


console.log(toNumericPairs(obj));

在上面的示例中，我使用箭头函数和 Object.assign 用于映射回调，这样我就可以通过利用 Object.assign 返回分配给的对象和单个指令箭头函数的事实将其保留在一条指令中返回值是指令的结果。

这相当于：

entry => 
    entry[0] = +entry[0];
    return entry;

正如@TravisClarke 在 cmets 中提到的，map 函数可以缩短为：

entry => [ +entry[0], entry[1] ]

但是，这将为每个键值对创建一个新数组，而不是修改现有的数组，因此创建的键值对数组的数量翻了一番。虽然原始条目数组仍然可以访问，但它及其条目不会被垃圾收集。

现在，即使使用我们的 in-place 方法仍然使用两个数组来保存键值对（输入和输出数组），数组的总数只会改变 1。输入和输出数组实际上并没有填充数组，而是对数组的引用，这些引用在内存中占用的空间可以忽略不计。

就地修改每个键值对会导致内存增长量可以忽略不计，但需要输入更多字符。为每个键值对创建一个新数组会导致所需的内存量增加一倍，但需要输入的字符更少。

您可以更进一步，通过就地修改条目数组而不是将其映射到新数组来完全消除增长：

const obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0;

const toNumericPairs = input => 
  const entries = Object.entries(obj);
  entries.forEach(entry => entry[0] = +entry[0]);
  return entries;


console.log(toNumericPairs(obj));

【讨论】：

我喜欢函数式方法。作为更短的选择：Object.entries(obj).map(e => [+e[0], e[1]]);【参考方案15】：

你可以使用_.castArray(obj)。

示例： _.castArray( 'a': 1 ); // => [ 'a': 1 ]

【讨论】：

【参考方案16】：

使用Object.entries获取Object的每个元素为key & value格式，然后map这样通过它们：

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0

var res = Object.entries(obj).map(([k, v]) => ([Number(k), v]));

console.log(res);

但是，如果您确定密钥将按渐进顺序，您可以使用Object.values 和Array#map 执行以下操作：

var obj = "1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0; 

                        // idx is the index, you can use any logic to increment it (starts from 0)
let result = Object.values(obj).map((e, idx) => ([++idx, e]));

console.log(result);

【讨论】：

【参考方案17】：

如果你使用的是 lodash，它可以像这样简单：

var arr = _.values(obj);

【讨论】：

【参考方案18】：

递归转换对象到数组

function is_object(mixed_var) 
    if (mixed_var instanceof Array) 
        return false;
     else 
        return (mixed_var !== null) && (typeof( mixed_var ) == 'object');
    



function objectToArray(obj) 
    var array = [], tempObject;
    for (var key in obj) 

        tempObject = obj[key];

        if (is_object(obj[key])) 
            tempObject = objectToArray(obj[key]);
        
        array[key] = tempObject;
    
    return array;

【讨论】：

【参考方案19】：

使用for in

var obj =  "10":5, "2":7, "3":0, "4":0, "5":0, "6":0, "7":0,
            "8":0, "9":0, "10":0, "11":0, "12":0 ;

var objectToArray = function(obj) 
    var _arr = [];

    for (var key in obj) 
        _arr.push([key, obj[key]]);
    
    return _arr;


console.log(objectToArray(obj));

【讨论】：

【参考方案20】：

使用 Object.keys 和 Array#map 方法。

var obj = 
  "1": 5,
  "2": 7,
  "3": 0,
  "4": 0,
  "5": 0,
  "6": 0,
  "7": 0,
  "8": 0,
  "9": 0,
  "10": 0,
  "11": 0,
  "12": 0
;
// get all object property names
var res = Object.keys(obj)
  // iterate over them and generate the array
  .map(function(k) 
    // generate the array element 
    return [+k, obj[k]];
  );

console.log(res);

【讨论】：

以上是关于如何在 JavaScript 中将 Object 转换为 Array [] 键值对的主要内容，如果未能解决你的问题，请参考以下文章

如何在Javascript中将字符串转换为对象？ [复制]

在 React 中将 Object 转换为 JSON 并下载为 .json 文件

如何在 java 中将 Object[] 转换为 int[]

JavaScript数据结构之Object

如何在 C# 中将 List<object> 转换为 Hashtable？

如何在播放框架 Java 中将 List<Object> 转换为 JSON