그것들은 매우 유행이 되었고, 우리는 모든 새로운 기사에서 그것들을 봅니다. 그리고 익숙하지 않으면 화살표 기능이 포함된 최신(ES6) 코드를 이해하기 어려울 것입니다.

이 글은 언제, 어떻게 사용하는지 알려드리기 위한 것이 아닙니다. 처음 보시는 분들을 위해 새로운 문법에 대해 설명해 드리겠습니다. 사용 여부는 중요하지 않지만 조만간 어딘가에서 만나게 될 것입니다. 따라서 이 새로운 구문의 메커니즘을 이해하는 것이 더 좋습니다.

다음은 작은 예입니다.

Const addOne = function(n) ( n + 1 반환; )

위의 코드는 다음과 같이 작성할 수 있습니다.

Const addOne = (n) => ( n + 1 반환; )

또는 이 경우에는 더 짧습니다.

Const addOne = (n) => n + 1;

두 번째 예제에서는 ( ... ) 중괄호를 사용하지만 코드 한 줄에 불과하므로 세 번째 예제에서 볼 수 있듯이 중괄호를 생략할 수 있으며 반환값이 암시됩니다.

하나의 매개변수

화살표 함수에 하나의 매개변수가 있는 경우 괄호를 생략할 수 있습니다.

// 이전: someCallBack((results) => ( ... )) // 현재: someCallBack(results => ( ... ))

그러나 매개변수가 없으면 여는 괄호와 닫는 괄호를 사용해야 합니다.

SomeCallBack(() => ( ... ))

콜백 함수

함수 화살표는 콜백에 특히 유용합니다. JavaScript에 익숙한 사람들은 어휘 범위에 익숙합니다. 이는 매우 깔끔하지만 다음과 같은 트릭을 수행할 수 있습니다( 이것):

Var_this = 이것; someCallBack(function() ( _this.accessOuterScope(); ))

이 "_this"에는 여러 가지 변형(예: "self" 또는 "that")이 있지만 개념은 동일합니다. 콜백 함수에서는 외부 범위 버전에 액세스해야 하지만 개념은 동일합니다. 콜백 함수에서는 외부 범위의 this 버전에 액세스해야 합니다. 이는 콜백 함수에 대해 이야기하고 있기 때문에 이전과 다릅니다.

사용하여 화살표 기능, 우리는 "블록 범위"와 "this"를 얻습니다. 이는 두 경우 모두 동일한 "this"입니다. 이는 위의 코드가 _this = this 없이 다시 작성될 수 있음을 의미합니다.

SomeCallBack(() => ( this.accessOuterScope(); ))

"싸개"

이벤트가 발생하는 React와 같은 상황을 상상해 봅시다. 클릭 시 doSomething() , ()을 호출해야 하지만 doSomething()에 인수(예: ID)도 전달해야 합니다. 이 예는 실제로 작동하지 않습니다.

일부 사용자) ))

코드는 실행되지만 기술적으로는 페이지가 로드되는 즉시 doSomething()을 호출합니다. 이 문제를 해결하기 위해 일부 개발자는 래퍼 함수를 ​​참조합니다.

Const User = React.createClass(function() ( render: function() ( 일부 사용자 반환), onClick: function() ( doSomething(this.props.userId); ) ))

this.onClick에 괄호가 없다는 것은 이것이 함수 호출이 아니라 단순히 함수 참조임을 의미합니다.

onClick() 함수는 이제 doSomething() 의 래퍼와 같습니다. 화살표 기능을 사용하면 다음 유형의 "래퍼"를 만들 수 있습니다.

Const User = React.createClass(function() ( render: function() ( return doSomething(this.props.userId))>Some user ) ))

대안으로 래퍼(화살표 함수 등)가 필요하지 않은 .bind() 를 사용할 수도 있습니다.

Const User = React.createClass(function() ( render: function() ( 일부 사용자 반환 ) ))

화살표 기능에 대한 브라우저 지원

이외의 브라우저 지원이 필요한 경우 최신 버전 크롬그리고 파이어폭스, 사용 바벨 트랜스파일러작성한 ES6 코드를 ES5로 변환합니다.

ES6에는 함수를 생성하는 새로운 방법이 있습니다. 바로 Arrow => 연산자를 사용하는 것입니다. 이러한 함수를 화살표 함수라고 합니다. 보다 간결한 구문을 제공합니다. 그들은 이름이 없으며 이것으로 다르게 작동합니다.

가장 먼저 할 일은 파일을 모니터링하고 파일이 변경될 때 새로운 버전을 생성하는 Babel 스크립트를 실행하는 것입니다.

프로젝트 폴더를 엽니다. 명령줄(KS). 다음 명령을 입력하십시오.

그리고 Enter를 누르세요

src 폴더에 arr.js 파일을 생성하고 즉시 index.html 파일에 표시합니다.

</스크립트>

최신 버전의 브라우저는 변환 없이 화살표 기능을 지원하며 내 브라우저도 그중 하나입니다.

두 숫자를 더하고 그 합을 반환하는 함수를 작성해 보겠습니다. add 함수를 호출해 보겠습니다.

함수 add (x, y) ( return x + y; ) console.log (add (3, 6));

콘솔에서 결과를 볼 수 있습니다 - 9

