CodePenとChromeの普及担当者が異なる結果をもたらすのはなぜですか？

Question

私はCodePenとChromeで拡散演算子をテストしましたが、私は別の結果を得ました。 CodePenで

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

私はバベルのプリプロセッサを使用して["foo"]を得ました。

Chromeデベロッパーツールでは、["f", "o", "o"]を取得しました。

どうしてですか？

Answer 1

コメントに記載されているとおり、これはbabel js transpilerに関連しています。 がcodepenように見えるこのバベル-プリセットes2015-looseを使用して、その広がりオペレータの実装では、いくつかの相違がありますされています

バベルの緩いモードはES6セマンティクスに忠実 少ないES5コードにES6コードをtranspiles。

ソース：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ビン：

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; }