2021-10-17 箭头函数

箭头函数

1、什么是箭头函数

箭头函数，也称为lambda表达式，是函数声明的一种优化语法

// 1、函数标准声明
function fn() {
    console.log("hello 函数标准声明语法")
	}
		fn()

// 2、表达式函数
let fn2 = function() {
    console.log("hello 函数表达式声明")
	}
		fn2()

// 3、箭头函数
let fn3 = ()=> {
    console.log("hello 箭头函数")
	}
		fn3()

2、箭头函数语法

箭头函数，就是对表达式声明函数的方式进行了语法上的优化

基本语法：

let 函数名称/变量 = (形式参数) => {
     函数内部的代码
     return 返回数据
	}

代码基本操作

// 1. => 完整语法
let fn = ()=> {
    console.log("完整语法函数执行")
	return "返回数据"
	}
let res = fn()
console.log(`函数返回了数据：${res}`)

// 2. => 带参数的完整语法
let fn2 = (name) => {
    console.log(`你好 ${name}`)
    return "函数执行完成"
	}
let res2 = fn2("汤姆")
console.log(`完整语法箭头函数执行完成：${res2}`)

// 3.只有一个参数，可以省略括号
// 如果有多个参数，不能省略括号
let fn3 = name => {
    console.log(`hello 省略了参数括号: ${name}`)
}

fn3("杰瑞")

// 4. 只有一行代码，可以省略花括号
// 如果有多行代码，不可以省略花括号
let fn4 = name => console.log(`hello 简洁语法:${name}`)
fn4("舒克")

// 5. 只有一个参数，只有一行代码，返回值可以省略return
// 如果有多行代码，不可以省略return
// 如果有花括号，即使只有一行代码，也不能省略return
/*
let fn5 = (x) => {
    return Math.pow(x, 3)
	}
*/
let fn5 = x => Math.pow(x, 3)
let res3 = fn5(2)
console.log("2的3次方：", res3)

3、箭头函数this

• this的指向问题在项目开发过程中不太重要，如果出现指向问题可以随时调整
  • this指向错误，可以随时修改this环境
  • this指向错误，可以随时使用call()/apply()修改this指向
• 出现了箭头函数，this指向问题更加精确(和当前this所处的环境有关)
• 普通函数会形成自己的运行环境，函数属于那个对象(挂载到那个对象)，this就指向那个对象
• 箭头函数不会形成自己的独立环境，所以没有独立的this指向，箭头函数内部的this指向依赖箭头函数所在的外部环境，外部环境this指向谁箭头函数内部的this也就跟随指向谁

// 1.全局函数的this
function fn () {
    console.log("全局函数this：", this)
}
fn() // window

let lfn =() => {
    console.log("全局箭头函数this：", this)
}
lfn() // window

// 2. JSON字面量对象
let obj = {
    // ofn:  function() {
    ofn(){
        console.log("对象中的函数this", this)
    },

    lfn : () => {
        console.log("对象中的箭头函数this", this)
    }
}

// obj.ofn()   // obj
// obj.lfn()   // window

// 3.事件函数中
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2")
// btn1.onclick = function() {
//     console.log("事件函数this", this)   // btn1
// }
// btn2.onclick = () => {
//     console.log("事件箭头函数this", this) // window
// }

// 4.闭包函数
// btn1.onclick = function() {
//     setTimeout(function() {
//         console.log("btn1事件中 闭包函数this:", this)     // window
//     })
// }
// btn2.onclick = function() {
//     setTimeout(() => {
//         console.log("btn2事件中 闭包箭头函数this:", this)   // btn2
//     })
// }

btn1.onclick = function() {
    function fn() {
        console.log("完全闭包函数this", this)
    }
    fn()    // window
}  
btn2.onclick = function() {
    let fn = ()=> {console.log("完全闭包箭头函数this", this)}
    fn()    // btn2
}

4、操作案例

使用延展运算符、剩余参数运算符，结合箭头函数，完成员工涨薪操作

// 员工数据
let emps = [
    {name: "汤姆", gender: "男", salary: 3000},
    {name: "杰瑞", gender: "男", salary: 2200},
    {name: "舒克", gender: "男", salary: 6000},
    {name: "贝塔", gender: "男", salary: 8000},
    {name: "迪迦", gender: "男", salary: 4000}
]
// 需求：给每个员工涨薪500
function fn(e) {
    for(var i = 0; i < e.length; i++) {
        e[i].salary += 500
    }
}
// fn(emps)

function fn2(emps) {
    return emps.map(function(value) {
        return {
            ...value,
            salary: value.salary + 500
        }
    })
}

// var e = fn2(emps)

function fn3(emps) {
    return emps.map(value=> {
        return {
            ...value, 
            salary: value.salary + 500
        }
    })
}

var e = fn3(emps)

console.log(e)