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 }
    ]'
  },
  ...
]

下面的函数从数据对象中提取params 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)
    ]
  };
}