javascript - ES6 对象数组上的展开语法，以及获取对象属性

Question

我有一个对象数组，如下所示:

const data = [
  {
    'name': 'A',
    'v0': true,
    'values': [
      { 'v': true, 'k': 1 },
      { 'v': false, 'k': 2 },
      { 'v': true, 'k': 3 },
      { 'v': false, 'k': 4 }
    ]'
  },
  ...
]

下面的函数从数据对象中提取参数name、v0和values，并用于渲染表格的一行创建具有属性的单元格数组。

v0 是一个 bool 值，根据它的值，渲染函数可能会对单元格应用一些样式。

当值的数量预先确定时，这可以正常工作，因为可以列出它们:v0、v1 ...

但是，我有一个值数组，并且希望在应用唯一键的同时传播它，如下面的 v0 所示:

const renderBodyRow = ({ name, v0, values }) => ({
  cells: [
    name,
    v0 ? { key: '0', content: v0, color: 'green' } : { key: '0', content: v0, color: 'red' },
    ...values //  need to apply the same, but on the values array

  ]
})

一种方法是将值作为 bool 数组:values: [true, false, true, false]

这需要在 renderBodyRow 函数内创建一个唯一的键。这可能吗？

或者将 values 数组定义为具有值和键的对象数组。在这种情况下，扩展语法如何能够访问这些对象的属性？

知道如何使用扩展语法实现其中一个(或两个)这些功能吗？

谢谢

Answer 1

您将需要使用Array.prototype.map为了将每个值转换为具有所需样式的对象。您可以将 values 设为 bool 数组，然后使用每个值的索引作为唯一键。

const data = [{
  name: 'A',
  values: [true, true, false, true, false]
}];

const renderBodyRow = ({ name, values }) => ({
  cells: [
    name,
    ...values.map((val, index) => ({
      key: String(index),
      content: val,
      color: val ? 'green' : 'red'
    }))
  ]
});

console.log(data.map(renderBodyRow));

.as-console-wrapper { max-height: 100% !important; }