Question

最近我用Babel学习了ES2015（ES6），我发现Symbol.isConcatSpreadable对我不起作用。从ES6开始，Array#concat将确定其任何参数是否可展开的方式将使用Symbol.isConcatSpreadable。这是我的测试代码：

let arr1 = [3, 4];
console.log(arr1[Symbol.isConcatSpreadable]);
console.log([1, 2].concat(arr1, 5));

let arr2 = [3, 4];
arr2[Symbol.isConcatSpreadable] = false;
console.log([1, 2].concat(arr2, 5));

从ES2015（ES6）开始，输出应为：

[1, 2, 3, 4, 5]
[1, 2, [3, 4], 5]

但我发现Babel的结果是：

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]

似乎Babel无法正确转换我的package.json文件：

{
  ...,
  "devDependencies": {
    "babel-cli": "^6.6.5",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-preset-node": "^5.1.1"
  },
  "dependencies": {
    "babel-plugin-transform-es2015-instanceof": "^6.5.0",
    "babel-runtime": "^6.6.1"
  },
  ...
}

我的.babelrc文件：

{
  "presets":[
    "node"
  ],
  "plugins":[
    "transform-runtime",
    "transform-es2015-instanceof"
  ]
}

我的代码有问题或我错过了某个babel插件吗？

Answer 1

Babel没有像arr1[Symbol.isConcatSpreadable]那样转换它，它只返回相同的代码arr1[Symbol.isConcatSpreadable]，因此这些代码依赖于Symbol polyfill。

来自Babel JS site about Symbol：

通过polyfill提供有限的支持有限的支持需要Babel polyfill。由于语言限制，某些功能无法进行转换或填充。有关详细信息，请参阅core.js的警告部分。

此外还有GitHub page of Symbol polyfill：

@@ isConcatSpreadable的ES6逻辑和@@物种（在大多数地方）可以毫无问题地进行多层填充，但是在某些引擎中会导致流行情况严重减慢。当它将在现代发动机中实施时，它将被填充。

简而言之，您现在无法使用 babel 为 isConcatSpreadable 提供跨浏览器支持（最新于2016年3月19日），但如果您的目标是最新的浏览器，如Chrome和Edge，不需要Symbol polyfill，代码将按原样运行，如下面的代码段（如果你在chrome中运行）。

＆＃13;

let arr1 = [3, 4];
log([1, 2].concat(arr1, 5));

let arr2 = [3, 4];
arr2[Symbol.isConcatSpreadable] = false;
log([1, 2].concat(arr2, 5));

function log (data) {
  document.writeln(JSON.stringify(data) + "<br/>");
}

＆＃13;

<强>更新：

如果您可以覆盖Array.prototype.concat的默认功能以支持Symbol.isConcatSpreadable，则可以执行其他操作，那么您的代码就可以正常运行。

我在babel中使用Symbol.isConcatSpreadable有什么问题吗？

1 个答案: