為什么這個箭頭函數在 IE 11 中不起作用？

Question

下面的代碼在 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)

Answer 1

您正在使用箭頭函數。 IE11 不支持它們。 改用function函數。

這是Babel對 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";
});

由於沒有任何代碼使用this ，您不必擔心保留箭頭函數的this行為（因為傳統函數通過它們的調用方式獲得this ，但箭頭函數關閉this ）。 但是，如果代碼確實使用了this並且您希望它的行為類似於箭頭函數，那么您將需要使用通常的技術。

Answer 2

如果您需要支持 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";
});

Answer 3

一般來說，在箭頭函數成為箭頭函數之前，它們是常規的 JS function 。 所以對於 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);

Answer 4

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

Answer 5

Internet Explorer(IE) 根本不支持 ES6 功能，但你可以安裝BabelJS 。 但是您也可以改為編寫 vanillaJS 函數。

例如：

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

或者只是 vanilla.js：

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

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