将对象值和属性转换为数组

Question

如何将具有名称和值的对象转换为如下格式的对象数组。

  'result' : { "name1" : "Angle", "name2" : "Demon", "name3" : "Hunter"}

期望的输出:

  "result" : [
                 {'name1' : 'Angle'},
                 {'name2' : 'Demon'},
                 {'name3' : 'Hunter'}
             ]

Answer 1

const result = { "name1" : "Angle", "name2" : "Demon", "name3" : "Hunter"};

const res = Object.keys(result).map(item => {
  const obj = {};
  obj[item] = result[item]
  return obj;
});

console.log(res);

Answer 2

您可以使用Object.entries和Array#map方法如下：

const input = {'result' : { "name1" : "Angle", "name2" : "Demon", "name3" : "Hunter"}}

const output = [input].map(
    ({result}) => 
    ({result: Object.entries(result).map(([k,v]) => ({[k]:v}))})
)[0];

console.log( output );

Answer 3

使用Object.entries：

const input = { "name1": "Angle", "name2": "Demon", "name3": "Hunter" };
const result = Object.entries(input).map(([k, v]) => ({ [k]: v }));
console.log(result);

使用Object.keys：

const input = { "name1": "Angle", "name2": "Demon", "name3": "Hunter" };
const result = Object.keys(input).map(k => ({ [k]: input[k] }));
console.log(result);

`map`.

箭头函数的句法分解

注意我们有：

.map(([k, v]) => ({ [k]: v })

基本上，由 Object.entries 编辑的数组 return 的每个元素本身就是一个具有两个值的数组，第一个是 属性名称（键），第二个是属性值。对于此示例，Object.entries(input) returns:

[
  [ "name1", "Angle" ],
  [ "name2", "Demon" ],
  [ "name3", "Hunter" ]
]

但是我们想把["name1", "Angle"]变成像{ name1: "Angle" }这样的对象。

最直接的表达方式是：

Object.entries(input).map(entry => {
   return { [entry[0]]: entry[1] };
}

上述语法中唯一棘手的部分是根据语法 { [key]: value } 的变量创建动态属性名称。我们想要一个名为 entry[0] 的属性，其值在 entry[1] 中，{ [entry[0]]: entry[1] } 会这样做。

但我们可以利用一些解构和 return 直接从箭头函数中获取对象。

解构。我们可以立即将这个短的 2 元素数组解构为键和值，而不是使用 entry 作为参数。尽管写 [k, v] => 很诱人，但您必须将其括在括号中，例如 ([k, v]) => .

return从箭头函数中获取对象。 return 像 => { name1: "Angle" } 这样的对象字面量也很诱人，但同样，这是模棱两可的（看起来像代码块）所以我们必须用括号将对象字面量括起来：=> ({ name1: "Angle" })

不幸的是，所有这些额外的括号都是必要的。整个事情看起来像：

Object.Entries(input).map(([k, v]) => ({ [k]: v }));

因此，您可能会发现解构语法因为括号而笨拙。相反，您可以使用 Object.keys。 Object.keys(input) returns:

[
  "name1",
  "name2",
  "name3"
]

我们可以像这样属性将每个属性名称映射到所需的对象 .map(k => ({ [k]: input[k] })) 这以不得不再次通过名称指定数组为代价，为我们节省了一些解构语法的尴尬。

如果属性数量很大，这可能是最快的方法，因为它应该使用更少的分配和中间对象。

循环的替代方法

还有一种方法，使用循环，如果属性数量很少，它比上面两种方法都快。

const input = { "name1": "Angle", "name2": "Demon", "name3": "Hunter" };
const result = [];
for (let key in input) result.push({ [key]: input[key] });
console.log(result);

（我发现这实际上对你的小测试数据表现最好。）

但我个人更喜欢函数式结构而不是命令式结构，因为它让编译器有机会做一些比循环更有效的事情。我相信我们应该教导下一代程序员接受描述程序的现代方式，在这方面循环已经过时了。

Answer 4

使用 Object.fromEntries 和 Object.entries

const input = { "name1": "Angle", "name2": "Demon", "name3": "Hunter" };

const result = Object.entries(input).map((ent) => Object.fromEntries([ent]));

console.log(result);

将对象值和属性转换为数组

Converting object values and properties into an array

javascript

arrays

object

ecmascript-6

`map`.

循环的替代方法

将对象值和属性转换为数组

Converting object values and properties into an array

javascript

arrays

object

ecmascript-6

map.

循环的替代方法

`map`.