javascript - 为什么 CodePen 和 Chrome 的展开算子有不同的结果？

Question

我在 CodePen 和 Chrome 中测试了扩展运算符，得到了不同的结果。

var str = 'foo';
var char = [...str];
console.log(char);

在 CodePen，我使用了 Babel 预处理器并获得了["foo"].

在 Chrome 开发者工具中，我得到了["f", "o", "o"].

为什么会这样？

Answer 1

正如评论中提到的，这与 babel js transpiler 有关。看起来 codepen 正在使用这个 babel-preset es2015-loose，它的扩展运算符实现有一些分歧：

Babel 的松散模式将 ES6 代码转换为不太忠实于 ES6 语义的 ES5 代码。

来源：http: //2ality.com/2015/12/babel6-loose-mode.html

这实际上是一个 codepen 问题，这些天他们可能不应该使用loose模式。

Answer 2

在这里可以看到 Codepen 和 JS Bin 编译的代码的区别。

Codepen 编译：

'use strict';

var str = 'foo';
var char = [].concat(str);
alert(char);

JS Bin 编译：

try {
'use strict';

    function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

    var str = 'foo';
    var char = [].concat(_toConsumableArray(str));
    window.runnerWindow.proxyConsole.log(char);
} catch (error) { throw error; }