이제 이 함수를 화살표 함수로 변환해 보겠습니다.

function이라는 단어를 제거하고, 함수 이름과 중괄호, 그리고 return이라는 단어를 제거해 보겠습니다. 매개변수 뒤에 화살표를 넣겠습니다.

더하기 = (x, y) => x + y; console.log(add(4, 6));

typeof 연산자를 사용하여 add 변수의 유형을 살펴보면 다음과 같습니다.

Console.log(typeof(add));

이것이 함수 콘솔에서 볼 수 있는 내용입니다.

이는 화살표 기능이 일반 기능임을 의미합니다. 그리고 트랜스파일된 코드를 보면 이를 확인할 수 있습니다.

"엄격하게 사용하세요"; var _typeof = typeof Symbol === "함수" && typeof Symbol.iterator === "symbol" ? function (obj) ( return typeof obj; ) : function (obj) ( return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj ; ); var add = function add(x, y) ( return x + y; ); console.log(add(4, 6)); console.log(typeof add === "정의되지 않음" ? "정의되지 않음" : _typeof(add));

Babel이 코드를 간단한 함수 표현식으로 변환한 것을 볼 수 있습니다.

주어진 숫자를 제곱하는 간단한 함수를 작성해 보겠습니다.

더하기 = (x, y) => x + y; console.log(add(4, 6)); console.log(typeof(add)); let square = function(a) ( return a * a; ) console.log(square (4));

콘솔을 살펴보겠습니다:

화살표 함수는 다음과 같습니다.

정사각형 = x => x * x;

화살표 함수가 하나의 매개변수만 취하는 경우, 매개변수를 괄호로 묶을 필요가 없습니다!

매개변수를 전혀 사용하지 않는 함수를 작성해 보겠습니다.

함수 givNumer () ( return 33; ) console.log(givNumer ());

이 함수는 단순히 숫자 33을 콘솔에 인쇄합니다. 화살표:

givNumer = () => 33; console.log(givNumer());

아무것도 반환하지 않는 함수를 만들어 보겠습니다. 단순히 브라우저 콘솔에 메시지가 표시됩니다.

log = function () ( console.log("Hello World!"); ); 통나무();

스위치:

log = () => console.log("Hello World!!!"); 통나무();

본문이 두 줄로 구성되는 함수를 만들어 보겠습니다.

이 함수는 두 개의 매개변수를 사용합니다. 함수 본문에 변수를 만들어 보겠습니다. 그 후에 결과를 반환하겠습니다.

mult = 함수 (a, b) ( 결과 = a * b; 결과 반환; ) console.log(mult (4, 5));

화살표 함수에 여러 줄이 있는 경우 중괄호 - ()가 필요합니다! 그리고 return 키워드를 사용하여 이 함수가 반환하는 내용을 정의해야 합니다.

스위치:

mult = (a, b) => ( 결과 = a * b; 결과 반환; ) console.log(mult (4, 5));

이제 객체 리터럴을 반환하는 함수를 만들어 보겠습니다.

literal = function () ( return ( name: "John"); ) console.log (literal ());

콘솔에는 다음이 표시됩니다.

이제 객체 리터럴을 반환하는 화살표 함수를 만들어 보겠습니다.

화살표 함수가 객체 리터럴을 반환하는 경우 괄호가 필요하다는 점을 기억해야 합니다. - ()

객체 리터럴을 반환하는 화살표 함수:

리터럴 = () => ((이름: "John")); console.log(리터럴());

이제 화살표 함수를 IIFE - 즉시 호출 함수 표현식으로 사용해 보겠습니다.

한마디로 선언 직후에 실행되는 함수입니다.

다음과 같습니다:

(function () ( console.log("IIFE"); ))();

화살표 IIFE 함수는 다음과 같습니다:

(() => console.log("IIFE"))();

화살표 함수의 중요한 특징은 화살표가 매개변수 바로 뒤에 와야 한다는 것입니다!

그냥 가져가서 아래 줄로 옮길 수는 없습니다. 오류가 발생합니다!

화살표 기능의 실제 적용. 화살표 함수는 배열과 함께 사용하기 매우 편리합니다.

숫자가 포함된 배열을 만들고 이를 숫자라고 부르겠습니다. 배열에는 배열을 반복하고 필터링하는 등의 작업을 수행할 수 있는 유용한 메서드가 있다는 것을 알고 계실 것입니다.

모든 배열 변수의 합을 계산해 보겠습니다. 이를 위해 다른 변수를 선언하겠습니다. sum = 0으로 설정하겠습니다.

모든 배열에 있는 forEach() 메서드를 사용하여 요소를 반복하고 합계를 더해 보겠습니다.

숫자 = ; 합계 = 0으로 둡니다. number.forEach(function(num) ( sum += num; )); console.log(sum);

콘솔에는 55가 표시됩니다. 이 함수를 화살표 함수로 바꿔보겠습니다: number.forEach(num => sum += num); console.log(sum);

따라서 이전에는 세 줄이 필요했지만 이제는 한 줄이 필요합니다.

배열의 각 요소를 제곱할 수도 있습니다.

제곱 = 숫자.map(n => n * n); console.log(제곱);

화살표 함수와 이것 . 이를 위해 person 변수에 저장할 객체 리터럴을 생성하겠습니다.

