为什么此箭头功能在IE 11中不起作用？

81

下面的代码在IE 11中不起作用，它在控制台中引发语法错误

g.selectAll(".mainBars")
    .append("text")
    .attr("x", d => (d.part == "primary" ? -40 : 40))
    .attr("y", d => +6)
    .text(d => d.key)
    .attr("text-anchor", d => (d.part == "primary" ? "end" : "start"));

使用d3.js二部图进行可视化

此代码导致上述声明中的问题 d=>(d.part=="primary"? -40: 40)

javascript internet-explorer

— 普拉卡什卡达科
source

20

IE11不支持匿名功能的箭头符号。将其重写为function (d) { return d.part == "primary" ? -40 : 40; }。

— 系统发育

1

@Phylogenesis：并非所有箭头功能都是匿名的。例如，这不是：var f = () => "foo";

— TJ Crowder

2

见这里哪些浏览器都支持这种语法

— 利亚姆

1

^^ ...或docs。

— Teemu

2

@DavidBalažic您的代码错误。if (a=>0)永远是真的。这是因为您所做的只是创建一个函数，而不是进行比较，并且函数是真实的。if (a<=0)将是正确的书写方式。

— user3654410

115

您正在使用箭头功能。IE11不支持它们。使用function函数代替。

这是Babel将其翻译成ES5的内容：

g.selectAll(".mainBars").append("text").attr("x", function (d) {
  return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
  return +6;
}).text(function (d) {
  return d.key;
}).attr("text-anchor", function (d) {
  return d.part == "primary" ? "end" : "start";
});

— TJ人群
source

3

别忘了this：var f = (a) => {a.some1(); this.some2();};到var f = function(a) {a.some1(); this.some2();}.bind(this);

— user1742529

21

如果需要支持IE 11，请避免使用箭头功能，因为它不受支持

将那些更改为常规函数，您的代码应该可以按预期工作

g.selectAll(".mainBars").append("text").attr("x",function(d) { 
  return d.part=="primary"? -40: 40;
}).attr("y",function(d){
  return +6;
}).text(function(d) { 
  return d.key;
}).attr("text-anchor", function(d) { 
  return d.part=="primary"? "end": "start";
});

— 费利佩·萨比诺
source

16

通常，在箭头功能为箭头功能之前，它们是常规JS function。因此，使用IE11，我们只需要退后一步

var fruits=["apple","banana","orange"];

var modernResult=fruits.find(e => e.includes("nana"));
console.log(modernResult);

var IEresult=fruits.find(function(e){return e.includes("nana")});
console.log(IEresult);

— 塞勒·拉霍斯（SzélLajos）
source

1

这段代码根本不像问题中的代码一样（并且“不要使用箭头功能”什么也没说，其他答案都没有说过）

— Quentin

10

是的，但是这个问题是“箭头功能在IE中不起作用”的第一个搜索结果，我给出了一个简单而又不太具体（更笼统）的解释。但是我知道这违反了规则，很抱歉。

— Szél拉约什

1

IE目前还不支持箭头符号，但是有一种方便快捷的方法可以将您的ES6代码转换ES5.1为在其中工作IE。访问Babel网站，然后将您的代码粘贴到左侧框中，然后将右边的代码复制到已转换为的早期版本中JavaScript。

例如，您的代码被转换为：

"use strict";

g.selectAll(".mainBars").append("text").attr("x", function (d) {
   return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
   return +6;
}).text(function (d) {
   return d.key;
}).attr("text-anchor", function (d) {
   return d.part == "primary" ? "end" : "start";
});

— 美洲A
source