es6 화살표 기능의 장점은 무엇입니까?

es6 화살표 함수의 장점: 1. 적용하기 더 편리한 "매개변수 => {statements;};"와 같은 간결한 구문 2. 암시적 반환 기능 3. 더 직관적인 범위 및 이 바인딩( 이것을 묶지 마십시오).

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

우리 모두는 JavaScript에서 함수를 정의하는 방법이 다양하다는 것을 알고 있습니다. 가장 일반적인 것은 function 키워드를 사용하는 것입니다:

// 函数声明
function sayHi(someone) {
  return `Hello, ${someone}!`;
}
// 函数表达式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}

위의 함수 선언과 함수 표현식을 일반 함수라고 합니다.

ES6에는 새로운 화살표 함수 구문도 있습니다:

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}

JS의 원래 함수에 비해 ES6에 추가된 화살표 함수는 더 간결하고 적용하기 더 편리합니다.

es6 화살표 함수의 장점:

1. 간결한 구문

배열로 두 배로 늘려 출력합니다.

删掉一个关键字，加上一个胖箭头；
没有参数加括号，一个参数可选择；
多个参数逗号分隔，

const numbers = [5,6,13,0,1,18,23];
//原函数
const double = numbers.map(function (number) {
    return number * 2;
})
console.log(double);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//箭头函数     去掉function, 添加胖箭头
const double2 = numbers.map((number) => {
    return number * 2;
})
console.log(double2);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//若只有一个参数，小括号能够不写（选择）
const double3 = numbers.map(number => {
    return number * 2;
})
console.log(double3);
//如有多个参数，则括号必须写；若没有参数，（）须要保留
const double4 = numbers.map((number,index) => {
    return `${index}:${number * 2}`;  //模板字符串
})
console.log(double4);

2. 암시적으로 반환할 수 있습니다

표시된 반환은 svg

const double3 = numbers.map(number => {
    return number * 2;  
    //return 返回内容;
})

화살표 함수의 암시적 반환은 function

当你想简单返回一些东西的时候，以下：去掉return和大括号，把返回内容移到一行，较为简洁;
const double3 = numbers.map(number => number * 2);

추가: 화살표 함수는 호출해야 하는 경우 할당되어야 합니다. double3 위와 같은 변수입니다. 익명 함수는 함수를 반복하고 바인딩 해제할 때 유용합니다.

3. 보다 직관적인 스코프와 this 바인딩(不绑定this)

객체, 원래 함수에 이렇게 썼어요

객체, 원래 함수에 이렇게 썼어요

const Jelly = {
    name:'Jelly',
    hobbies:['Coding','Sleeping','Reading'],
    printHobbies:function () {
        this.hobbies.map(function (hobby) {
            console.log(`${this.name} loves ${hobby}`);
        })
    }
}
Jelly.printHobbies();
// undefined loves Coding
// undefined loves Sleeping
// undefined loves Reading

This It this.hobbies의 지정은 정확하지만 this.name의 지정은 올바르지 않음을 의미합니다.

독립적인 함수가 실행될 때 this는 window를 가리킵니다

올바르게 지정하려면 원래 접근 방식은 변수를 설정하는 것입니다. 대체 spa

//中心代码
printHobbies:function () {
    var self = this; // 设置变量替换
    this.hobbies.map(function (hobby) {
        console.log(`${self.name} loves ${hobby}`);
    })
}
Jelly.printHobbies();
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading
在ES6箭头函数中，咱们这样写code
//中心代码
printHobbies:function () {
   this.hobbies.map((hobby)=>{
       console.log(`${this.name} loves ${hobby}`);
   })
}
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading

이는 화살표 함수에서 액세스한 this가 실제로 상위 범위의 this에서 상속되었기 때문입니다. 따라서 선언되면 화살표 함수의 this와 동일합니다. . this의 포인터가 메서드 호출에 따라 변경되지 않는다는 것은 확실합니다(어휘 범위).

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 es6 화살표 기능의 장점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!