JS 箭头函数-语法

152 阅读2分钟

箭头函数

任何可以使用函数表达式(匿名函数)的地方,都可以使用箭头函数来代替
作用:可以让函数表达式(匿名函数)写法变得更加简洁
语法1:将function关键字省略,()与{}之间使用=>

image.png
语法2:只有一个形参 小括号 可以省略

image.png
语法3:函数体 里面 只有一行代码 大括号可以省略

image.png
语法4:函数体 里面 只有一行代码 是将结果return,return关键字可以省略

image.png
语法5:函数体如果需要返回对象 需要给对象加括号

image.png
总结:
1.任何可以使用函数表达式的地方,都可以使用箭头函数
2.箭头函数属于表达式函数,因此不存在函数提升
3.箭头函数只有一个参加时可以省略小括号(br) 4.箭头函数函数体只有一行代码可以省略花括号{},并自动做为返回值被返回
5.加括号的函数体返回对象字面量表达式

箭头函数-运用

普通函数有arguments 动态参数? 那么箭头函数中是否有arguments动态参数呢?
箭头函数没有arguments 动态参数,但是有 剩余参数

image.png

箭头函数-this

箭头函数里面的this指向

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值。

image.png
箭头函数不会创建自己的this,它只会从自己的作用域链的上层沿用this。

image.png
在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此DOM事件回调函数为了简便,还是不太推荐使用箭头函数

image.png

解构赋值-数组解构

想要获取数组里面的元素的值? 比如:

image.png
以上代码书写麻烦,此时可以使用解构赋值的方法让代码更简洁

什么是数组解构

数组解构:将数组的单元值快速批量给一些列变量的简洁语法。

基本语法

image.png
1.赋值运算符=左侧的[]用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
2.变量的顺序对应数组单元的位置依次进行赋值操作

image.png

解构赋值-多级对象结构

从下面对象里面 解构出 `mother` `father` `sister`

image.png
思路:先结构出对象的第一层,然后从第一层里面解构出第二层

image.png