Warum funktioniert diese Pfeilfunktion im IE 11 nicht?

Lesezeit: 4 Minuten

Warum funktioniert diese Pfeilfunktion im IE 11 nicht
Prakashkadakol

Der folgende Codeabschnitt funktioniert nicht in IE 11, er wirft einen Syntaxfehler in der Konsole

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

Verwenden d3.js Zweiteiliges Diagramm zur Visualisierung

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

  • IE11 unterstützt die Pfeilnotation für anonyme Funktionen nicht. Umschreiben als function (d) { return d.part == "primary" ? -40 : 40; }.

    – Phylogenese

    24. Oktober 2016 um 10:23 Uhr


  • @Phylogenesis: Nicht alle Pfeilfunktionen sind anonym. Dieser ist zum Beispiel nicht: var f = () => "foo";

    – TJ Crowder

    24. Oktober 2016 um 10:26 Uhr

  • Sehen hier für welche Browser diese Syntax unterstützen

    – Liam

    24. Oktober 2016 um 10:26 Uhr

  • ^^ … bzw die Dokumente.

    – Teemu

    24. Oktober 2016 um 10:26 Uhr

  • @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 sind wahr. if (a<=0) wäre die richtige Schreibweise.

    – Benutzer3654410

    4. April 2019 um 20:31 Uhr


Sie verwenden Pfeilfunktionen. IE11 unterstützt sie nicht. Verwenden function funktioniert stattdessen.

Hier ist Babels Übersetzung davon in 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";
});

Da keiner den Code nutzt thismüssen Sie sich keine Gedanken über die Beibehaltung der Pfeilfunktion machen this Verhalten (da traditionelle Funktionen ihre this wie sie genannt werden, aber Pfeilfunktionen vorbei schließen this). Aber wenn der Code verwendet wurde this und Sie wollten, dass es sich wie eine Pfeilfunktion verhält, würden Sie dafür die üblichen Techniken verwenden wollen.

  • nicht vergessen this: var f = (a) => {a.some1(); this.some2();}; zu var f = function(a) {a.some1(); this.some2();}.bind(this);

    – Benutzer1742529

    27. Juni 2018 um 9:50 Uhr

  • Um den Kommentar von @ user1742529 zu verdeutlichen, wird die Pfeilfunktion automatisch gebunden this wo function(){...} nicht. In Systemen wie VueJS führt dies zu Problemen. function(){...}.bind(this) ähnelt eher den Pfeilfunktionen.

    – Nathan Goings

    13. Juli 2021 um 18:15 Uhr

  • @ user1742529 & Nathan – Keiner der Codes in der Frage verwendet this, daher müssen Sie nichts tun, um es zu erhalten. Aber ich habe einen Absatz hinzugefügt.

    – TJ Crowder

    13. Juli 2021 um 18:17 Uhr


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

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

Bevor Pfeilfunktionen Pfeilfunktionen waren, waren sie im Allgemeinen normale JS functionS. Mit IE11 müssen wir also nur einen Schritt 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);

  • Dieser Code ähnelt überhaupt nicht dem Code in der Frage (und “keine Pfeilfunktionen verwenden” sagt nichts aus, was nicht schon jede andere Antwort gesagt hat)

    – QUentin

    17. Mai 2019 um 13:34 Uhr

  • Richtig, aber diese Frage ist das erste Suchergebnis für “Pfeilfunktion funktioniert nicht im IE”, und ich habe eine einfache und weniger spezifische (allgemeinere) Erklärung gegeben. Aber ich verstehe, dass es gegen die Regeln ist, Entschuldigung.

    – Szel Lajos

    17. Mai 2019 um 20:58 Uhr

1646628910 718 Warum funktioniert diese Pfeilfunktion im IE 11 nicht
AmerllicA

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

Ihr Code wird beispielsweise 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";
});

Internet Explorer (IE) unterstützt die ES6-Funktionen überhaupt nicht, aber Sie könnten sie installieren BabelJS. Sie können stattdessen aber auch die VanillaJS-Funktionen schreiben.

Zum Beispiel:

const hasBrownEyes = eye.color === "brown" ? true : false

Oder einfach Vanilla.js:

var hasBrownEyes = false; // default answer, it will be overwritten if it has a brown eye

if (eye.color === "brown") {
    return true;
}

962940cookie-checkWarum funktioniert diese Pfeilfunktion im IE 11 nicht?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy