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 중국어 웹사이트의 기타 관련 기사를 참조하세요!