ES6 箭头函数 Arrow Function
2023-02-18 16:45:56 时间
前言
ES6 新增了一种新的函数: 箭头函数 Arrow Function
箭头函数相当于匿名函数,简化了函数定义,将原函数的 function 关键字和函数名都删掉,并使用 =>
连接参数和函数体
1. ES6 前定义函数
// function 关键字
function add(num1, num2) {
return num1 + num2;
}
// 函数表达式
const sub = function (num1, num2) {
return num1 - num2;
}
// 对象字面量中定义函数
const obj = {
mul: function (num1, num2) {
return num1 * num2;
},
div(num1, num2) {
return num1 / num2;
}
}
2. ES6 箭头函数语法
当没有参数时, 可以定义为以下形式
const test = () => {
}
当只有一个参数时,括号可以省略。但是,如果这个参数是解构赋值,括号不能省略
const test = res => {
console.log(res);
}
const test = ({ code, msg }) => {
console.log(res);
}
当有多个参数时,括号不能省略
const test = (num1, num2) => {
return num1 + num2;
}
当函数体只有一行语句时,可以省略 {}
const test = (num1, num2) => num1 + num2;
使用箭头函数的场景: 闭包函数
setTimeout(() => {
}, 1000)
3. ES6 箭头函数返回值
当方法体只有一条语句时可以省略花括号
// 普通写法
// const math = (num1, num2) => {
// return num1 + num2
// }
// 省略 {}
const math = (num1, num2) => num1 + num2
当箭头函数需要返回一个数据时,可以使用下面写法
返回值数据类型是 字符串,数组,布尔值,=>
后面直接跟上数据即可,返回值如果是键值对形式的对象,需要使用 ({})
const demo = {
// 返回值是 []
a1: () => [],
// 返回值是 'abc'
a2: () => 'abc',
// 返回值是 true
a3: () => true,
// 返回值是键值对的对象时 需要使用 ({})
// 因为使用 () => {} , {} 会被当作方法体的定界符
a4: () => ({
name: 'liang'
}),
箭头函数直接返回一个数据的写法,多用于 vue,uniapp 开发中
export default {
name: "my-search",
props: {
config: {
type: Object,
default: () => ({
height: 36,
}),
},
},
}
4. 箭头函数中的 this 到底是谁 ?
箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this,直到有 this 的定义
相关文章
- AMD Composable Kernel: 定制化算子融合,大幅提升AI端到端性能
- FLStudio水果21Keygen完整版安装包下载
- 「虚拟员工」加速普及,小冰公司再融10亿元
- OceanBase社区版4.0正式上线,与企业版同等性能,一键安装两分钟跑通Demo
- 沉浸式体验飞鸟的快乐:从一张照片生成3D航拍视频
- 人脸神经辐射场的掩码编辑方法NeRFFaceEditing,不会三维建模也能编辑立体人脸
- 不能飞的风火轮!用AI造出世界最快的鞋子,时速最高11公里
- Diffusion预训练成本降低6.5倍,微调硬件成本降低7倍!Colossal-AI完整开源方案低成本加速AIGC产业落地
- NeurIPS 2022 | 如何正确定义测试阶段训练?顺序推理和域适应聚类方法
- 把Stable Diffusion模型塞进iPhone里,做成APP一分钟出图
- 国产手机芯二代标杆:vivo自研芯片V2出炉,将随X90月底发布
- 元宇宙的前世今生,业内大佬带你一遍过!
- 2022-12-15:寻找用户推荐人。写一个查询语句,返回一个客户列表,列表中客户的推荐人的编号都 不是 2。 对于示例数据,结果为: +------+ | n
- 2022RubyMine激活码(2022RubyMine最新激活码)2022RubyMine激活码
- Xilinx Zynq7035算力指标
- Hybrid模式下的热更新技术方案
- 电商收付通系统,可视化进件二级商户
- TKE/EKS集群通过logrotate切割nginx-ingress访问日志
- 给hash表分片:降低锁粒度,提高锁性能
- React渲染机制