Tại sao chức năng mũi tên này không hoạt động trong IE 11?

81

Đoạn mã dưới đây không hoạt động trong IE 11, nó gây ra lỗi cú pháp trong bảng điều khiển

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

Sử dụng d3.jsbiểu đồ hai bên để hình dung

Mã này gây ra sự cố trong câu lệnh trên d=>(d.part=="primary"? -40: 40)

javascript internet-explorer

— prakashkadakol
nguồn

20

IE11 không hỗ trợ ký hiệu mũi tên cho các chức năng ẩn danh. Viết lại nó thành function (d) { return d.part == "primary" ? -40 : 40; }.

— Phylogenesis

1

@Phylogenesis: Không phải tất cả các hàm mũi tên đều ẩn danh. Cái này không phải là, ví dụ:var f = () => "foo";

— TJ Crowder

2

Xem ở đây mà các trình duyệt hỗ trợ cú pháp này

— Liam

1

^^ ... hoặc tài liệu .

— Teemu

2

@David Balažic Mã của bạn sai. if (a=>0)luôn luôn đúng. Điều này là do những gì bạn đã làm là tạo ra một hàm chứ không phải so sánh và các hàm là trung thực. if (a<=0)sẽ là cách chính xác để viết điều đó.

— user3654410

115

Bạn đang sử dụng các hàm mũi tên. IE11 không hỗ trợ chúng. Sử dụng các functionchức năng thay thế.

Đây là bản dịch của Babel về 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
nguồn

3

đừng quên về this: var f = (a) => {a.some1(); this.some2();};tovar f = function(a) {a.some1(); this.some2();}.bind(this);

— user1742529

21

Tránh sử dụng các chức năng mũi tên nếu bạn cần hỗ trợ IE 11 vì nó không được hỗ trợ

Thay đổi chúng thành các chức năng thông thường và mã của bạn sẽ hoạt động như bạn mong đợi

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
nguồn

16

Nói chung, trước khi các hàm arrow là các hàm arrow, chúng là các JS thông thường function. Vì vậy, với IE11, chúng ta chỉ cần lùi một bước về thời gian

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
nguồn

1

Mã này hoàn toàn không giống mã trong câu hỏi (và "không sử dụng hàm mũi tên" không nói gì mà mọi câu trả lời khác chưa nói)

— Quentin

10

Đúng, tuy nhiên câu hỏi này là kết quả tìm kiếm đầu tiên cho "chức năng mũi tên không hoạt động trong IE" và tôi đã đưa ra một lời giải thích đơn giản và ít cụ thể hơn (tổng quát hơn). Nhưng tôi hiểu nó trái với quy tắc, xin lỗi.

— Szél Lajos

1

IE hiện không hỗ trợ ký hiệu mũi tên nhưng có một cách tiện dụng và nhanh chóng để chuyển ES6mã của bạn sang ES5.1để làm việc IE. truy cập trang web Babel sau đó dán mã của bạn vào hộp bên trái và sao chép mã hộp bên phải được chuyển sang phiên bản trước đó của JavaScript.

Ví dụ: mã của bạn được chuyển thành:

"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
nguồn