箭头函数
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)