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

84

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

javascript internet-explorer

— 프라 카 시카 다콜
소스

20

IE11은 익명 함수에 대한 화살표 표기법을 지원하지 않습니다. 로 다시 작성하십시오 function (d) { return d.part == "primary" ? -40 : 40; }.

— 계통 발생

1

@Phylogenesis : 모든 화살표 함수가 익명 인 것은 아닙니다. 예를 들면 다음과 같습니다.var f = () => "foo";

— TJ Crowder

2

이 구문을 지원하는 브라우저는 여기를

— Liam

1

^^ ... 또는 문서 .

— Teemu

2

@David Balažic 코드가 잘못되었습니다. if (a=>0)항상 사실입니다. 이것은 당신이 한 것은 비교가 아니라 함수를 만드는 것이었고 함수는 사실이기 때문입니다. if (a<=0)그것을 쓰는 올바른 방법이 될 것입니다.

— user3654410

118

화살표 기능을 사용하고 있습니다. 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";
});

— TJ 크라우 더
소스

3

잊지 마세요 this: var f = (a) => {a.some1(); this.some2();};tovar f = function(a) {a.some1(); this.some2();}.bind(this);

— user1742529

21

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

— 펠리페 사 비노
소스

17

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

— Szél Lajos
소스

1

이 코드는 질문의 코드와 전혀 닮지 않았습니다 (그리고 "화살표 함수를 사용하지 마십시오"는 다른 모든 답변이 아직 말하지 않은 내용을 말하지 않음)

— Quentin

10

사실, 그러나이 질문은 "IE에서 작동하지 않는 화살표 기능"에 대한 첫 번째 검색 결과이며 간단하고 덜 구체적인 (보다 일반적인) 설명을 제공했습니다. 그러나 나는 그것이 규칙에 위배된다는 것을 이해합니다.

— Szél Lajos

1

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

— AmerllicA
소스