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

Program / 글쓴이

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

답변