为什么 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转译器有关。看起来 codepen 正在使用这个 babel-preset es2015-loose 并且它在其传播运算符实现中有一些分歧：

Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics.

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

这实际上是一个代码笔问题，这些天他们可能不应该使用 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; }

为什么 CodePen 和 Chrome 的展开运算符有不同的结果？

Why does spread operator at CodePen and Chrome have different results?

javascript

google-chrome

ecmascript-6

codepen