JavaScript의 화살표 기능 : Fat & Concise Syntax

JavaScript 화살표 함수에 대한 심층적 인 이해. 코드에서 화살표 함수를 사용할 때 ES6 화살표 구문을 사용하는 방법과 몇 가지 일반적인 실수를 보여줍니다. 당신은 그것이 어떻게 작동하는지를 보여주는 많은 예를 보게 될 것입니다. ECMAScript 2015 (ES6이라고도 함)가 출시 된 후 JavaScript 화살표 기능이 나타났습니다. 간결한 구문과

키워드를 처리하는 방법 덕분에 화살표 기능은 개발자가 가장 좋아하는 기능 중 하나가되었습니다.

키 포인트 this

화살표 함수는 키워드, 곱슬 브레이스 및 키워드가 하나만있을 때 키워드를 제거하여 JavaScript의 간결한 구문을 제공합니다.

단일 파라미터 함수의 경우 화살표 기능 매개 변수의 괄호를 생략 할 수 있지만 비 모리터 또는 다중 매개 변수 기능 및 기본 매개 변수를 사용할 때는 브래킷을 사용해야합니다.
• 화살표 함수는 본질적으로 익명이므로 이름 식별자가 없지만 변수에 할당하면 기능 이름이 변수에서 유추 할 수 있습니다. function 화살표 함수의 {} 키워드는 호출되는 곳이 아닌 화살표 함수의 닫힌 컨텍스트를 사용자 정의하기 위해 그 값을 캡처하므로 외부 return에 결합 해야하는 전통적인 기능 표현식에 적합합니다. 컨텍스트 조건.
화살표 함수는 모든 경우, 특히 객체의 방법 또는
• 생성자를 사용할 때 어휘
바인딩이 있고
• 객체가 누락되기 때문에 모든 경우에 적합하지 않습니다.
,
• , this, this,
, , , 및
• 와 같은 배열 메소드와 함께 화살표 함수를 사용하면 가독성과 단순성을 향상시킬 수 있습니다. , 그러나 특정 상황 에서이 작업에 적합한 도구인지 확인하려면주의를 기울여야합니다. function this 화살표 함수 구문 : 정기적 인 함수를 다시 작성하십시오 arguments 기능은 액션 수행 또는 값을 반환하는 등 프로그램에서 발생해야 할 일을 달성하기 위해 유용한 지침을 저장할 수있는 레시피와 같습니다. 기능을 호출하면 레시피에 포함 된 단계를 수행 할 수 있습니다. 레시피를 반복해서 다시 작성하지 않고 함수를 호출 할 때 마다이 작업을 수행 할 수 있습니다.
다음은 함수를 선언하고 javaScript로 호출하는 표준 방법입니다.
• 다음과 같은 함수 표현식과 동일한 함수를 쓸 수도 있습니다. .map() JavaScript 화살표 함수는 항상 표현식입니다. 지방 화살표 표기법을 사용하여 위의 함수를 화살표 함수 표현식으로 다시 작성하는 방법은 다음과 같습니다. .sort() 장점은 다음과 같습니다
  코드의 한 줄만
no 키워드
• no 키워드
  곱슬 형 괄호 안 function
• JavaScript 에서이 기능은 "일등석 시민"입니다. 변수에 함수를 저장하고, 다른 기능에 인수로 전달하고, 다른 함수의 값으로 반환 할 수 있습니다. JavaScript 화살표 기능 으로이 모든 것을 수행 할 수 있습니다. return 브라켓 구문 없음 위의 예에서는 함수에 매개 변수가 없습니다. 이 경우 지방 화살표 (= & gt;) 기호 앞에 빈 브래킷 세트 () 세트를 추가해야합니다. 여러 매개 변수가있는 함수를 만들 때도 마찬가지입니다.
그러나 매개 변수가 하나만 있으면 브래킷을 생략 할 수 있습니다 (이를 수행 할 필요는 없지만 가능) : .
• 그러나 조심하십시오. 예를 들어, 기본 매개 변수를 사용하기로 결정한 경우 괄호 안에 포함시켜야합니다. {} 단지 당신이 할 수 있기 때문에 당신이해야한다는 의미는 아닙니다. 가벼우면서도 친절한 풍자로 카일 심슨 (Kyle Simpson) ( "You No No Know JS"의 저자)은이 흐름도에 괄호를 생략하는 것에 대한 그의 생각을 넣었습니다. (유량 차트는 여기에 삽입되어야하지만 그림을 직접 삽입 할 수 없으므로 여기에 생략됩니다)
암시 적 반환 기능 본문에 표현이 하나만있을 때 ES6 화살표 구문을 더 간결하게 만들 수 있습니다. 모든 것을 한 줄에 넣고 곱슬 버팀대를 제거한 다음

