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，用于通过创建具有属性的单元格数组来呈现表格的行。 / p>

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成为布尔数组，然后使用每个值的索引作为唯一键。

＆＃13;

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

＆＃13;

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

＆＃13;

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

ES6在对象数组上传播语法，并获取对象属性

2 个答案: