ES6 箭头函数易出错细节

最新推荐文章于 2023-12-13 16:53:35 发布

weixin_33739523

最新推荐文章于 2023-12-13 16:53:35 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cckui/p/9915655.html

本文深入解析了ES6中箭头函数的基本语法与使用规范，包括其简洁的语法特性、this关键字的行为变化及对象字面量的正确书写方式，通过实例对比帮助理解箭头函数与传统函数表达式的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

箭头函数表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或 new.target。

箭头函数基本语法

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

写法对比

let fun1 = (a, b) => a + b    // 正确写法
let fun2 = (a, b) => { a + b }  // 错误写法
let fun3 = (a, b) => { return a + b }    // 正确写法

console.log(fun1(1,2), fun2(1,2), fun3(1,2)) // 3 undefined 3

当箭头函数后面的函数声明部分只有一行时，可以不加大括号，并且默认return
当箭头函数后面的函数声明部分加大括号时，必须添加return

注意

在ES6中，由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

let fun1 = id => { id: id, name: "jack" };

console.log(fun1(111)); // 报错

let fun2 = id => ({ id: id, name: "jim" });

console.log(fun2(222));    // 不报错,   {id: 222, name: "jim"}

let fun3 = id => {
  return { id: id, name: "jack" };
}

fun3(333); // 不报错，  {id: 333, name: "jim"}

转载于:https://www.cnblogs.com/cckui/p/9915655.html