如何在JavaScript的forEach循环中用ES6扩展运算符添加动态键值对

嘿，这个问题我太熟了！其实用ES6扩展运算符(...)在forEach里给对象加动态键值对很灵活，不过得先明确一个点：扩展运算符本身是用来创建新对象的（复制原对象属性并添加新属性），而不是直接修改原对象。下面分两种常见场景给你讲清楚：

场景1：替换数组里的原对象（生成新对象，不修改原对象） #

如果你的需求是保留原对象不变，生成带新属性的新对象来替换数组中的元素，写法如下：

const arr = [{name:'xyz'},{name:'abc'}];
arr.forEach((item, index) => {
  // 模拟动态的键和值（可以是变量、函数返回值等）
  const dynamicKey = 'age';
  const dynamicValue = 25;
  const anotherDynamicKey = 'country';
  const anotherDynamicValue = 'USA';
  
  // 用扩展运算符复制原对象属性，再添加动态/固定键值对
  arr[index] = {
    ...item, // 把原对象的所有属性都复制过来
    [dynamicKey]: dynamicValue, // 动态键必须放在方括号里！这是ES6的动态属性名语法
    [anotherDynamicKey]: anotherDynamicValue,
    technology: 'JavaScript' // 固定键值对直接写就行
  };
});

场景2：直接修改原对象（和你原代码行为一致） #

如果你就想直接修改数组里的原对象（像你原来的代码那样给原对象加属性），可以配合Object.assign来把扩展后的属性合并到原对象上：

const arr = [{name:'xyz'},{name:'abc'}];
arr.forEach(item => {
  const dynamicKey = 'age';
  const dynamicValue = 25;
  
  // 把新的键值对（包括动态的）合并到原对象
  Object.assign(item, {
    [dynamicKey]: dynamicValue,
    country: 'USA',
    technology: 'JavaScript'
  });
  
  // 如果你非要用扩展运算符（其实这里没必要，但演示一下）：
  // Object.assign(item, { ...item, [dynamicKey]: dynamicValue, country: 'USA', technology: 'JavaScript' });
});

重点提醒：动态属性名的语法 #

不管用不用扩展运算符，ES6里定义动态键值对都要把键放在**方括号[]**里，比如[dynamicKey]: dynamicValue，这样JavaScript才会把dynamicKey变量的值当成属性名，而不是把字符串"dynamicKey"当成属性名。

举个更实用的例子，比如动态键来自用户输入或者函数返回：

// 模拟从函数获取动态键
function getUserPropertyKey() {
  return prompt('要添加的属性名：') || 'hobby';
}

const arr = [{name:'xyz'},{name:'abc'}];
arr.forEach((item, index) => {
  const key = getUserPropertyKey();
  const value = 'coding';
  
  arr[index] = {
    ...item,
    [key]: value
  };
});

这样就能根据用户输入的属性名，给每个对象添加对应的属性啦！

内容的提问来源于stack exchange，提问作者Sheena