箭头函数是什么-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

本篇文章给大家介绍一下es6的箭头函数。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

箭头函数

ES6新增了使用箭头语法定义语法函数表达式的能力。很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何时候使用函数表达式的地方，都可以使用箭头函数

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

箭头函数适合嵌入函数

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]

箭头函数如果只有一个参数，可以省略括号

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

箭头函数如果有多个参数，中间用，逗号隔开

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

如果没有参数，则圆括号必须加

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

箭头函数也可以省略掉花括号，但这样会改变函数的行为，使用花括号就跟常规函数一样，可以在函数体内写入多条语句，如果不带花括号，那么就说明箭头后面只有一条语句，且隐式的返回这条语句的值

let a = () => {
    console.log("我是带花括号的箭头函数")
    console.log("我是带花括号的箭头函数")
    console.log("我是带花括号的箭头函数")
}
 
let a = () => console.log("我是不带花括号的箭头函数")
 
let b = i => i + 1
console.log(b(1))   // 这个时候箭头函数隐式的返回了i+1的值，所以打印结果为2