如何通过函数传入参数生成对象避免键名为变量字面量

问题原因 #

在JavaScript中，直接在对象字面量中写未被方括号包裹的键名会被默认解析为字符串字面量，而非读取同名变量的值，所以你原写法里的food、reaction都会被当作固定字符串，不会对应到传入的参数值。

解决方案 #

1. ES6+ 计算属性语法（推荐）

ES6新增了计算属性名特性，只需把要作为键名的变量用方括号[]包裹即可，修改后的代码如下：

updateReactions = (foods, reaction) => {
  foods.forEach((food) => {
    if (!this.state.reactions[food]) {
      // 用[]包裹变量，将变量值作为键名
      let newReaction = { [food]: { [reaction] : 1 } };
      // 后续可继续处理newReaction的逻辑，比如setState等
    }
  });
};

注意：你原函数第一个参数是要遍历的foods数组，传单个值时需要包在数组中，比如updateReactions(['banana'], 'happy')，如果banana、happy是字符串值，需要加上引号避免变量未定义报错

2. ES5 兼容写法

如果需要兼容不支持ES6的环境，可以先创建空对象，再通过方括号赋值的方式动态设置键名：

updateReactions = function(foods, reaction) {
  var that = this;
  foods.forEach(function(food) {
    if (!that.state.reactions[food]) {
      var newReaction = {};
      newReaction[food] = {};
      newReaction[food][reaction] = 1;
      // 后续处理逻辑
    }
  });
};

两种写法都可以得到你期望的{ banana: { happy : 1 } }结构。

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