【问题标题】:Converting Object to Array using ES6 features使用 ES6 特性将对象转换为数组
【发布时间】:2014-10-02 18:31:48
【问题描述】:

给定一个 javascript 对象,如何将其转换为 ECMAScript-6 中的数组?

例如,给定:

 var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};

预期的输出是:

 ['foo', [1,2,3], null, 55]

结果中元素的顺序对我来说并不重要。

【问题讨论】:

  • 我没有得到你的答案,你在这里看什么?
  • @Mritunjay 一篇博文,也许……
  • 不,这样做很好。这是一个体面的问题,也是一个体面的答案。虽然我希望它可以作为类似问题的答案添加,但它们似乎不是 es6 特定的。
  • 我在这里放了一个jsperf:jsperf.com/objects-to-array/2
  • 使用 Object.values(inputObj)

标签: javascript arrays ecmascript-6


【解决方案1】:

keys 上使用 (ES5) Array::maparrow function(仅用于简短语法,不适用于功能):

let arr = Object.keys(obj).map((k) => obj[k])

真正的 ES6 风格是编写一个生成器,并将该可迭代对象转换为一个数组:

function* values(obj) {
    for (let prop of Object.keys(obj)) // own properties, you might use
                                       // for (let prop in obj)
        yield obj[prop];
}
let arr = Array.from(values(obj));

很遗憾,没有object iterator 成为 ES6 原生对象。

【讨论】:

  • 在这个测试用例上,这种方法比老式的“for in”方法慢了大约 85 倍(是的,不是百分比)。这会在更大的数据集上发生显着变化吗?
  • 你是如何执行 ES6 的?你用了什么测试数据,你试过不同的尺寸吗?是的,map 比循环慢一点。
  • Firefox 已经启用,Chrome 需要 chrome://flags/#enable-javascript-harmony。它运行,但在当前的实现中它像糖蜜一样慢。我猜测对象迭代器被省略的原因是现有的 JIT 编译器已经可以在老式方法中识别这些模式。
  • 它可能不是map 是慢的部分,慢的部分可能是由Object.keys 完成的一次性数组的构建。如果你有一个不使用Object.keys 的生成器函数,那么我希望它的速度会更接近for in
  • @andy:再看一遍,Reflect.enumerate(obj) 正是这样做的。但我不知道它是否会更快,特别是因为它似乎还没有在任何地方实施。顺便说一句,Object.keys 在 V8 中实际上相当快,有时比 for in 快。
【解决方案2】:

只需使用Object.values

Object.values(inputObj); // => ['foo', [1,2,3], null, 55]

【讨论】:

  • 轻松优雅,但它是 esnext 功能,因此您肯定需要寻找浏览器支持
  • @Samiullah 现在每个人都在使用 babel!特别是如果你使用 ES6 并且关心浏览器的兼容性
【解决方案3】:

我喜欢老派的方式:

var i=0, arr=[];
for (var ob in inputObj)
  arr[i++]=ob;

老派赢得jsperf test 的巨大优势,如果不是赞成票的话。有时新添加的内容是“错误功能”。

【讨论】:

  • 什么是obj,为什么ob 是全局的?
  • 是的,但它仍然是一个全局变量。使用for (let ob i inputObj)
  • @technosaurus 我确定for(var ob in inputObj) 中的变量ob 应该是属性键。所以在循环里面应该是arr[i++]=inputObj[ob];。这使它比您现在拥有的代码慢 22%。但它仍然比链接的 jsperf 中的其他速度快得多。
【解决方案4】:

这可以使用Array Comprehension syntax来实现:

[for (key of Object.keys(inputObj)) inputObj[key]]

使用示例:

var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};
var arr = [for (key of Object.keys(inputObj)) inputObj[key]];
console.log(arr);

// prints [ 'foo', [ 1, 2, 3 ], null, 55 ]

【讨论】:

  • @Bergi 它在数组理解语法中不起作用(至少对于 Tracuer)
  • 是的,显然只有迭代器应该在理解中使用。并且没有 Object 迭代器 - 你应该使用 Maps
  • chrome/firefox jsperf.com/objects-to-array/2 上的 jsperf 失败了,不过我不知道如何解决。
  • 数组理解不是 ES7 吗?
  • 它们曾经在 ES6 中,从那以后就被删除了。根据github.com/tc39/ecma262,它们似乎不会成为 ES7 的一部分。
【解决方案5】:

ES7方式:

let obj = { a: "foo", b: "bar", c: 1, d: [1, 2, 3, 4] }

Object.values(obj)

// output --> ['foo', 'bar', 1, [1, 2, 3, 4]

【讨论】:

  • 请用一些解释来扩充这个仅代码的答案。
  • 当然可以,但除了documentation,没有什么可解释的。 The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
  • 老兄这是方法的基本信息,这不是主题的目的。这个例子很清楚。 @Yunnosch
【解决方案6】:

2020 年 8 月更新

总而言之,在 ES6 中,将 Object 转换为 Array 有以下三 (3) 种变体:

const MyObjects = {   key1: 'value 1',   key2: 'value 2', };

// Method 1: Converts the keys to Array
// --------------------------------------

Object.keys(MyObjects);
// ['key1', 'key2']

// Method 2 Converts the Values to Array
// --------------------------------------

Object.values(MyObjects);
// ['value 1', 'value 2']

// Method 3 Converts both Values and Keys
// --------------------------------------

Object.entries(MyObjects);
// [ ['key1', 'value 1'], ['key2', 'value 2'] ]

将 Array 转换回 Object 的方法如下:

const array = [  ['one', 1],   ['two', 2], ];

Object.fromEntries(array);

// { one: 1, two: 2 }

【讨论】:

    【解决方案7】:

    Array.map 等效于@Bergi 的箭头函数(有关Array.map 的更多信息,请参阅MDN)。

    Edit 2020:转换为 sn-p 并添加了替代项

    const obj = {
        a: 'foo',
        b: [1, 2, 3],
        c: null,
        z: 55
      },
      nwArr = Object.keys(obj).map(k => obj[k]),
      // Alternative
      nwArr2 = Object.fromEntries(Object.entries(obj));
      nwArr.a = "bar";
      nwArr2.a = "foobar"
      console.log(`obj.a: ${obj.a}, nwArr.a: ${nwArr.a}, nwArr2.a: ${nwArr2.a}`);

    【讨论】:

    • 这个Object.keys(obj).map(k => obj[k])的更紧凑版本
    【解决方案8】:
    const address = {
            street: "bew1111",
            city: "err111",
            country: "ind11"
        };
        const address2 = {
            street: "bewscxsd",
            city: "errdc",
            country: "indcdsc"
        };
    

    我们这里有两个对象,我将使用 2 种方法将两个对象分配到数组中

    1. Object.entries()

    2. Object.keys()

    第一个从这里开始-----

    var firstar = Object.entries(address);
    

    在这里我将地址分配给firstar,当你运行它时,你会得到这样的输出

    (3) [Array(2), Array(2), Array(2)]
    

    第二个从这里开始

    var secstar = Object.keys(address2);
    

    在这里,我将地址 2 分配给 secstar,当你运行它时,你会得到这样的输出

     (3) ["street", "city", "country"]
    

    【讨论】:

      猜你喜欢
      • 2019-02-15
      • 2019-03-31
      • 2015-02-21
      • 1970-01-01
      • 2018-01-22
      • 1970-01-01
      • 1970-01-01
      • 2019-02-10
      相关资源
      最近更新 更多