Programing

IE에서 "화살표 기능"이 작동하지 않는 이유는 무엇입니까?

lottogame 2020. 12. 12. 09:57
반응형

IE에서 "화살표 기능"이 작동하지 않는 이유는 무엇입니까?


아래 코드는 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";
});

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

일반적으로 화살표 함수가 화살표 함수이기 전에는 일반적인 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);


IE는 현재 화살표 표기법을 지원하지 않지만 .NET 에서 작업 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";
});

참고 URL : https://stackoverflow.com/questions/40216015/arrow-function-not-working-in-ie-why

반응형