Ecmascript 6 理解Babel传输的ES6到ES5代码

Ecmascript 6 理解Babel传输的ES6到ES5代码,ecmascript-6,babeljs,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);

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)]一无所知。非常感谢您的帮助。

简单的回答是

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]
。逗号运算符一次处理一个表达式列表,然后最后计算最后一个表达式的结果。

我敢打赌,如果您在JavaScript控制台中玩一玩,您一定会找到答案。我确实在控制台中进行了一些实验,通过计算(1,2,10,9)之类的值并发现返回的值始终是最后一个表达式的值。我这样做是为了知道(a,b)在列表[(b,a)]中的评估结果。但我对逗号运算符是什么以及它是如何工作的一无所知。由于不知道它在语言中的名称,我无法验证我的发现。还有@loganfsmyth解释的分号插入部分,我可能永远不会想到。