Quels sont les avantages des fonctions fléchées es6 ?

Les avantages des fonctions fléchées es6 : 1. Une syntaxe concise, telle que "parameters => {statements;};", qui est plus pratique à appliquer ; 2. Possibilité de revenir implicitement 3. Portée plus intuitive et cette liaison ( ne liez pas cela).

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Nous savons tous qu'il existe de nombreuses façons de définir des fonctions en JavaScript. Le plus courant consiste à utiliser le mot-clé function :

// 函数声明
function sayHi(someone) {
  return `Hello, ${someone}!`;
}
// 函数表达式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}

La déclaration de fonction et l'expression de fonction ci-dessus sont appelées fonctions régulières.

Il existe également la nouvelle syntaxe des fonctions fléchées dans ES6 :

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}

Par rapport aux fonctions du JS d'origine, les fonctions fléchées ajoutées dans ES6 sont plus concises et plus pratiques à appliquer.

Avantages de la fonction flèche es6 :

1. Syntaxe concise

Un tableau, doublez-le puis affichez-le.

删掉一个关键字，加上一个胖箭头；
没有参数加括号，一个参数可选择；
多个参数逗号分隔，

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. Peut retourner implicitement

Le retour affiché est svg

const double3 = numbers.map(number => {
    return number * 2;  
    //return 返回内容;
})

Le retour implicite de la fonction flèche est la fonction

当你想简单返回一些东西的时候，以下：去掉return和大括号，把返回内容移到一行，较为简洁;
const double3 = numbers.map(number => number * 2);

Plus : La fonction flèche est une fonction anonyme Si elle doit être appelée, elle doit le faire. être affecté à une variable, telle que double3 ci-dessus. Les fonctions anonymes sont utiles lors des fonctions récursives et dissociées.

3. Une liaison plus intuitive de la portée et de ceci (不绑定this)

Un objet, c'est ainsi que nous l'avons écrit à l'origine dans la fonction

Un objet, c'est ainsi que nous l'avons écrit à l'origine dans la fonction

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 signifie que le pointage de this.hobbies est correct, mais le pointage de this.name est incorrect ;

Lorsqu'une fonction indépendante est exécutée, cela pointe vers window

Si nous voulons pointer correctement, notre approche originale consiste à définir une variable substitution 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

C'est parce que le this accessible dans la fonction flèche est en fait hérité du this dans sa portée parent. Le this de la fonction flèche n'existe pas, il est donc équivalent au this de la fonction flèche lorsqu'il est déclaré. est certain (portée lexicale) que le pointeur de this ne changera pas avec l'appel de la méthode.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!