Split.js中一段ES6箭头函数代码的功能解析求助

这行代码用到了两个ES6核心特性，拆解开就能明白逻辑：

1. 箭头函数的隐式返回 #

箭头函数如果要直接返回一个对象，必须用括号()把对象包裹起来——否则JS会把{}识别成函数体的代码块，而非对象字面量。所以这行代码等价于：

const defaultGutterStyleFn = function(dim, gutSize) {
  return { [dim]: `${gutSize}px` };
};

2. 对象字面量的计算属性名 #

ES6之前，对象的属性名只能写固定的字符串或标识符（比如{ width: '10px' }），而[dim]这种方括号语法是动态计算属性名的特性：方括号里的变量dim会被求值，最终结果直接作为对象的属性名。

举个实际调用的例子：

• 传入dim='width'、gutSize=10，函数返回{ width: '10px' }
• 传入dim='height'、gutSize=5，函数返回{ height: '5px' }

另外，${gutSize}px是ES6的模板字符串，用来把数值和单位拼接成合法的CSS长度值，比传统的gutSize + 'px'写法更简洁直观。

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