¿Por qué esta función de flecha no funciona en IE 11?

82

El siguiente fragmento de código no funciona en IE 11, arroja un error de sintaxis en la consola 

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

Uso de d3.jsgráfico bipartito para visualización

Este código causa el problema en la declaración anterior d=>(d.part=="primary"? -40: 40)

javascript internet-explorer prakashkadakol
fuente
20
IE11 no admite la notación de flechas para funciones anónimas. Vuelva a escribirlo como function (d) { return d.part == "primary" ? -40 : 40; }.
Phylogenesis
1
@ Filogénesis: no todas las funciones de flecha son anónimas. Este no es, por ejemplo:var f = () => "foo";
TJ Crowder
2
Consulte aquí qué navegadores admiten esta sintaxis
Liam
1
^^ ... o los docs .
Teemu
2
@David Balažic Tu código es incorrecto. if (a=>0)siempre es cierto. Esto se debe a que lo que hizo fue crear una función, no una comparación y las funciones son verdaderas. if (a<=0)sería la forma correcta de escribir eso.
user3654410

Respuestas:

116

Estás usando funciones de flecha. IE11 no los admite. En su lugar, utilice functionfunciones.

Aquí está la traducción de Babel de eso a 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
fuente
3
no te olvides de this: var f = (a) => {a.some1(); this.some2();};avar f = function(a) {a.some1(); this.some2();}.bind(this);
user1742529
21

Evite el uso de funciones de flecha si necesita admitir IE 11, ya que no es compatible

Cámbielos a funciones regulares y su código debería funcionar como espera

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
fuente
16

En general, antes de que las funciones de flecha fueran funciones de flecha, eran JS normales function. Entonces, con IE11 solo tenemos que dar un paso atrás en el tiempo

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
fuente
1
Este código no se parece en nada al código de la pregunta (y "no use las funciones de flecha" no dice nada que no hayan dicho ya las demás respuestas)
Quentin
10
Es cierto, sin embargo, esta pregunta es el primer resultado de búsqueda para "la función de flecha no funciona en IE" y di una explicación simple y menos específica (más general). Pero entiendo que va en contra de las reglas, disculpas.
Szél Lajos
1

IE no admite la notación de flechas a partir de ahora, pero hay una forma práctica y rápida de transpilar sus ES6códigos ES5.1para trabajar en ellos IE. visite el sitio web de Babel , luego pegue sus códigos en el cuadro de la izquierda y copie el código del cuadro de la derecha que se transpiró a la versión anterior de JavaScript.

Por ejemplo, su código se transpila a:

"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
fuente