javascript - 如何使用扩展运算符扩展对象

Question

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

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

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

标签： javascripttypescriptecmascript-6destructuringcode-cleanup

Answer 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;
    }, {})
  }
};