javascript - 扩展语法对于对象数组不能按预期工作

Question

我有一个 react 组件，我试图将对象传播到构造函数中的状态。

constructor() {
    super()

    const shapesArray = [1, 2, 3]

    let renderStates = shapesArray.map((el, i) => {
        return {['shape'+i]: 'black'}
    })

    this.state = { ...renderStates }
    console.log(this.state)
}

我想通过执行 this.state.shape0 来访问颜色，但是当我控制台记录 this.state 时，我得到以下信息:

而不是对象 {shape0: "black", shape1: "black", shape2: "black"}。

我在这里做错了什么？

Answer 1

那是因为您正在将数组扩展到对象中。数组实际上是用(通常)顺序整数字符串作为键的对象。这些键是数组的索引。

如下图，map接受一个数组并生成另一个数组

const shapesArray = [1, 2, 3];

const renderStates = shapesArray.map((el, i) => {
  return {
    ['shape' + i]: 'black'
  };
});

console.log(renderStates);

当传播到对象中时，源对象中每个自己的可枚举属性的值都会在其各自的键下添加到目标中。由于数组的键是它的索引，因此您最终会得到一个对象，该对象具有数组每个元素的属性。每个属性的名称是其在数组中的索引。

要实现您想要的效果，您可以使用 Array.prototype.reduce使用映射过程中创建的名称从数组构建一个对象。

const shapesArray = [1, 2, 3];

const renderStates = shapesArray
  .map((el, i) => {
    return {
      ['shape' + i]: 'black'
    };
  })
  .reduce((o, element) => {
    Object.keys(element).forEach(key => o[key] = element[key]);
    return o;
  }, {});

console.log(renderStates);

当然，通过将对象传播到reduce内部，可以更优雅地编写它本身。

const shapesArray = [1, 2, 3];

const renderStates = shapesArray
  .map((el, i) => {
    return {
      ['shape' + i]: 'black'
    };
  })
  .reduce((o, element) => ({...o, ...element}), {});

console.log(renderStates);