如何使用扩展运算符扩展对象答案

【问题标题】：How to use the spread operator to expand objects如何使用扩展运算符扩展对象
【发布时间】：2021-03-18 12:17:30
【问题描述】：

我有以下具有初始值的对象：

const initialValues = {
  title: '',
  quadrants: {
    0: { name: '' },
    1: { name: '' },
    2: { name: '' },
    3: { name: '' }
  },
  rings: {
    0: { name: '' },
    1: { name: '' },
    2: { name: '' },
    3: { name: '' }
  },
};

我想扩展它，以便在环中也给出颜色属性。我目前已经以这种方式解决了它并且它有效。但是我有一种感觉是错误的，可以更干净地解决：

  const styledConfig = {
    colors: {
      background: '#fff',
      grid: '#bbb',
      inactive: '#ddd'
    },
    rings: {
      ...config.rings,
      0: { name: config.rings[0].name, color: '#93c47d' },
      1: { name: config.rings[1].name, color: '#b7e1cd' },
      2: { name: config.rings[2].name, color: '#fce8b2' },
      3: { name: config.rings[3].name, color: '#f4c7c3' }
    }
  };

结果看起来像这样 - 这是正确的:)

rings: {
  0: { name: 'Ring1', color: '#93c47d' },
  1: { name: 'Ring2', color: '#b7e1cd' },
  2: { name: 'Ring3', color: '#fce8b2' },
  3: { name: 'Ring4', color: '#f4c7c3' }
},

有人知道如何做这个清洁工吗？

【问题讨论】：

您不是在“扩展”任何东西，而是在覆盖config.rings 中的属性。 initialValues 对象中的任何属性都将被您的styledConfig 对象完全覆盖。
您的扩展语法在这里没有任何作用，因为正如 Aplet123 所提到的，键 0、1、2、3 会立即被覆盖。不过，您可以使用循环来更简洁地设置键。
我注意到了。但是扩展运算符必须有一种更简单的方法。它只是扩展了环对象，但是键很奇怪..
为了避免完全覆盖您正在添加颜色的config.rings 属性，您可以传播属性并添加颜色属性。 rings: { ...config.rings, 0: { ...config.rings[0], color: '#93c47d' },
@pilchard 但是我不需要...config.rings，对吧？

标签： javascript typescript ecmascript-6 destructuring code-cleanup

【解决方案1】：

你可以制作一个颜色值的数组并使用reduce方法达到同样的效果，像这样：

const styledConfig = {
  colors: {
    background: '#fff',
    grid: '#bbb',
    inactive: '#ddd'
  },
  rings: {
    ...config.rings,
    ...['#93c47d', '#b7e1cd', '#fce8b2', '#f4c7c3'].reduce((a, color, i) => {
      a[i] = {name: config.rings[i].name, color};
      return a;
    }, {})
  }
};

【讨论】：

这比我现在的版本还要复杂。我的目标是让它更容易:)
不太明白你所说的更容易的意思，我看到你写了 cleaner 所以这是比较干净的，如果你有更多的键来替换就会变得很明显，比如说0...100
我没有更多要替换的键，您的方法比我最初的解决方案更复杂。见上面的 cmets。