What are the advantages of es6 arrow functions?

es6 Advantages of arrow functions: 1. Concise syntax, such as "parameters => {statements;};", which is more convenient to apply; 2. Ability to return implicitly; 3. More intuitive function Binding of domain and this (does not bind this).

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

We all know that there are many ways to define functions in JavaScript. The most common one is to use the function keyword:

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

The function declaration and function expression above are called regular functions.

There is also the new arrow function syntax in ES6:

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

Compared with the functions in the original JS, the arrow functions added in ES6 are more concise and more convenient to apply.

Advantages of es6 arrow function:

1. Concise syntax

Take an array and double it before outputting it.

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

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. Able to return implicitly

The displayed return is svg

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

The implicit return of arrow function is function

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

Supplement: Arrow function is If an anonymous function needs to be called, it must be assigned to a variable, such as double3 above. Anonymous functions are useful when recursing and unbinding functions.

3. A more intuitive binding of scope and this (Does not bind this)

An object, we originally wrote this# in the function

##An object, we originally wrote this in the function

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 means that the pointing of this.hobbies is correct, and the pointing of this.name is incorrect;

When an independent function is executed, this points to window

If we want to point correctly, our original approach is to set a variable to replace 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 is because this is accessed in the arrow function In fact, it is inherited from this in its parent scope. The arrow function's own this does not exist. This is equivalent to the arrow function's this being determined when it is declared (lexical scope). The point of this It does not change when the method is called.

【Related recommendations:

javascript video tutorial, web front-end】

The above is the detailed content of What are the advantages of es6 arrow functions?. For more information, please follow other related articles on the PHP Chinese website!