redux-actions教程中从单元素字符串数组创建对象方法的特殊语法解析

嘿，你发现的这个写法其实是ES6引入的两个语法特性的结合，我给你拆解明白：

1. 核心特性：计算属性名（Computed Property Names） #

在ES6之前，对象的属性/方法名只能是固定的字面量字符串，比如{ myMethod() {} }里的myMethod是固定名称。而计算属性名允许我们用方括号[]包裹任意表达式，动态生成属性/方法名——JavaScript会先计算括号里的表达式的值，再把它转为字符串作为最终的键名。

在你的代码里，[stringArray]就是计算属性名：

• 表达式stringArray的值是数组["STRING_ARRAY"]
• JavaScript会自动把这个数组转为字符串（调用数组的toString()方法），结果就是"STRING_ARRAY"
• 所以这个方法的实际键名就是"STRING_ARRAY"

2. 搭配的语法：对象方法简写 #

ES6同时简化了对象内方法的定义：不用再写function关键字和冒号，直接用方法名() {}的形式定义方法。

把这两个特性结合起来，就得到了你看到的[stringArray]() { ... }写法——本质是动态生成方法名的简写方法。

等价的ES5写法 #

为了更直观，你可以看看这段代码转成ES5的样子：

const stringArray = ["STRING_ARRAY"];
const strangeObject = {};
strangeObject[stringArray.toString()] = function() {
  console.log(stringArray);
};

和你写的代码完全等价，调用strangeObject.STRING_ARRAY()或者strangeObject[stringArray]()都会执行这个方法并打印数组。

小验证 #

你可以自己跑一下这段代码确认：

console.log(Object.keys(strangeObject)); // 输出 ["STRING_ARRAY"]
strangeObject.STRING_ARRAY(); // 打印 ["STRING_ARRAY"]

内容的提问来源于stack exchange，提问作者Salah Eddine Taouririt