为什么 CodePen 和 Chrome 的展开算子会产生不同的结果？答案

【问题标题】：Why does spread operator at CodePen and Chrome have different results?为什么 CodePen 和 Chrome 的展开算子会产生不同的结果？
【发布时间】：2017-08-05 02:02:29
【问题描述】：

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

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

在 CodePen 我使用了 Babel 预处理器并得到了["foo"]。

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

为什么会这样？

【问题讨论】：

工作正常：codepen.io/anon/pen/brdqGw?editors=1111
@SureshAtta 我使用了 Babel 预处理器

标签： javascript google-chrome ecmascript-6 codepen

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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; }

【讨论】：