在JavaScript中遍历数组时如何正确覆盖对象的指定属性？

问题根源 #

你使用点表示法访问对象属性时，JavaScript 会将.后的标识符视为固定的字符串属性名，而非动态变量，所以代码实际是在给emotions新增一个名为emotion的属性，而非匹配解构出的情绪值对应的属性。

最优实现方案 #

使用方括号计算属性名的方式访问对象属性，方括号内可以传入动态变量，会自动取变量的值作为要访问的属性名。如果要避免gestures里出现emotions未定义的异常属性，也可以加一层存在性校验，提升代码鲁棒性。

完整代码示例 #

const emotions = {
  happy: '',
  neutral: '',
  sad: '',
  angry: '',
  fear: ''
}

gestures.forEach(({emotion, score})=>{
  // 仅当emotion是emotions已定义的属性时才赋值，避免新增多余属性
  if (emotion in emotions) {
    emotions[emotion] = Math.trunc(100 * score)
  }
});
console.log(emotions);

如果你能确保gestures里的emotion取值一定是emotions已有的五个属性之一，可以省略校验逻辑，直接写赋值语句即可。

内容的提问来源于stack exchange，提问作者Paul Nuñez