이 기사에서는 화살표 함수 적용과 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 화살표 함수 표현식은 원래 익명 함수가 필요한 곳에 더 적합하며 생성자로 사용할 수 없습니다. 함께 보시고, 모두에게 도움이 되었으면 좋겠습니다.
[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]
화살표 함수 표현식의 구문은 함수 표현식보다 더 간결하며 자체 this, 인수가 없습니다. , 슈퍼 또는 새로운 .target. 화살표 함수 표현식은 익명 함수가 필요하고 생성자로 사용할 수 없는 경우에 더 적합합니다. ---- MDN
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于:(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时,圆括号是可选的: (singleParam) => { statements } singleParam => { statements } // 没有参数的函数应该写成一对圆括号。 () => { statements }
let add1 = (num1, num2) => { num1 + num2 }; let add2 = (num1, num2) => { return num1 + num2 }; let add3 = (num1, num2) => (num1 + num2); let add4 = (num1, num2) => num1 + num2; console.log(add1(2, 3)); // undefined console.log(add2(2, 3)); // 5 console.log(add3(2, 3)); // 5 console.log(add4(2, 3)); // 5
//加括号的函数体返回对象字面量表达式: let func = () => ({foo: 'bar'}) console.log(func()); // {foo: 'bar'} //支持剩余参数和默认参数 (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } //同样支持参数列表解构 let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
왜? 구문이 더 간결하고 기대에 더 부합합니다
함수 로직이 상당히 복잡하다면 명명된 함수를 사용해야 합니다
// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});
// bad [1, 2, 3].map(number => { const nextNumber = number + 1; `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map(number => `A string containing the ${number}.`); // good [1, 2, 3].map((number) => { const nextNumber = number + 1; return `A string containing the ${nextNumber}.`; }); // good [1, 2, 3].map((number, index) => ({ [index]: number, })); // No implicit return with side effects function foo(callback) { const val = callback(); if (val === true) { // Do something if callback returns true } } let bool = false; // bad foo(() => bool = true); // good foo(() => { bool = true; });
함수의 시작과 끝이 더 명확해지죠
// bad['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ));// good['get', 'post', 'put'].map(httpMethod => ( Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, )));
// bad[1, 2, 3].map((x) => x * x);// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].map(number => ( `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`));// bad[1, 2, 3].map(x => { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});
// badconst itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// badconst itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// goodconst itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// goodconst itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height > 256 ? largeSize : smallSize;
화살표 함수는 new를 사용하여 생성자의 인스턴스를 생성할 수 없지만 일반 함수는 생성자를 생성할 수 있습니다(왜냐하면 화살표 함수가 생성될 때 프로그램은 생성자를 생성하지 않기 때문입니다) 즉, 생성 능력이 없고 사용 후 폐기됩니다. 재사용되는 일반 함수와 달리 생성자 프로토타입이 필요하지 않습니다. 즉, 프로토타입 속성이 자동으로 생성되지 않습니다.)
프로그램은 화살표 함수에 대한 인수 개체를 생성하지 않습니다
일반 함수에서 이것은 동적이지만 화살표 함수에서는 화살표 함수를 단단히 감싸는 개체를 가리킵니다(정의 시 결정됨)
화살표 함수는 바인드, 호출, 값 적용을 통해 이를 변경할 수 없지만 여전히 이러한 메소드를 호출할 수 있습니다(그러나 이 값은 이러한 메소드에 의해 제어되지 않습니다)
[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트엔드]
위 내용은 ES6 화살표 함수 연습 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!