Rumah > Artikel > hujung hadapan web > Contoh kod amalan fungsi anak panah ES6
Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan penggunaan fungsi anak panah adalah lebih sesuai untuk tempat yang pada asalnya memerlukan fungsi tanpa nama, dan Ia tidak boleh digunakan sebagai pembina. Mari kita lihat. Saya harap ia akan membantu semua orang.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
Sintaks ungkapan fungsi anak panah adalah lebih ringkas daripada ungkapan fungsi dan tidak mempunyai ini, argumen, super atau new.target sendiri. Ungkapan fungsi anak panah lebih sesuai di mana fungsi tanpa nama akan diperlukan, dan ia tidak boleh digunakan sebagai pembina. ---- 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
kenapa? fungsi yang dinamakan harus digunakan
// 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; });
mengapa? Permulaan dan penghujung fungsi lebih jelas
// 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;Kesimpulan mudah
tutorial video javascript, bahagian hadapan web]
Atas ialah kandungan terperinci Contoh kod amalan fungsi anak panah ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!