javascript - ReactJS:更新 props - 将 2 个键:值对的 17 个对象数组转换为具有 3 个键:值对的数组

Question

我对前端编程相当陌生/初级，但我正在帮助另一个人为应用程序构建 Web UI。在大多数情况下，我已经学到了足够的知识，可以对一切的作用有一个基本的了解，尽管我正在尝试添加一个有点困难的功能。

长话短说，我有两个ag-grids(使用reactJS)。主列保存数据并且可以进行过滤，我正在尝试创建第二个列，它不仅保存主列的列名称，而且还动态列出所应用的过滤器。第二个网格就像用户的助手/帮助网格

到目前为止，我的理解帮助我完成了一半的实现(我已经设法使用主网格中的所有列标题填充第二个 ag-grid)。

列标题数据是从 props 中存储和获取的。类似于:

行数据:this.props.report.view.columns

如果你运行console.log(this.props.report.view.columns)(我使用的是chrome开发者工具中的控制台)，你将看到一个包含17个对象的数组，其中包含列信息。结构如下图:

report: Object
|
--view: Object
  |
  --columns: Array(17)
    |
    --0: Object
    |  |
    |  -- field: "testColumn"
    |     headerName: "testColumn"
    |
    --1: Object
    --2: Object
    --3: Object
.
.
.   
    --16: Object

我只想说这看起来像一个由 17 个对象组成的数组，每个对象包含两个键:值对。我想要做的是添加第三个键值对

我有另一个 Prop ，它仅提供应用了过滤器的列的键:值对(即，columnName:blah，filter:blahh，其中列名称存储在不同的键名称下)。

我计划实现的伪代码是这样的:

For EACH element in the 17 Object array (this.props.report.view.columns)
    if headername = columnName (i.e. from column from filter prop)
THEN
    add new key:value pair headerName:filter; to that object element
ELSE 
    add new key:value pair headerName:''; (an empty value) to that object 

我最终将把这个包含 2 个键:值对的 17 个对象数组更改为包含 3 个键值对的 17 个对象数组这样的事情可能吗？如果可以的话我可以得到一些建议吗？我有点担心我使用的整个计划都是错误的。我的高级同事建议我使用回调来使用不同的计划，但我不知道如何在不进行重大代码更改的情况下实现这一点(这就是为什么我坚持自己的直觉)

Answer 1

使用map方法？ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const data = [
  {a: 7, b: 0},
  {a: 4, b: 7},
  {a: 9, b: 6},
  {a: 1, b: 7},
];

const newData = data.map(currObj => ({...currObj, c: 0}));

console.log(newData);