Чому ця функція стрілки не працює в IE 11?

84

Нижче фрагмент коду не працює в 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

— пракашкадаколь
джерело

20

IE11 не підтримує позначення стрілки для анонімних функцій. Перепишіть як function (d) { return d.part == "primary" ? -40 : 40; }.

— Філогенез

1

@Phylogenesis: Не всі функції стрілок є анонімними. Наприклад, це не так:var f = () => "foo";

— TJ Crowder

2

Дивіться тут, які браузери підтримують цей синтаксис

— Ліам,

1

^^ ... або документи .

— Teemu

2

@David Balažic Ваш код помилковий. if (a=>0)завжди правда. Це тому, що те, що ви зробили, створило функцію, а не порівняння, і функції неправдиві. if (a<=0)це був би правильний спосіб написати це.

— користувач3654410,

118

Ви використовуєте функції стрілок. IE11 їх не підтримує. functionНатомість використовуйте функції.

Ось переклад Бабеля про це в 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
джерело

3

не забувайте про this: var f = (a) => {a.some1(); this.some2();};tovar 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";
});

— Феліпе Сабіно
джерело

17

Загалом, до того, як функції зі стрілками були функціями зі стрілками, вони були звичайними JS functions. Тож з 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);

— Сель Лайош
джерело

1

Цей код взагалі не схожий на код у питанні (і "не використовувати функції стрілок" не говорить нічого, що не було сказано в кожній іншій відповіді)

— Квентін,

10

Правда, однак це питання є першим результатом пошуку "функція стрілки не працює в IE", і я дав просте і менш конкретне (більш загальне) пояснення. Але я розумію, що це суперечить правилам, вибачення.

— Szél Lajos,

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

— AmerllicA
джерело