es6 アロー関数の利点: 1. 適用するのに便利な「parameters => {statements;};」などの簡潔な構文; 2. 暗黙的に返す機能; 3. より直感的な関数ドメインと this のバインド (this はバインドしません)。
このチュートリアルの動作環境: 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. 簡潔な構文
配列を取得し、出力する前にそれを 2 倍にします。
删掉一个关键字,加上一个胖箭头; 没有参数加括号,一个参数可选择; 多个参数逗号分隔, 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 のより直観的なバインディング (これはバインドしません
)
オブジェクト、最初に関数
## でこれを書きました#オブジェクト、最初は関数でこれを書きました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
//中心代码 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
JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上がes6のアロー機能の利点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。