키워드를 제거 할 수 있습니다.

당신은 위의 예에서 이러한 깔끔한 코드 라인이 어떻게 작동하는지 보았습니다. 참조에 대한 또 다른 예제를 알려 드리겠습니다. OrderByLikes () 함수의 함수는 이름입니다. 가장 많은 숫자의 순서대로 배열 된 Netflix 시리즈 객체의 배열을 반환합니다.

이것은 멋지지만 코드의 가독성에주의하십시오. 특히 코드 라인과 브랜치가없는 ES6 화살표 구문을 사용하여 많은 화살표 기능을 정렬 할 때 다음과 같이 다음과 같이하십시오.

> 거기서 무슨 일이 있었나요? 정기적 인 기능 구문을 사용해보십시오

이제 외부 함수 인사말에 매개 변수 인사말을 가지고 익명의 함수를 반환하는 방법을 빠르게 이해할 수 있습니다. 결과적 으로이 내부 함수에는 이름이 이름이라는 매개 변수가 있으며 인사말 및 이름 값을 사용하여 문자열을 반환합니다. 기능을 호출하는 방법은 다음과 같습니다

이 암시 적 반환 오류에 주목하십시오 JavaScript 화살표 함수에 여러 문장이 포함 된 경우 모든 진술을 곱슬 괄호로 둘러싸고

키워드를 사용해야합니다.

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

다음 코드 에서이 함수는 Netflix 시리즈 제목과 요약이 포함 된 객체를 작성합니다 (Netflix 댓글은 Rotten Tomato 웹 사이트에서) : . <p> 함수의 화살표 함수는 일련의 문을 통해 확장되고 마지막으로 객체를 반환합니다. 이것은 기능 본문 주위에 곱슬 버팀대를 사용하는 것이 불가피합니다. </p> <you> 또한 곱슬 버팀대를 사용하고 있기 때문에 암시 적 반환은 옵션이 아닙니다. 키워드를 사용해야합니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;const sayHiStranger = function () { return 'Hi, stranger!' }&lt;/code&gt;</pre> 함수 <p>가 암시 적 반환을 사용하여 객체 문자 그럴을 반환하면 괄호 안에 객체를 동봉해야합니다. JavaScript 엔진이 실수로 객체의 괄호를 함수의 교정기에 구문 분석하기 때문에 그렇게하지 않으면 오류가 발생합니다. 위에서 방금 알 수 있듯이 화살표 기능에서 곱슬 브레이스를 사용할 때 <em> 키워드를 생략 할 수 없습니다. </em> <version version> 이전 코드의 짧은 버전은이 구문을 보여줍니다 : <code>return 당신은 화살표 기능을 지정할 수 없습니다 키워드와 매개 변수 목록 사이에 이름 식별자가없는 함수는 익명 함수 라고합니다. 일반 익명 함수 표현식이 어떻게 보이는지는 다음과 같습니다.

화살표 함수는 모두 익명 함수입니다

ES6에서 시작하여 변수와 메소드는 속성을 ​​사용하여 구문 위치를 기준으로 익명 함수의 이름을 유추 할 수 있습니다. 따라서 값을 확인하거나 오류를보고 할 때 기능을 인식 할 수 있습니다.

AnonymousArrowfunc : 로 확인하십시오

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

이 추론 된

속성은 위의 예와 같이 익명 함수가 변수에 할당 될 때만 존재합니다. 익명 함수를 콜백 함수로 사용하면이 실용적인 기능이 손실됩니다. 이것은 다음 시연으로 설명되며,

메소드의 익명 함수는

