Apakah kelebihan fungsi anak panah es6?

Kelebihan fungsi anak panah es6: 1. Sintaks ringkas, seperti "parameter => {statements;};", yang lebih mudah digunakan 2. Keupayaan untuk kembali secara tersirat 3. Fungsi yang lebih intuitif Pengikatan domain dan ini (tidak mengikat ini).

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kita semua tahu bahawa terdapat banyak cara untuk mentakrifkan fungsi dalam JavaScript. Yang paling biasa ialah menggunakan kata kunci fungsi:

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

Pengisytiharan fungsi dan ungkapan fungsi di atas dipanggil fungsi biasa.

Terdapat juga sintaks fungsi anak panah baharu dalam ES6:

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

Berbanding dengan fungsi asal dalam JS, fungsi anak panah yang ditambahkan dalam ES6 adalah lebih ringkas dan lebih mudah digunakan.

Kelebihan fungsi anak panah es6:

1. Sintaks ringkas

Suatu tatasusunan, gandakan dan keluarkannya.

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

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. Ia secara tersirat boleh mengembalikan

dan pulangan yang dipaparkan ialah svg

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

Pulangan tersirat bagi fungsi anak panah ialah fungsi

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

Tambahan: Fungsi anak panah ialah fungsi tanpa nama Jika perlu dipanggil, ia mesti ditetapkan kepada pembolehubah, seperti double3 di atas. Fungsi tanpa nama berguna apabila mengulang dan menyahikat fungsi.

3. Pengikatan skop yang lebih intuitif dan ini (不绑定this)

Sebuah objek, pada asalnya kami menulis ini dalam fungsi ini

Objek , kami asalnya menulis ini dalam fungsi

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

Ini bermakna penunjuk this.hobi adalah betul, dan penunjuk this.name adalah tidak betul; ini menunjuk ke tetingkap

Jika kita ingin menunjukkannya dengan betul, pendekatan asal kita ialah menetapkan pembolehubah untuk menggantikan spa

Ini kerana ini yang diakses dalam fungsi anak panah sebenarnya diwarisi Oleh kerana ini dalam skop induknya, fungsi anak panah sendiri ini tidak wujud, jadi ia bersamaan dengan fungsi anak panah ini ditentukan apabila ia diisytiharkan (skop leksikal), dan titik ini tidak Berubah sebagaimana kaedah dipanggil.

//中心代码
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

[Cadangan berkaitan:

tutorial video javascript

, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kelebihan fungsi anak panah es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!