person 객체는 'Bob' 값을 가진 name 속성과 'Greet' 값을 가진 Greeting 속성을 갖게 됩니다.우리는 콘솔에 인사말을 출력하고 이것의 목적도 살펴보겠습니다.

Let person = ( name: "Bob", Greeting: function () ( console.log("안녕하세요! 내 이름은 " + this.name); console.log(this); ) ); 사람.인사();

브라우저 콘솔에서는 인사말과 사람 개체 자체를 볼 수 있습니다.

이제 함수를 화살표로 바꾸고 이것이 어떻게 되는지 살펴보겠습니다.

Let person = ( name: "Bob", Greeting: () => ( console.log("안녕하세요! 내 이름은 " + this.name); console.log(this); ) ); 사람.인사();

이제 우리는 이름의 값을 얻지 못했으며 이것의 값은 window 입니다!

그런데 왜? 요점은 this 값이 함수가 선언된 컨텍스트에서 가져온다는 것입니다. ! 이 기능이 어디에서 수행되든 상관없습니다. 이것은 그림에서 볼 수 있습니다 :

프로그램이 있습니다.

지금까지는 창 개체 외에는 아무것도 없습니다. 사람 개체를 추가했습니다. 메소드에 화살표 기능을 사용한다는 점에 유의하세요. 우리가 말했듯이 이것의 가치는 맥락에서 따질 것입니다. 상황은 환경입니다. 이 경우, person 개체의 환경, 모든 속성 및 메서드는 다음과 같습니다. 창 개체. 그리고 this 값을 컨텍스트에서 가져오면 this는 창 개체를 참조하게 됩니다.

일반 함수를 살펴보면 이것이 사람 개체 자체를 참조한다는 것을 알 수 있습니다. 왜 화살표 함수의 this 값을 컨텍스트에서 가져오는지 궁금할 수 있습니다. 대답은 매우 간단합니다. 그들은 그렇게 했습니다! :-) 요점은 화살표 기능이 다른 상황의 문제를 해결하기 위해 만들어졌다는 것입니다. 예를 살펴보겠습니다. 문제를 확인하기 위해 화살표 기능으로 돌아갑니다.

Let person = ( name: "Bob", Greeting: function () ( console.log("안녕하세요! 내 이름은 " + this.name); console.log(this); ) );

Bob이 매우 바빠서 작업을 완료하는 데 몇 초가 걸린다고 가정해 보겠습니다. 2초 동안 기다리세요. setTimeout() 함수를 사용하여 시뮬레이션합니다. .이 함수는 함수를 첫 번째 매개변수로 취하고 대기 시간(밀리초)을 두 번째 매개변수로 사용합니다.

Let person = ( name: "Bob", Greeting: function () ( setTimeout(function () ( console.log("안녕하세요! 내 이름은 " + this.name); console.log(this); ), 2000) ; ) ); 사람.인사();

JavaScript를 사용해 본 경험이 있다면 문제가 무엇인지 이해하셨으리라 생각합니다. 어쨌든, 브라우저에서 어떤 일이 일어나는지 살펴보겠습니다. 정확히 2초 후에 브라우저에서 이 사진을 볼 수 있습니다.

그런데 왜? 우리 코드를 보면 가정하는 것이 논리적입니다. 우리가 일반 함수를 사용하고 있기 때문에 이것은 사람 객체를 참조합니다. 문제는 setTimeout()이 window 객체에 속한다는 것입니다. window.setTimeout() 과 같이 작성하면 무엇을 참조한다고 생각하시나요? 그리고 콘솔에서도 같은 결과를 얻을 것입니다! ES5에서는 이 문제를 해결하는 방법이 여러 가지가 있습니다. 가장 일반적인 것을 살펴보겠습니다. setTimeout() 전에 다른 변수를 선언하고 이를 값으로 할당합니다. 이제 함수 본문에 이것 대신에 그것을 표시하겠습니다.

Let person = ( name: "Bob", Greeting: function () ( let that = this; setTimeout(function () ( console.log("안녕하세요! 내 이름은 " + that.name); console.log(that) ; ), 2000); ) ); 사람.인사();

이제 클로저 덕분에 setTimeout()에 보내는 함수는 값이 this가 될 변수, 즉 이 경우에는 person 객체에 액세스할 수 있습니다.

명확성을 위해 that과 this가 무엇을 가리키는지 살펴보세요.

Let person = ( name: "Bob", Greeting: function () ( let that = this; setTimeout(function () ( console.log("안녕하세요! 내 이름은 " + that.name); console.log("It is my That = " + that); console.log("It is my This = " + this); ), 2000); ) ); 사람.인사();

콘솔에 확인이 표시됩니다.

우리는 이것이 창 객체(This = )가 될 것이고 저것이 사람 객체(That = )가 될 것임을 알 수 있습니다.

ES6에서는 간단히 화살표 기능을 사용하여 이 문제를 해결할 수 있습니다.

Let person = ( name: "Bob", Greeting: function () ( setTimeout(() => ( console.log("안녕하세요! 내 이름은 " + this.name); console.log("내 것입니다. = " + 이); ), 2000); ) ); 사람.인사();

결과적으로 콘솔에 다음이 표시됩니다.