속성을 ​​사용할 수 없습니다. function 그 이상. 이 추론 된 속성은 여전히 ​​함수 내에서 함수를 참조 할 수있는 적절한 식별자로 사용할 수 없습니다 (예 : 재귀, 무례한 이벤트 등). 화살표 기능의 본질적인 익명 성은 Kyle Simpson이 다음과 같이 자신의 견해를 표현하게합니다.

익명 함수는 프로그램에서 자주 사용하기에 적합하지 않다고 생각하기 때문에 = & gt; 화살표 기능 양식을 사용하는 것을 좋아하지 않습니다. —— "당신은 JS를 모릅니다"

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

이 키워드를 처리하는 방법 화살표 기능에서 가장 중요한 것은

키워드를 어떻게 처리하는지 기억하는 것입니다. 특히 화살표 함수 내부의 키워드는 다시 반드리지 않습니다.

이 의미를 설명하려면 다음 데모를 확인하십시오. (코드 펜을 여기에 삽입해야하지만 코드 펜을 직접 삽입 할 수 없으므로 여기에 생략됩니다)

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

. 이것은 버튼입니다. 버튼을 클릭하면 리버스 카운터가 5에서 1까지 트리거됩니다. 버튼 자체에 표시됩니다.

name 메소드의 이벤트 핸들러가 화살표 함수가 아닌 일반 익명 함수 표현식 인 방법에 유의하십시오. 왜? 함수를 로그인하면 를 로그인하면 리스너가 첨부 된 상태에서 버튼 요소를 참조하는 것을 볼 수 있습니다. 이는 정확히 예상 결과이며 프로그램이 계획대로 작동하는 데 필요한 것입니다.

Firefox Developer Tools Console에서 다음과 같이 보입니다. 그러나 일반 기능을 다음과 같이 화살표 함수로 교체 해보십시오.

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

지금, this는 더 이상 버튼을 인용하지 않습니다. 대신, 그것은 창 객체를 참조합니다. 이것은 버튼을 클릭 한 후 버튼에 클래스를 추가하려면 다음 예제와 같이 코드가 작동하지 않음을 의미합니다.

콘솔의 오류 메시지는 다음과 같습니다. (그림은 여기에 삽입되어야하지만 그림을 직접 삽입 할 수 없으므로 여기에 생략됩니다)

. JavaScript에서 화살표 함수를 사용하면 키워드의 값이 리베이트되지 않습니다. 부모의 범위에서 물려받습니다 (이를 어휘 범위라고합니다). 이 특별한 경우에, 문제의 화살표 함수는 글로벌 범위에있는 this 메소드에 대한 인수로 전달됩니다. 따라서 함수 핸들러의 는 또한 전역 범위, 즉 창 객체에 바인딩됩니다.

따라서 프로그램에서 시작 버튼을 참조하려면 올바른 방법은 화살표 기능이 아닌 일반 기능을 사용하는 것입니다.

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

익명 화살표 함수 다음에 주목해야 할 것은 위의 데모에서

메소드의 코드입니다. 여기서도 익명 기능도 찾을 수 있지만 이번에는 화살표 기능입니다. 왜?

일반 함수를 사용하는 경우

의 값은 다음과 같습니다. this 버튼 요소일까요? 별말씀을요. 창 객체가 될 것입니다! (그림은 여기에 삽입되어야하지만 그림을 직접 삽입 할 수 없으므로 여기에 생략됩니다) startBtn.addEventListener() 실제로 this가 에 대한 인수로 전달되는 결합되지 않거나 글로벌 함수에 있기 때문에 컨텍스트가 바뀌 었습니다. 따라서 키워드의 값도 이제 전역 범위에 묶여 있기 때문에 변경됩니다.

이 경우 일반적인 요소는 키워드의 값을 저장하여 예상 요소를 계속 참조 할 수 있도록 다른 변수를 포함시키는 것입니다.

당신은 또한 this를 사용할 수 있습니다.이 문제를 해결할 수도 있습니다.

화살표 함수를 사용하여 문제가 완전히 사라졌습니다. 다음은 화살표 함수를 사용할 때

의 값입니다.

(그림은 여기에 삽입되어야하지만 그림을 직접 삽입 할 수 없으므로 여기에 생략됩니다)

