그것은 무엇인가

이것은 화살표 기능입니다. 화살표 함수는 ECMAscript 6에 도입 된 짧은 구문으로, 함수 표현식을 사용하는 방식과 유사하게 사용할 수 있습니다. 다시 말해, 종종 같은 식 대신에 사용할 수 있습니다 function (foo) {...}. 그러나 몇 가지 중요한 차이점이 있습니다. 예를 들어, 그들은 자신의 가치를 묶지 않습니다 this(토론은 아래를 참조하십시오).

화살표 기능은 ECMAscript 6 사양의 일부입니다. 모든 브라우저에서 아직 지원되지는 않지만 Node v. 4.0 이상 및 2018 년 현재 사용중인 대부분의 최신 브라우저에서 부분적으로 또는 완전히 지원 됩니다 (아래에는 지원되는 브라우저의 일부 목록이 포함되어 있음).

화살표 기능 에 대해서는 Mozilla 설명서 를 참조하십시오 .

Mozilla 문서에서 :

(또한 지방 화살표 함수라고도 함) 화살표 함수 표현식에 비해 짧은 구문 함수식 및 어휘 바인드 this값 (결합하지 않는 그 자체를 this, arguments, super, 또는 new.target). 화살표 기능은 항상 익명입니다. 이 함수 표현식은 비 메소드 함수에 가장 적합하며 생성자로 사용할 수 없습니다.

this화살표 기능의 작동 방식에 대한 참고 사항

화살표 기능의 가장 편리한 기능 중 하나는 위의 텍스트에 묻혀 있습니다.

화살표 함수 … 어휘 적으로 this값을 바인딩합니다 (자체 바인딩하지 않습니다 this…)

더 간단한 용어로 화살표 기능 this은 컨텍스트 의 값을 유지하며 자체 값이 없다는 것 this입니다. 전통적인 함수 는 정의 및 호출 방식에 따라 자체 값을 바인딩 할 수 있습니다this . 이것은 다른 함수 내의 한 함수에서 self = this;액세스하거나 조작하기 위해 많은 체조가 필요할 수 있습니다 this. 이 주제에 대한 자세한 정보 는 Mozilla 문서의 설명 및 예제를 참조하십시오 .

예제 코드

예 (문서에서도) :

var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];

// These two assignments are equivalent:

// Old-school:
var a2 = a.map(function(s){ return s.length });

// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );

// both a2 and a3 will be equal to [31, 30, 31, 31]

호환성에 대한 참고 사항

노드에서 화살표 기능을 사용할 수 있지만 브라우저 지원은 드문 경우입니다.

이 기능에 대한 브라우저 지원은 상당히 개선되었지만 여전히 대부분의 브라우저 기반 사용에는 충분하지 않습니다. 2017 년 12 월 12 일부터 현재 버전에서 지원됩니다.

• 크롬 (v. 45+)
• 파이어 폭스 (v. 22+)
• 가장자리 (v. 12+)
• 오페라 (v. 32+)
• 안드로이드 브라우저 (v. 47+)
• 오페라 모바일 (v. 33+)
• Android 용 Chrome (v. 47+)
• Android 용 Firefox (v. 44+)
• 사파리 (10 절 이상)
• iOS Safari (v. 10.2 이상)
• 삼성 인터넷 (v.5 이상)
• 바이두 브라우저 (v. 7.12+)

다음에서 지원되지 않습니다.

• IE (v. 11을 통해)
• 오페라 미니 (버전 8.0을 통해)
• 블랙 베리 브라우저 (v. 10까지)
• IE 모바일 (v. 11)
• Android 용 UC 브라우저 (v. 11.4를 통해)
• QQ (버전 1.2를 통해)

CanIUse.com 에서 더 많은 (및 더 최신) 정보를 찾을 수 있습니다 (가맹 없음).

답변

var foo = ['a', 'ab', 'abc'];

var bar = foo.map(f => f.length);

console.log(bar); // 1,2,3

// < ES6:
var foo = ['a', 'ab', 'abc'];

var bar = foo.map(function(f) {
  return f.length;
});
console.log(bar); // 1,2,3

function Foo() {
  this.name = name;
  this.count = 0;
  this.startCounting();
}

Foo.prototype.startCounting = function() {
  var self = this;
  setInterval(function() {
    // this is the Window, not Foo {}, as you might expect
    console.log(this); // [object Window]
    // that's why we reassign this to self before setInterval()
    console.log(self.count);
    self.count++;
  }, 1000)
}

new Foo();

function Foo() {
  this.name = name;
  this.count = 0;
  this.startCounting();
}

Foo.prototype.startCounting = function() {
  setInterval(() => {
    console.log(this); // [object Object]
    console.log(this.count); // 1, 2, 3
    this.count++;
  }, 1000)
}

new Foo();

const queue = ['Dave', 'Sarah', 'Sharon'];
const nextCustomer = () => queue[0];

console.log(nextCustomer()); // 'Dave'

const queue = ['Dave', 'Sarah', 'Sharon'];
const addCustomer = name => {
  queue.push(name);
};

addCustomer('Toby');

console.log(queue); // ['Dave', 'Sarah', 'Sharon', 'Toby']

const addNumbers = (x, y) => x + y

console.log(addNumbers(1, 5)); // 6

const fruits = [
    {name: 'Apple', price: 2},
    {name: 'Bananna', price: 3},
    {name: 'Pear', price: 1}
];

fruits.map(function(fruit) {
    return fruit.price;
}); // [2, 3, 1]

fruits.map(fruit => fruit.price); // [2, 3, 1]

a = 10
b = 2

var mixed = (a,b) => a * b;
// OR
var mixed = (a,b) => { (any logic); return a * b };

console.log(mixed(a,b))
// 20

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );