使用ES6功能将对象转换为数组

uri*_*ish 49 javascript arrays ecmascript-6

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

例如,给定:

 var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};
Run Code Online (Sandbox Code Playgroud)

预期的产出是:

 ['foo', [1,2,3], null, 55]
Run Code Online (Sandbox Code Playgroud)

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

Ber*_*rgi 89

使用(ES5)Array::mapkeys箭头功能(简称语法只,而不是功能):

let arr = Object.keys(obj).map((k) => obj[k])
Run Code Online (Sandbox Code Playgroud)

真正的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));
Run Code Online (Sandbox Code Playgroud)

遗憾的是,没有任何对象迭代器使其成为ES6原生代.

  • 此方法比该测试用例上的旧式“ for in”方法慢约85倍(是次,不是百分比)。在较大的数据集上,这种变化会发生重大变化吗? (2认同)

Far*_*uti 39

只需使用Object.values

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


uri*_*ish 9

这可以使用Array Comprehension语法来实现:

[for (key of Object.keys(inputObj)) inputObj[key]]
Run Code Online (Sandbox Code Playgroud)

用法示例:

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 ]
Run Code Online (Sandbox Code Playgroud)


tec*_*rus 9

我喜欢旧学校的方式:

var i=0, arr=[];
for (var ob in inputObj)
  arr[i++]=ob;
Run Code Online (Sandbox Code Playgroud)

即使不是upvotes,老派也会大幅度地赢得jsperf测试.有时新增加的是"错误特征".


Des*_*web 8

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]
Run Code Online (Sandbox Code Playgroud)

  • 伙计,这是方法的基本信息,这不是主题的目的。这个例子非常清楚。@Yunnosch (4认同)

Moh*_*fei 8

2020 年 8 月更新

总而言之,在 ES6 中,有三 (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'] ]

Run Code Online (Sandbox Code Playgroud)

可以按如下方式将数组转换回对象:

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

Object.fromEntries(array);

// { one: 1, two: 2 }

Run Code Online (Sandbox Code Playgroud)


Koo*_*Inc 5

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

编辑 2020:转换为片段并添加替代方案

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}`);
Run Code Online (Sandbox Code Playgroud)

  • 这个 `Object.keys(obj).map(k => obj[k])` 的更紧凑版本 (3认同)