为什么这个箭头功能不能在ie11中工作?

Why doesn't this arrow function work in IE 11?

本文关键字：ie11 工作 能不能 功能 为什么      更新时间：2023-09-26

下面的代码不能在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)

中的问题

您正在使用箭头函数。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，并且您希望它的行为像箭头函数一样，则需要使用通常的技术。

如果您需要支持ie11，请避免使用箭头函数，因为它不支持

将它们更改为常规函数，您的代码应该像您期望的那样工作

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

一般来说，在箭头函数是箭头函数之前，它们是常规的JS function s。所以在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);

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

IE根本不支持ES6的功能，但是你可以安装BabelJS。但是，您也可以编写香草js函数。

例如:

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;
}
相关文章：