Babel编译代码中的这种语法是什么？

Question

我正在阅读本网站上的ES2015入门书,这个例子是针对计算属性名称给出的:

const namespace = '-webkit-'; 
const style = { 
  [namespace + 'box-sizing'] : 'border-box', 
  [namespace + 'box-shadow'] : '10px10px5px #888888' 
}; 

这很简单,但我不明白Babel正在做什么来解决这个问题.它给出了这个:

var _style;
var namespace = '-webkit-';
var style = (
  _style = {},
  _style[namespace + 'box-sizing'] = 'border-box',
  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',
  _style
);

(我已经重新格式化了缩进)

在线Babel Transpilation在这里

我找不到关于这个语法是什么的文档:_style对象的声明,然后是属性名称及其值, _style的paranthesis中的列表,然后简单地以结束parthenthesis之前的结尾.

Answer 1

在JavaScript中,由于逗号运算符,括号中的表达式从左到右执行,最后一个表达式的结果将作为结果返回.例如,

console.log(
    (console.log(1), console.log(2), 3)
);

将在三行中打印1,2和3.最后一个值3作为表达式的结果返回,并由外部打印console.log.

同样的方式,

var style = (
  _style = {},
  _style[namespace + 'box-sizing'] = 'border-box',
  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',
  _style
);

这里,

  _style = {},

创建一个对象,并将其分配到_style,

  _style[namespace + 'box-sizing'] = 'border-box',

创建一个新属性namespace + 'box-sizing'并为其赋值,

  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',

与上述相同,最后,_style将作为评估结果返回.

最后,您将获得一个具有两个属性的对象,该对象绑定到该变量style.