撰写时间:2022 年 7 月 16日
ES6箭头函数
什么是箭头函数:
认识箭头函数:
const add = (x,y) =>{
return x+y;
};
console.log(add(1,1));
箭头函数的结构:
const、let 函数名=(参数1,…)=>函数体
如何将一般函数改写成箭头函数:
//声明形式
function add() {}
// 声明形式->函数表达式形式
const add = function () {};
// 函数表达式形式->箭头函数
const add = () => {};
箭头函数的注意事项:
单个参数:
// 单个参数可以省略圆括号
const add = x => {
return x + 1;
};
console.log(add(1));
无参数或多个参数不能省略圆括号:
const add = () => {//无参数的时候 括号不能省略
return 1 + 1;
};
const add1 = (x, y) => {//多个参数的时候,括号不能省略
return x + y;
};
console.log(add1(1, 1));
单行函数体=>单行函数体可以同时省略 {} 和 return:
const add = (x, y) => {
return x + y;
};
//简写形式 const add=(x,y)=>x+y
console.log(add(1,4));//5
多行函数体不能再化简了:
const add = (x, y) => {
const sum = x + y;
return sum;
};
单行对象 =>如果箭头函数返回单行对象,可以在 {} 外面加上 (),让浏览器不再认为那是函数体的花括号:
const add=(x,y)=>{
return{
sum:x+y
}
}
//简写形式: 在{}外面加上(),让浏览器不再认为那是函数体的花括号
const add = (x, y) => ({
value: x + y
});