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是一个布尔值，根据其值，render函数可以对单元格应用某些样式。

当预定数量的值时，这可以很好地工作，因为可以列出它们：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

  ]
})

一种方法是将值作为布尔数组组成： values: [true, false, true, false]

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

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

关于如何使用扩展语法实现这两个（或两者）的任何想法？

谢谢

Answer 1

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

 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; } 

Answer 2

您似乎在寻找

function renderBodyCell({ k, v }) {
  return {
    key: k,
    content: v,
    color: v ? 'green' : 'red'
  };
}
function renderBodyRow({ name, v0, values }) {
  return {
    cells: [
      name,
      renderBodyCell({ k: '0', v: v0 }),
      ... values.map(renderBodyCell)
    ]
  };
}