Dlaczego ta funkcja strzałki nie działa w IE 11?

84

Poniższy fragment kodu nie działa w IE 11, generuje błąd składni w konsoli 

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

Korzystanie z d3.jswykresu dwudzielnego do wizualizacji

Ten kod powoduje problem w powyższym oświadczeniu d=>(d.part=="primary"? -40: 40)

javascript internet-explorer prakashkadakol
źródło
20
IE11 nie obsługuje notacji strzałek dla funkcji anonimowych. Przepisz to jako function (d) { return d.part == "primary" ? -40 : 40; }.
Filogeneza
1
@Phylogenesis: Nie wszystkie funkcje strzałek są anonimowe. To nie jest na przykład:var f = () => "foo";
TJ Crowder
2
Zobacz tutaj, które przeglądarki obsługują tę składnię
Liam
1
^^ ... lub dokumenty .
Teemu
2
@David Balažic Twój kod jest nieprawidłowy. if (a=>0)jest zawsze prawdą. Dzieje się tak, ponieważ stworzyłeś funkcję, a nie porównanie, a funkcje są prawdziwe. if (a<=0)byłby właściwy sposób, aby to napisać.
user3654410

Odpowiedzi:

118

Używasz funkcji strzałkowych. IE11 ich nie obsługuje. functionZamiast tego użyj funkcji.

Oto tłumaczenie Babel tego na 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
źródło
3
nie zapomnij o this: var f = (a) => {a.some1(); this.some2();};tovar f = function(a) {a.some1(); this.some2();}.bind(this);
user1742529
21

Unikaj używania funkcji strzałek, jeśli potrzebujesz obsługi przeglądarki IE 11, ponieważ nie jest ona obsługiwana

Zmień je na zwykłe funkcje, a kod powinien działać zgodnie z oczekiwaniami

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
źródło
17

Ogólnie rzecz biorąc, zanim funkcje strzałkowe były funkcjami strzałkowymi, były zwykłymi JS function. W przypadku IE11 musimy po prostu cofnąć się w czasie

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
źródło
1
Ten kod w ogóle nie przypomina kodu w pytaniu (a „nie używaj funkcji strzałkowych” nie mówi nic, czego nie podała żadna inna odpowiedź)
Quentin
10
To prawda, jednak to pytanie jest pierwszym wynikiem wyszukiwania hasła „funkcja strzałki nie działa w IE” i podałem proste i mniej szczegółowe (bardziej ogólne) wyjaśnienie. Ale rozumiem, że to niezgodne z zasadami, przepraszam.
Szél Lajos
1

IE nie obsługuje obecnie notacji strzałek, ale istnieje wygodny i szybki sposób na transpilację plików ES6 kody ES5.1do pracy w IE. odwiedź witrynę internetową Babel, a następnie wklej swoje kody w lewym polu i skopiuj kod prawego pola, który został przeniesiony do wcześniejszej wersji programu JavaScript.

Na przykład twój kod jest transponowany do:

"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
źródło