下面的 React 代码有什么区别？哪一种最有效或最有效？或者它们实际上是一样的？

Question

我目前正在进行一个项目，想出了两组不同的代码，想知道两者之间是否存在差异。

ReactJS（最新版本）

1.

columns.map(v => v.aggregate = (values) => values[0]);

2.

columns = columns.map( v => ({ 
            ...v,
            aggregate : (values) => values[0]
        }))

预期结果：

const columns = [
    {
        Header: 'ID',
        accessor: 'empid',
        shown: true,
        width: 130
    }, {
        Header: 'Name',
        accessor: 'name',
        shown: true,
        aggregate: (values) => values[0],
        width: 130
    }, {
        Header: 'Age',
        accessor: 'age',
        shown: true,
        aggregate: (values) => values[0],
    }, {
        Header: 'Email',
        accessor: 'email',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    },  {
        Header: 'Birthday',
        accessor: 'birthday',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    }
];

我将把它添加到 ReactTable 组件中，并通过 id 聚合透视。

Answer 1

在第一个示例中，您直接对每个对象进行变异。在第二个示例中，您首先使用扩展运算符，因此您首先对每个对象进行浅层复制，而不是直接对其进行变异。