안에 그래픽 예화살표 기능의 경우 컨텍스트는 창 개체가 아닌 사람 개체가 됩니다. 이것이 바로 person 을 참조하는 이유입니다.

이와 같은 문제를 해결하기 위해 간결한 구문 외에도 화살표 함수가 도입되었습니다.

참고로 Babel이 이 문제를 어떻게 해결했는지 확인할 수 있습니다.

Var person = ( name: "Bob", Greeting: function Greeting() ( var _this = this; setTimeout(function () ( console.log("안녕하세요! 내 이름은 " + _this.name); console.log(" 그것은 나의 This = " + _this); ), 2000); ) ); 사람.인사(); Babel은 ES5에서 사용한 것과 동일한 방법을 사용했습니다. 유일한 차이점은 우리가 변수를 that이라고 불렀고 Babel은 그것을 - _this라고 불렀다는 것입니다. 클로저 덕분에 setTimeout에 보내는 함수는 _this 변수에 액세스할 수 있으며 결과적으로 person 객체에 액세스할 수 있습니다.

이 부분에서 가장 어려운 부분은 클로저의 작동 방식을 이해하는 것입니다.

화살표 기능의 추가 기능:
내 게시물에서 ES6 및 화살표 기능에 대한 자세한 정보를 볼 수 있습니다.

안녕하세요 여러분! 이번 글에서는 ES6의 화살표 기능이 무엇인지, 어떻게 사용하는지 살펴보겠습니다.

화살표 함수는 화살표 연산자(=>)를 사용하여 작성된 함수입니다.

바로 예를 살펴보겠습니다.

더하기 = (x, y) => x + y;
console.log(add(5, 2));

이 함수를 실행하면 콘솔에 숫자 7이 표시됩니다.

먼저 괄호 안에 인수를 전달한 다음 화살표 기호를 넣은 다음 함수 자체의 코드를 작성합니다. 우리의 경우에는 단순히 두 개의 숫자를 가져와서 더합니다. 이론적으로는 ES5의 함수 표현과 동일합니다. Babel 또는 유사한 컴파일러를 사용하는 경우 다음과 같이 작성될 가능성이 높습니다.

Var add = 함수 add(x, y) (
x + y를 반환합니다.
};

함수가 하나의 매개변수만 취하는 경우 괄호는 선택사항입니다.

정사각형 = x => x*x;

이 함수는 하나의 인수만 취하고 주어진 숫자를 제곱합니다.

매개변수가 없는 기능:

func = () => 77로 둡니다.

함수에 여러 줄이 포함된 경우 먼저 중괄호를 사용해야 하고 두 번째로 함수가 반환하는 내용을 작성해야 합니다. return 키워드를 사용하세요.

곱하기 = (x, y) => (
결과 = x*y로 둡니다.
결과 반환;
};

객체 리터럴을 반환해야 하는 경우 이를 괄호로 묶어야 합니다.

Let getObject = () => (( 브랜드: "BMW" ));

자체 호출 함수는 다음과 같습니다.

화살표 함수 표현식은 정규 함수 표현식에 대한 구문적으로 압축된 대안이지만 this, 인수, super 또는 new.target 키워드에 대한 자체 바인딩은 없습니다. 화살표 함수 표현식은 메서드로 적합하지 않으며 생성자로 사용할 수 없습니다.

구문 기본 구문 (param1, param2, …, paramN) => ( 문 ) (param1, param2, …, paramN) => 표현식 // 다음과 동일: => ( return 표현식; ) // "가 있는 경우 괄호는 선택 사항입니다. 하나의 매개변수 이름만 사용: (singleParam) => ( 문 ) SingleParam => ( 문 ) // 매개변수가 없는 함수의 매개변수 목록은 한 쌍의 괄호로 작성해야 합니다. () => ( 문 ) 고급 구문 // 객체 리터럴 표현식을 반환하려면 함수 본문을 괄호로 묶습니다. params => ((foo: bar)) // 나머지 매개변수와 기본 매개변수가 지원됩니다. (param1, param2, ...rest) => ( 명령문 ) (param1 = defaultValue1, param2, …, paramN = defaultValueN) => ( 문 ) // 매개변수 목록 내에서의 구조 분해도 지원됩니다. var f = ( = , (x: c) = (x: a + b)) => a + b + c; f(); // 6 설명

화살표 함수의 도입에 영향을 준 두 가지 요소는 더 짧은 함수의 필요성과 this 키워드의 동작입니다.

더 짧은 함수 var elements = [ "수소", "헬륨", "리튬", "베릴륨" ]; // 이 명령문은 배열을 반환합니다: elements.map (function(element) ( return element.length; )); // 위의 일반 함수는 아래의 화살표 함수로 작성할 수 있습니다. elements.map((element) => ( return element.length; )); // // 매개변수가 하나만 있는 경우 주변 괄호를 제거할 수 있습니다. elements.map (element => ( return element.length; )); // // 화살표 함수의 유일한 명령문이 `return`인 경우 `return`을 제거하고 // ​​둘러싸는 중괄호를 제거할 수 있습니다. elements.map(element => element.length); // // 이 경우, 길이 속성만 필요하기 때문에 구조 분해 매개변수를 사용할 수 있습니다. // `length`는 우리가 얻고자 하는 속성에 해당하는 반면 // 분명히 특수하지 않은 `lengthFooBArX`는 // 변경할 수 있는 변수의 이름입니다. // 원하는 유효한 변수 이름으로 elements.map ((( length:lengthFooBArX )) => lengthFooBArX); // // 이 구조 분해 매개변수 할당은 아래와 같이 작성할 수도 있습니다. 그러나 // 이 예에서는 구성된 속성에 `length` 값을 할당하지 않습니다. 대신, 'length' 변수의 // 리터럴 이름 자체가 객체에서 검색하려는 속성으로 사용됩니다. elements.map ((( 길이 )) => 길이); // 별도의 내용은 없습니다.