이번에는 콘솔이 버튼을 녹음했습니다. 이것이 우리가 원하는 것입니다. 실제로 프로그램은 버튼 텍스트를 변경하므로 버튼 요소를 참조하려면 .setInterval()가 필요합니다.

화살표 함수 에는 자체

컨텍스트 가 없습니다. 그들은 부모의 this 가치에서 물려받으며,이 기능 때문에 위의 상황에서 탁월한 선택이되기 때문입니다.

JavaScript 화살표 함수는 항상 올바른 도구

가 아닙니다 화살표 함수는 JavaScript 함수를 작성하는 멋진 새로운 방법이 아닙니다. 그것들은 그들 자신의 한계를 가지고 있기 때문에 어떤 경우에는 당신이 그것을 사용하고 싶지 않다는 것을 의미합니다. 이전 데모의 클릭 핸들러가 예를 들었지만 이것이 유일한 것은 아닙니다. 몇 가지 더 확인해 봅시다.

화살표 기능 로서의 화살표 기능 화살표 기능은 객체 방법으로 잘 사용되지 않습니다. 여기 예입니다.

이 netflixseries 객체를 고려하십시오. 여기에는 일부 속성과 몇 가지 방법이 있습니다. 전화

는 현재 좋아요 수가 포함 된 메시지를 인쇄해야합니다.

대조적으로, 메소드를 호출하는 "undefined has nan likes"를 호출하고

메소드를 호출하십시오. 따라서 및

는 각각 물체

및

의 속성을 참조 할 수 없습니다. console.log(netflixSeries.getLikes()) 동일한 문제는 화살표 함수의 어휘 범위에 있습니다. 객체 메소드에서 상위 스코프를 참조하고 있습니다.이 경우 부모 객체 자체가 아닌 창 객체입니다. 즉, NetflixSeries 객체가 아닙니다. console.log(netflixSeries.addLike()) 물론 솔루션은 일반 기능을 사용하는 것입니다.

타사 라이브러리의 화살표 함수 <code class="language-javascript">// 函数声明 function sayHiStranger() { return 'Hi, stranger!' } // 调用函数 sayHiStranger()</code> 에 주목해야 할 또 다른 것은 타사 라이브러리가 일반적으로

값이 유용한 내용을 가리키도록 메소드 호출을 바인딩한다는 것입니다. .getLikes() 예를 들어 jQuery 이벤트 핸들러에서 .addLike()는 바운드 핸들러의 DOM 요소에 액세스 할 수 있습니다. this.title 그러나, 우리가 화살표 함수를 사용한다면 - 우리가 보았 듯이, 자체 this.likes 컨텍스트가 없다 - 우리는 예상치 못한 결과를 얻을 것이다 : . title 여기 vue를 사용하는 추가 예입니다. likes

hook에서 this는 vue 인스턴스에 바인딩되므로 "Hello, World!"

그러나 화살표 함수를 사용하면

가 부모의 범위를 가리 며

속성이없는 것 :

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

.

화살표 함수에는 인수 객체가 없습니다

때로는 불확실한 수의 매개 변수가있는 함수를 만들어야 할 수도 있습니다. 예를 들어, 선호하는 순서대로 좋아하는 Netflix 시리즈를 나열하는 함수를 작성한다고 가정하십시오. 그러나 당신은 당신이 얼마나 많은 시리즈를 포함시키고 싶은지 모른다. JavaScript는 객체를 제공합니다. 이것은 호출 될 때 함수에 전달 된 값을 저장하는 배열과 같은 객체 (전체 배열이 아님)입니다.

화살표 함수를 사용 하여이 기능을 구현하십시오 : this

<code class="language-javascript">// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()</code>

함수를 호출하면 다음 오류 메시지가 표시됩니다. 이것은 화살표 함수에서 객체를 사용할 수 없음을 의미합니다. 실제로 화살표 기능을 일반 함수로 교체하면 문제가 해결 될 수 있습니다.

따라서 arguments 객체가 필요한 경우 화살표 기능을 사용할 수 없습니다.

그러나

<code class="language-javascript">const sayHiStranger = function () {
  return 'Hi, stranger!'
}</code>

