What is arrow function

This article will introduce you to the arrow function of es6. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Arrow functions

ES6 adds the ability to define syntax function expressions using arrow syntax. To a large extent, function objects instantiated by arrow functions behave the same as function objects created by formal function expressions. Arrow functions can be used whenever a function expression is used

    let fn = (a, b) => {
        return a + b    }

    let fun = function (a, b) {
        return a + b    }

    console.log(fn(1, 2))   // 3
    console.log(fun(1, 2))  // 3

Arrow functions are suitable for embedded functions

    let arr = [1, 2, 3, 4];
    console.log(
        arr.map(function (item) {
            return item + 1
        })
    )   // [2,3,4,5]

    console.log(
        arr.map((item) => {
            return item + 1
        })
    )   // [2,3,4,5]

Arrow functions If there is only one parameter, the parentheses can be omitted

    let a = (i) => {
        console.log(i)
    }
    // 当前箭头函数只有一个参数，所以可以省略括号变成以下写法，
    let a = i => {
        console.log(i)
    }

If the arrow function has multiple parameters, use commas to separate them.

    // 如果有多个参数，中间用逗号隔开
    let a = (i, j, k) => {
        console.log(i, j, k)
    }

If there are no parameters, parentheses must be added

    // 如果没有参数，则圆括号必须加
    let a = () => {
        console.log("箭头函数没有参数")
    }

The arrow function can also omit the curly braces, but this will change The behavior of the function is the same as that of a regular function using curly braces. Multiple statements can be written in the function body. If there are no curly braces, it means that there is only one statement after the arrow, and the value of this statement is implicitly returned

    let a = () => {
        console.log("我是带花括号的箭头函数")
        console.log("我是带花括号的箭头函数")
        console.log("我是带花括号的箭头函数")
    }

    let a = () => console.log("我是不带花括号的箭头函数")

    let b = i => i + 1
    console.log(b(1))   // 这个时候箭头函数隐式的返回了i+1的值，所以打印结果为2

Although the syntax of the arrow function is simple, there are still many scenarios where it is not suitable for use. The arrow function cannot use arguments, super and target, nor can it be used as a constructor. The arrow function does not have a prototype attribute.

Recommended learning: Javascript video tutorial

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