了解Babel编译的ES6到ES5代码

时间:2015-12-28 04:12:34

标签: ecmascript-6 babeljs

Babel转换以下ES6代码

test(){
    var list = [ 1, 2, 3 ]
    var [ a, , b ] = list
    [ b, a ] = [ a, b ]
  }

进入这个

function test() {
      var list = [1, 2, 3];

      var _list = list[(b, a)] = [a, b];

      var _list2 = _slicedToArray(_list, 3);

      var a = _list2[0];
      var b = _list2[2];
    }

我无法理解这行代码究竟发生了什么

var _list = list[(b, a)] = [a, b];

具体来说,我对列表[(b,a)]一无所知。非常感谢任何帮助?

1 个答案:

答案 0 :(得分:3)

简短的回答是

var [ a, , b ] = list
[ b, a ] = [ a, b ]

相同
var [ a, , b ] = list[ b, a ] = [ a, b ]

因为自动分号插入不适用于这种情况。同样的情况适用于此ES5示例:

var list = [1, 2, 3]
var value = list
[1]
console.log(value);

如果您运行此代码,它将记录2,而不是[1, 2, 3],因为索引应用于上一行,而不是作为下一行的数组处理。

自动分号插入通常适用于解析器遇到语法错误,返回步骤并在插入分号后尝试的情况。

在这两种情况下,以下行的内容完全有效,作为上一行的一部分,因此它被视为没有自动分号。

在您的示例中,list[a, b]被解析为使用逗号操作符操作的结果访问索引,该操作基本上将计算为list[b]。逗号运算符一次处理一个表达式列表,然后最终计算到最后一个表达式的结果。