가 실제로 동일한 함수를 복사하기 위해 화살표 함수를 사용하고 싶다면 어떻게해야합니까? 당신이 할 수있는 한 가지는 ES6 (...)의 나머지 매개 변수를 사용하는 것입니다. 기능을 다시 작성하는 방법은 다음과 같습니다

arguments 결론 화살표 함수를 사용하면 깨끗한 코드 라인을 작성하고 암시 적 반환을 사용하며 결국 기존 메소드를 사용하여 javaScript에서

키워드의 바인딩 문제를 해결하는 것을 잊어 버릴 수 있습니다. 화살표 함수는 , , ,

, 및 와 같은 배열 메소드와도 잘 작동합니다. 그러나 기억하십시오 : 화살표 기능은 일반 JavaScript 함수를 대체하지 않습니다. 화살표 기능이 올바른 도구 인 경우에만 사용하십시오. 화살표 기능에 대해 궁금한 점이 있거나 올바르게 사용하는 데 도움이 필요한 경우 itepoint 친화적 인 포럼을 방문하는 것이 좋습니다. 도와 드릴 준비가 된 지식이 풍부한 프로그래머가 많이 있습니다.

JavaScript 화살표 함수 에 대한 자주 묻는 질문 JavaScript의 화살표 기능은 무엇입니까?

<code class="language-javascript">const sayHiStranger = () => 'Hi, stranger'</code>

다음 구문을 사용하여 화살표 함수를 정의 할 수 있습니다. (매개 변수) => expression. 예를 들면 다음과 같습니다. (x, y) = & gt; x y 두 매개 변수를 가져 와서 합을 반환하는 화살표 함수를 정의합니다.

화살표 기능을 정의하는 방법은 무엇입니까?

다음 구문을 사용하여 화살표 함수를 정의 할 수 있습니다. (매개 변수) => expression. 예를 들면 다음과 같습니다. (x, y) = & gt; x y 두 매개 변수를 가져 와서 합을 반환하는 화살표 함수를 정의합니다.

화살표 기능과 일반 함수의 차이점은 무엇입니까? this 화살표 함수와 일반 함수는 다음 측면에서 다릅니다. 그들은 그들 자신의 가 없습니다. 대신, 그들은 주변 어휘 스코프의 를 사용하여 객체 인스턴스를 생성 할 수 없습니다. 화살표 함수에는 고유 한 .map() 객체가 없습니다. 대신, 그들은 닫힌 범위를 상속합니다. 화살표 기능은 간단한 단일 라인 작업에 더 간단하고 더 적합합니다. .sort() 화살표 함수 사용의 장점은 무엇입니까? .forEach() 화살표 함수는 코드를 더 읽기 쉽게 만들기 위해 간결한 구문을 제공합니다. 또한 주변 컨텍스트를 물려 받기 때문에 .filter() 바인딩의 문제를 피하는 데 도움이됩니다. 이렇게하면 특정 코딩 패턴을 단순화하고 , .reduce()

와 같은 해결 방법의 필요성을 줄일 수 있습니다. 화살표 기능이 모든 경우에 적합합니까?

화살표 함수는 많은 시나리오에 유용하지만 모든 경우에 작동하지 않을 수 있습니다. 짧고 간단한 기능에 가장 적합합니다. 전통적인 기능은 자신의

컨텍스트가 필요한 복잡한 기능 또는 기능에 더 적합 할 수 있습니다.

Arrow 함수를 지원하는 JavaScript 버전은 무엇입니까? this 화살표 기능은 ECMAScript 6 (ES6)에 도입되었으며 최신 브라우저 및 Node.js 버전에서 지원됩니다. 그들은 현대 자바 스크립트 개발에 널리 사용됩니다.

화살표 함수의 한계는 무엇입니까?

화살표 함수는 생성자로 사용될 수없고, 자체

객체를 갖지 않으며, 동적 객체 나 클래스의 메소드에 화살표 함수를 사용할 수 있습니까? 예, 화살표 함수는 객체 또는 클래스의 메소드에 사용될 수 있습니다. 그러나 화살표 함수에는 고유 한

가 없으므로 동적

위 내용은 JavaScript의 화살표 기능 : Fat & Concise Syntax의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!