화살표 함수 이전에는 모든 새 함수가 함수 호출 방식에 따라 고유한 this 값을 정의했습니다.

• 생성자의 경우 새 개체입니다.
• 엄격 모드 함수 호출에서는 정의되지 않았습니다.
• 함수가 "객체 메서드"로 호출된 경우 기본 객체입니다.

이는 객체 지향 프로그래밍 스타일에서는 이상적이지 않은 것으로 입증되었습니다.

Function Person() ( // Person() 생성자는 `this`를 자신의 인스턴스로 정의합니다. this.age = 0; setInterval(function GrowthUp() ( // 비엄격 모드에서,rowUp() 함수는 ` this` // 전역 개체로 사용됩니다(growUp()이 실행되는 곳이기 때문입니다.) // 이는 Person() 생성자에 의해 정의된 `this`와 // 다릅니다. this.age++; ), 1000) ; ) var p = 새로운 사람();

ECMAScript 3/5에서는 이 값을 닫을 수 있는 변수에 할당하여 이 문제를 해결할 수 있었습니다.

Function Person() ( var that = this; that.age = 0; setInterval(function GrowthUp() ( // 콜백은 값이 예상되는 객체인 `that` 변수를 참조합니다. that.age++; ) , 1000); ) "엄격한 사용"; var obj = (a: 10); Object.defineProperty(obj, "b", ( get: () => ( console.log(this.a, typeof this.a, this); // 정의되지 않음 "정의되지 않음" Window (...) (또는 전역 object) return this.a + 10; // 전역 개체 "Window"를 나타내므로 "this.a"는 "정의되지 않음"을 반환합니다. ) ));

new 연산자의 사용

화살표 함수는 생성자로 사용할 수 없으며 new 와 함께 사용하면 오류가 발생합니다.

바르 푸 = () => (); var foo = new Foo(); // TypeError: Foo는 생성자가 아닙니다.

프로토타입 속성 사용

화살표 함수에는 프로토타입 속성이 없습니다.

바르 푸 = () => (); console.log(Foo.prototype); // 한정되지 않은

Yield 키워드 사용

Yield 키워드는 화살표 함수의 본문에 사용할 수 없습니다(그 안에 추가로 중첩된 함수 내에서 허용되는 경우 제외). 결과적으로 화살표 함수는 생성기로 사용할 수 없습니다.

기능 본문

화살표 함수는 "간결한 본문" 또는 일반적인 "블록 본문"을 가질 수 있습니다.

간결한 본문에서는 암시적 반환 값이 되는 표현식만 지정됩니다. 블록 본문에서는 명시적인 return 문을 사용해야 합니다.

Var func = x => x * x; // 간결한 본문 구문, "return"을 암시함 var func = (x, y) => ( return x + y; ); // 블록 본문이 있는 경우 명시적인 "반환"이 필요합니다.

객체 리터럴 반환

간결한 본문 구문 params => (object:literal)을 사용하여 객체 리터럴을 반환하면 예상대로 작동하지 않는다는 점에 유의하세요.

Var func = () => ( foo: 1 ); // func()를 호출하면 정의되지 않은 결과가 반환됩니다! var func = () => ( foo: function() () ); // 구문 오류: 함수 문에 이름이 필요합니다.

이는 중괄호(()) 안의 코드가 일련의 명령문으로 구문 분석되기 때문입니다(즉, foo는 객체 리터럴의 키가 아닌 레이블처럼 처리됩니다).

객체 리터럴을 괄호로 묶어야 합니다.

Var func = () => (( foo: 1 ));

줄 바꿈

화살표 함수에는 해당 매개변수와 화살표 사이에 줄 바꿈이 포함될 수 없습니다.

Var func = (a, b, c) => 1; // 구문 오류: 예상된 표현식, "=>"이 발생함

그러나 화살표 뒤에 줄바꿈을 넣거나 아래와 같이 괄호/중괄호를 사용하여 코드를 깔끔하고 깔끔하게 유지함으로써 이를 수정할 수 있습니다. 인수 사이에 줄 바꿈을 넣을 수도 있습니다.

Var func = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => ( 1을 반환); var func = (a, b, c) => 1; // SyntaxError가 발생하지 않음

파싱 ​​순서

화살표 함수의 화살표는 연산자가 아니지만 화살표 함수에는 일반 함수와 비교하여 연산자 우선 순위와 다르게 상호 작용하는 특별한 구문 분석 규칙이 있습니다.

콜백하자; 콜백 = 콜백 || 기능(); // 확인 콜백 = 콜백 || () => (); // 구문 오류: 잘못된 화살표 함수 인수 callback = callback || (() => ()); // 좋아요

추가 예제 // 빈 화살표 함수는 정의되지 않음을 반환합니다. let empty = () => (); (() => "foobar")(); // "foobar"를 반환합니다. // (즉시 호출되는 함수 표현식입니다.) var simple = a => a > 15 ? 15: 가; 단순(16); // 15개 단순(10); // 10 let max = (a, b) => a > b ? 가: ㄴ; // 간편한 배열 필터링, 매핑 등 ... var arr = ; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // var double = arr.map(v => v * 2); // // 더 간결한 프로미스 체인 promise.then(a => ( // ... )).then(b => ( // ... )); // 시각적으로 구문 분석하기 더 쉬운 매개변수 없는 화살표 함수 setTimeout(() => ( console.log("더 빨리 발생합니다"); setTimeout(() => ( // 더 깊은 코드 console.log("나중에 발생합니다") ; ), 열하나); 명세서 사양 상태 설명

ECMAScript 2015(6판, ECMA-262)	기준	초기 정의.
ECMAScript 최신 초안(ECMA-262) 해당 사양의 "화살표 함수 정의"에 대한 정의입니다.	초안

브라우저 호환성

이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 요청을 보내주세요.

GitHub에서 호환성 데이터 업데이트

데스크탑 모바일 서버 Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android용 Chrome Android용 Firefox Android용 Opera iOS의 Safari Samsung Internet Node.js화살표 기능 매개변수의 후행 쉼표

Chrome 전체 지원 45

Edge 전체 지원 예

Firefox 전체 지원 22 노트 전체 지원 22 노트 노트 Firefox 39 이전에는 화살표 함수 인수 뒤에 줄 종결자(\n)가 잘못 허용되었습니다. 이는 ES2015 사양 및 ()와 같은 코드를 준수하도록 수정되었습니다. \n =>

IE 지원 안 함 아니요

오페라 전체 지원 32

사파리 전체 지원 10

WebView Android 전체 지원 45

Chrome Android 전체 지원 45

Firefox Android 전체 지원 22 노트 전체 지원 22 노트 노트 Firefox의 화살표 기능의 초기 구현은 자동으로 엄격하게 만들었습니다. 이는 Firefox 24부터 변경되었습니다. "use strict"를 사용합니다. 이제 필수입니다. 노트 Firefox 39 이전에는 화살표 함수 인수 뒤에 줄 종결자(\n)가 잘못 허용되었습니다. 이는 ES2015 사양을 준수하도록 수정되었으며 () \n => ()와 같은 코드는 이제 이 버전과 이후 버전에서 SyntaxError를 발생시킵니다.

Opera Android 전체 지원 32

사파리 iOS 전체 지원 10

삼성 인터넷 안드로이드 5.0 완벽 지원

nodejs 전체 지원 예

크롬 전체 지원 58

가장자리?

Firefox 전체 지원 52

IE 지원 안 함 아니요

오페라 전체 지원 45

원정 여행?

WebView Android 전체 지원 58

Chrome Android 전체 지원 58

Firefox Android 전체 지원 52

Opera Android 전체 지원 43

사파리 iOS?

삼성 인터넷 안드로이드 7.0 완벽 지원

nodejs 전체 지원 예

범례 전체 지원 전체 지원 지원 없음 지원 없음 호환성 알 수 없음 호환성 알 수 없음 구현 참고 사항을 참조하세요. 구현 참고 사항을 참조하세요.

• 지도 시간

새로운 ECMAScript 6 표준의 가장 흥미로운 부분 중 하나는 화살표 기능입니다. 이름에서 알 수 있듯이 화살표 함수는 화살표 => 를 사용하는 새로운 구문으로 정의됩니다. 그러나 뛰어난 구문 외에도 화살표 함수는 다음과 같은 면에서 기존 함수와 다릅니다.

• 어휘 바인딩. 가치 특수 변수 this , super 및 인수는 화살표 함수가 호출된 방식이 아니라 생성된 방식에 따라 결정됩니다.
• this , super 및args 는 변경할 수 없습니다. 화살표 함수 내부의 이러한 변수 값은 전체적으로 변경되지 않습니다. 수명주기기능.
• 화살표 함수는 생성자로 사용할 수 없으며 new 연산자와 함께 사용하면 오류가 발생합니다.
• 인수 변수의 "기본" 값을 사용할 수 없습니다.

이러한 차이점을 도입한 데에는 몇 가지 이유가 있었습니다. 첫 번째는 바인딩이 JavaScript에서 자주 사용된다는 것입니다. 기존 함수를 사용할 때 올바른 이 값을 잃기 매우 쉬우며, 이로 인해 예상치 못한 결과가 발생할 수 있습니다. 또 다른 이유는 JS 엔진이 이러한 제한으로 인해 화살표 함수의 실행을 쉽게 최적화할 수 있다는 것입니다(생성자로 사용할 수 있고 자유롭게 수정할 수 있는 기존 함수와는 대조적). 특수 변수).

참고: 이 기사는 ECMAScript 6 화살표 기능 이해 기사의 무료 번역과 최신 사양 초안(2014년 1월 20일 Draft Rev 22)을 읽은 내용을 편집한 것입니다.

구문 일반적으로 화살표 함수의 구문은 다음과 같습니다.

Var 재미 = (x) => x;
Scala, CoffeeScript 등 언어의 유사한 구문과 C#의 람다 식 구문과 매우 유사합니다.

화살표 함수의 구문은 함수를 선언하는 방법에 따라 달라질 수 있습니다. 선언은 항상 인수 목록으로 시작하고 그 뒤에 화살표와 함수 본문이 옵니다. 인수 목록과 함수 본문은 작성하는 내용에 따라 서로 다른 형식을 취할 수 있습니다.

하나의 매개변수 하나의 인수를 취하고 이를 간단히 반환하는 화살표 함수를 선언하는 것은 매우 간단합니다.

Var 반영 = 값 => 값; // var Reflect = function(value) ( ​​​​return value; )와 같습니다.
화살표 함수에 인수가 하나만 있는 경우 괄호 없이 선언할 수 있습니다. 화살표 뒤의 함수 본문에는 중괄호가 없고 return 키워드가 포함되지 않을 수도 있습니다.

다중 매개변수 그러나 둘 이상의 매개변수를 선언하려면 매개변수 목록을 괄호로 묶어야 합니다.

Var sum = (num1, num2) => num1 + num2; // var sum = function(num1, num2) ( return num1 + num2; )와 같습니다.
sum 함수는 단순히 두 개의 인수를 추가합니다. 이전 예제와의 유일한 차이점은 괄호와 쉼표가 있다는 것입니다(기존 함수와 마찬가지로).

매개변수 없음 마찬가지로, 인수가 없는 함수에는 괄호로 묶인 빈 매개변수 목록이 있어야 합니다.

변수 합계 = () => 1 + 2; // var sum = function() ( return 1 + 2; )과 같습니다.

기존 함수 본문 구문 화살표 함수에 2개 이상의 식이 포함되어 있는 경우 화살표 함수 본문에 기존 함수 구문을 사용할 수 있습니다. 즉, 함수를 중괄호로 묶고 return 키워드를 추가합니다.

Var sum = (num1, num2) => ( return num1 + num2; ) // var sum = function(num1, num2) ( return num1 + num2; );
함수의 본문은 값을 제외하고는 클래식 함수와 정확히 동일한 방식으로 처리됩니다. 특수 변수 this , super 및 인수는 다르게 평가됩니다.

객체 리터럴 별도로, 중괄호를 포함하지 않고 단순히 객체 리터럴을 반환하는 함수의 본문은 괄호로 묶어야 한다는 점을 언급해야 합니다.

Var getTempItem = id => (( id: id, name: "Temp" )); // var getTempItem = function(id) ( return ( id: id, name: "Temp" ) );
객체 리터럴을 괄호 안에 배치하면 중괄호가 함수 본문에 대한 전통적인 구문의 시작이 아니라 리터럴의 시작임을 파서에게 알립니다.

가변 개수의 매개변수 "네이티브" 인수 객체는 화살표 함수 내에서 사용할 수 없으므로(인수 값은 화살표 함수가 선언된 기존 함수의 인수 값과 어휘적으로 관련됨) 나머지 패턴을 사용해야 하는 다양한 매개변수 수 구조파괴 패턴. 예:

Var getTempItems = (...rest) => 휴식; // var getTempItems = function() ( return .slice.apply(arguments) )과 동일합니다.

매개변수로 템플릿을 구조분해하기 이 글의 목적에 따라 우리는 구조 분해 패턴을 고려하지 않습니다. 이 정보는 부분적으로 오래되었지만 다음 버전의 JavaScript인 ECMAScript 6 개요 글에서 해당 패턴에 대해 읽을 수 있습니다.

이전 예제에서 볼 수 있듯이 화살표 함수에는 인수가 하나만 있어도 사용할 때 괄호를 사용해야 합니다. 구조파괴 패턴함수의 유일한 매개변수로. 다른 사람들의 예 템플릿:

Var a = ((a)) => a; var b = ([b]) => b;

Arrow 함수 사용 컨텍스트 설정 JavaScript의 일반적인 시나리오 중 하나는 함수(바인딩) 내에서 올바른 this 값을 설정하는 것입니다. 함수가 실행되는 상황에 따라 this의 값이 바뀔 수 있기 때문에 전혀 다른 것을 의미했는데 하나의 객체에 실수로 작용할 수도 있습니다. 다음 예를 살펴보십시오.

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", function(event) ( this.doSomething(event.type); // error )); ) , doSomething: function( type) ( console.log("Handling " + type + " for " + this.id) ) );
위 코드에서 pageHandler 개체는 페이지 클릭을 처리해야 합니다. init() 메서드는 내부적으로 this.doSomething() 을 호출하는 핸들러를 원하는 이벤트에 연결합니다. 그러나 코드가 올바르게 작동하지 않습니다. this.doSomething()에 대한 참조는 의도한 pageHandler 대신 이벤트 핸들러 내부의 문서 객체를 가리키기 때문에 유효하지 않습니다. 이 코드를 실행하려고 하면 문서 개체에 doSomething 메서드가 없기 때문에 오류가 발생합니다.

handlerEvent를 사용하거나 함수에서 표준 바인딩() 메서드를 호출하여 this 값을 pageHandler 객체에 바인딩할 수 있습니다.

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", (function(event) ( this.doSomething(event.type); // 오류 )).bind(this)) ; ) , doSomething: function(type) ( console.log("Handling " + type + " for " + this.id) ) );
이제 코드는 의도한 대로 작동하지만 더 번거로워 보입니다. 또한 this 값이 pageHandler 값에 연결되는 새 함수를 생성할 때마다 바인딩(this)을 호출하면 코드가 의도한 대로 작동합니다.

화살표 함수는 this 값(super 및 인수 포함)에 대해 어휘 바인딩을 사용하고 해당 값은 화살표 함수가 생성된 위치에서 this 값에 의해 결정되기 때문에 보다 우아한 방식으로 문제를 해결합니다. 예를 들어:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", event => this.doSomething(event.type)); ) , doSomething: function(type) ( console.log( ""에 대한 " + 유형 + " 처리 + this.id) ) );
이 예제에서 핸들러는 this.doSomething() 을 호출하는 화살표 함수입니다. 이 값은 init() 함수와 동일하며, 이 예에서는 bin() 을 사용한 것과 유사하게 올바르게 작동합니다. this.doSomething() 호출이 값을 반환하는지 여부에 관계없이 화살표 함수 본문 내부의 표현식을 중괄호로 묶을 필요는 없습니다.

또한 위의 예는 브라우저에 대한 다음 코드와 동일하므로 바인딩()을 호출하는 것보다 더 효율적입니다.

Var pageHandler = ( id: "123456" , init: function() ( var self = this; document.addEventListener("click", function(event) ( return self.doSomething(event.type) )); ) , doSomething: function(type) ( console.log("Handling " + type + " for " + this.id) ) );
즉, 생성이 발생하지 않습니다. 새로운 기능, 바인딩() 호출의 경우와 같습니다.

여러 호출 사이에 컨텍스트를 "던지기" 분명히 하나의 화살표 함수를 다른 화살표 함수 안에 중첩하여 이를 통해 this 값을 "던지기"할 수 있습니다.

Var obj = ( arr1: , arr2: ["a", "b", "c"] , 연결: function(a, b)( return a + "|" + b ) , 교차점: function() ( 이것을 반환 .arr1.reduce((sum, v1) => // 화살표 함수 1 this.arr2.reduce((sum, v2) => ( // 화살표 함수 2 sum.push(this.concatenate(v1, v2)) return 합계; ) , 합계) , ) ) ); var arrSum = obj.intersection();//["1|a", "1|b", "1|c", "2|a", "2|b", "2|c", "3 |a", "3|b", "3|c"]

인수로 사용 화살표 함수의 짧은 구문은 다른 함수 호출에 인수로 전달하기에 이상적인 후보가 됩니다. 예를 들어, 배열을 정렬하려면 일반적으로 다음과 같이 작성합니다.

Var result = value.sort(function(a, b) ( return a - b ));
간단한 작업에 비해 매우 장황합니다. 화살표 함수의 짧은 표기법과 비교해 보세요.

Var 결과 = value.sort((a, b) => a - b);
array() , map() , Reduce() 등과 같은 메서드의 사용은 짧은 화살표 함수 구문을 사용하여 단순화할 수 있습니다.

화살표 함수의 기타 기능 화살표 함수는 기존 함수와 다르지만 몇 가지 공통된 기능이 있습니다.

• typeof 연산자는 화살표 함수에 대해 "function"을 반환합니다.
• 화살표 함수는 함수 "클래스"의 인스턴스이기도 하므로, instanceof는 기존 함수와 동일하게 작동합니다.
• call() , apply() 및 바인딩() 메서드를 계속 사용할 수 있지만 이 메서드는 이 값에 영향을 미치지 않는다는 점을 기억하세요.
• toMethod() 메서드를 사용할 수 있지만 super() 값은 변경되지 않습니다. toMethod() 메소드는 es6에서 도입되었으며 이 기사에서는 다루지 않습니다.).

기존 함수와의 중요한 차이점은 new 연산자를 사용하여 화살표 함수를 호출하려고 하면 런타임 오류가 발생한다는 것입니다.요약 화살표 함수는 ECMAScript 6의 가장 흥미로운 혁신 중 하나이며 간결한 정의 구문을 사용하여 코드를 단순화합니다. 함수를 매개변수 값으로 다른 함수에 전달합니다.

간결한 구문을 사용하면 복잡한 내용을 더 간단한 방법으로 더욱 복잡하게 작성할 수 있습니다. 예를 들어, 식별자 생성기는 다음과 같습니다(es5에서는 훨씬 더 장황해 보입니다).

idGen = (start = 0, id = start, 재설정 = (newId = start) => id = newId, next = () => id++) => ((reset, next)); gen = idGen(100); console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10
그리고 어휘 바인딩은 개발자에게 고통과 좌절을 안겨주는 가장 큰 원인 중 하나를 해결하고, js 엔진 수준의 최적화로 인해 성능도 향상시킬 것입니다.


화살표 기능을 사용해보고 싶다면 Firefox 콘솔에서 위의 예제를 실행할 수 있습니다. 이 순간(2014년 2월 FF28) 화살표 기능을 거의 완벽하게 지원합니다(FF28은 인수 값을 잘못 계산함).

온라인 번역기 Traceur에서 화살표 기능과 기타 es6 기능을 사용해 볼 수도 있습니다.

태그: 태그 추가