Warum funktioniert diese Pfeilfunktion in IE 11 nicht?

81

Der folgende Code funktioniert in IE 11 nicht, er löst einen Syntaxfehler in der Konsole aus 

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"));

Verwendung eines d3.jszweiteiligen Diagramms zur Visualisierung

Dieser Code verursacht das Problem in der obigen Anweisung d=>(d.part=="primary"? -40: 40)

javascript internet-explorer Prakashkadakol
quelle
20
IE11 unterstützt die Pfeilnotation für anonyme Funktionen nicht. Schreiben Sie es um als function (d) { return d.part == "primary" ? -40 : 40; }.
Phylogenesis
1
@Phylogenesis: Nicht alle Pfeilfunktionen sind anonym. Dies ist zum Beispiel nicht:var f = () => "foo";
TJ Crowder
2
Sehen Sie hier, welche Browser diese Syntax unterstützen
Liam
1
^^ ... oder die docs .
Teemu
2
@ David Balažic Dein Code ist falsch. if (a=>0)ist immer wahr. Dies liegt daran, dass Sie eine Funktion erstellt haben, keinen Vergleich, und Funktionen wahr sind. if (a<=0)wäre der richtige Weg, das zu schreiben.
user3654410

Antworten:

115

Sie verwenden Pfeilfunktionen. IE11 unterstützt sie nicht. Verwenden Sie functionstattdessen Funktionen.

Hier ist Babels Übersetzung davon zu 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 Crowder
quelle
3
Vergessen Sie nicht this: var f = (a) => {a.some1(); this.some2();};tovar f = function(a) {a.some1(); this.some2();}.bind(this);
user1742529
21

Vermeiden Sie die Verwendung von Pfeilfunktionen, wenn Sie IE 11 unterstützen müssen, da es nicht unterstützt wird

Ändern Sie diese in reguläre Funktionen und Ihr Code sollte wie erwartet funktionieren

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";
});
Felipe Sabino
quelle
16

Bevor Pfeilfunktionen Pfeilfunktionen waren, waren sie im Allgemeinen reguläre JS function. Mit IE11 müssen wir also nur einen Schritt zurück in die Vergangenheit machen

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él Lajos
quelle
1
Dieser Code ähnelt überhaupt nicht dem Code in der Frage (und "Verwenden Sie keine Pfeilfunktionen" sagt nichts aus, was jede andere Antwort noch nicht gesagt hat)
Quentin
10
Diese Frage ist jedoch das erste Suchergebnis für "Pfeilfunktion funktioniert nicht im Internet Explorer", und ich habe eine einfache und weniger spezifische (allgemeinere) Erklärung gegeben. Aber ich verstehe, dass es gegen die Regeln verstößt, entschuldige.
Szél Lajos
1

IE unterstützt die Pfeilnotation derzeit nicht, aber es gibt eine praktische und schnelle Möglichkeit, Ihre ES6Codes zum ES5.1Arbeiten zu transpilieren IE. Besuchen Sie die Babel- Website, fügen Sie Ihre Codes in das linke Feld ein und kopieren Sie den rechten Feldcode, der in die frühere Version von transpiliert wurdeJavaScript .

Zum Beispiel wird Ihr Code transpiliert in:

"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";
});
AmerllicA
quelle