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 是一个布尔值，根据它的值，渲染函数可能会对单元格应用一些样式。

当值的数量是预先确定的时，这可以正常工作，因为它们可以列出：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 数组定义为具有值和键的对象数组。在这种情况下，扩展语法如何能够访问这些对象的属性？

知道如何使用扩展语法实现其中一个（或两个）吗？

谢谢

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