ES6 화살표 함수에 대한 간단한 설명

2114 단어 ES6

1. 화살표 함수


화살표 함수는 ES6에 추가된 함수를 정의하는 방식으로 function 방식으로 함수를 정의하는 작법을 간소화했다. 작법이 간편하기 때문에 일부 장면에서 function를 대체할 수 있다.

2. 화살표 함수 사용 방법

const str2number = str => Number(str);
// 
const str2number = function (str) {
    return Number(str)
}

화살표 함수는 표현을 더욱 간결하게 한다

3. 화살표 함수 사용에 대한 참고 사항:

  • 화살표 함수에 매개 변수가 필요하지 않거나 여러 개의 매개 변수가 있으면 괄호를 사용하여 매개 변수 부분을 대표한다
    • const sum = (num1,num2) => num1 + num2

const getName = () => 'Kobe'

  • 화살표 함수의 코드 블록 부분이 한 문장보다 많으면 괄호를 사용하여 묶고, 우물은return 문장으로 되돌려줍니다.
    • const findMaxNumber = (...rest) => {
    const maxNumber = Math.max(...rest)
    return maxNumber;
}

     
  • 대괄호가 코드 블록으로 해석되기 때문에 화살표 함수가 개체로 직접 되돌아오면 개체 밖에 괄호를 붙여야 합니다..
    • const getTempitem = id => ({id:id,name:'temp'})
  • 화살표 함수는 변수의 해체와 결합하여 사용할 수 있다
    • const getFullName = ({firstName,lastName}) => firstName + ' ' + lastName

    4. 화살표 함수의 특징

  • 화살표 함수는 자신의this가 없고, 그것의this는 정의할 때 외층의 첫 번째 화살표 함수가 아닌 코드 블록의this를 가리킨다
  • 함수체내의this는 정의된 대상을 영원히 가리키며, 실행할 때의this가 아니라,call과apply를 사용해도this지향을 바꿀 수 없습니다
  • 화살표 함수에 자신의this가 없기 때문에 화살표 함수는 구조 함수로 사용할 수 없고 원형 대상에 방법을 추가할 수 없으며 대상이 될 수 없는 방법 속성입니다
  • argumens 대상을 사용할 수 없으며 이 대상은 함수체 내에 존재하지 않습니다.사용하려면rest 매개 변수로 대체할 수 있습니다
  • yield 명령을 사용할 수 없기 때문에 화살표 함수는Generator 함수로 사용할 수 없습니다

    • 화살표 함수를 사용하면 흔히 볼 수 있는 구덩이는this의 지침 문제로 화살표 함수를 구조 함수로 사용하고 원형 대상에 추가하는 방법 등을 포함한다.
    // id 
Array.prototype.findIndex = (id) =>{
    let index = 0;
    // this ， this this， 
    // window， this.forEach undefined
    this.forEach((item,i)=>{
        if(item.id === id){
            index =i;
        }
    })
    return index
}

    5. 화살표 함수의 작용

  • 리셋 함수를 간소화하다
    • // 
[1,2,3].map(function(x){
    return x*x
})
// 
[1,2,3].map(x=>x*x)
  • 화살표 함수는this를 고정화시킬 수 있는데 이런 특성은 봉인 리셋 함수에 매우 유리하다

    • ​​​​​​​
    몇 번 훔쳐보았다.com 기술(II-키보드 단축키)
    JavaScript 인터뷰 코딩 질문 — 1

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage