如何使用对象条目创建对象数组？

Question

我想从 this.props.data 创建一个对象数组，试图做到这一点，但我无法使地图放置通常由 object.entries 生成的键值。

我有一个带有代码的屏幕截图，以及一些控制台日志和它们显示的结果，而不是 {_key:"0"}，我希望它是 {numberOfElements:"12"}。谢谢。

这是代码中有问题的部分

import React, { Component } from 'react';
export default class DataTable extends Component{
  render(){
    const data= Object.entries(this.props.data).map((_key,_value)=>({
      _key:String(_value)
    }));
    console.log(data)
    console.log(Object.entried(this.props.data))
    return <div></div>
  }

}

控制台输出：

Answer 1

好的，如果您想要一组对象，每个对象代表原始对象的一个​​键/值对，这将为您解决问题：

original = {
 x : 2,
 y : 3,
}

mapped = Object.entries(original).map(([_key, _value]) => ({[_key]: String(_value)}));

console.log(mapped);

如果您需要一个具有相同键/值的新对象，但具有映射的值（例如通过String()），那么这应该适合您：

original = {
  x: 2,
  y: 3,
};

mapped = Object.entries(original)
         .reduce((obj, [_key, _value]) => 
           Object.assign(obj, { [_key]: String(_value) }),
           {});

console.log(mapped);

如果您需要映射对象但在数组内，那么将其放入数组内：

original = {
  x: 2,
  y: 3,
}

mappedInArray = [
  Object.entries(original).reduce((obj, [_key, _value]) => 
    Object.assign(obj, { [_key]: String(_value) }), {})];

console.log(mappedInArray);

另外，一般来说，请注意您正在这样做：

Object.entries(obj).map((_key, _value) => ...);

这是错误的，因为条目是一个对的列表（长度为二的数组，第一项是键，第二项是值），映射时，它将转到您的_key参数，因此您的_value参数将只是该键值对在条目数组中的索引。即你会得到：

_key = [<first-key>, <first-value>]; _value = 0;
_key = [<second-key>, <second-value>]; _value = 1;
...

你应该这样写：

_key = [<first-key>, <first-value>]; _value = 0;
_key = [<second-key>, <second-value>]; _value = 1;
...