es6のアロー機能の利点は何ですか?

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

これは、this.hobbies のポインティングが正しく、this.name のポインティングが間違っていることを意味します;

独立した関数が存在するとき実行されると、これは 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 フロントエンド ]

以上がes6のアロー機能の利点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。