极简三分钟ES6 - 箭头函数

精简的函数快递员

想象箭头函数是一位高效的快递员,用最短路径(=>)传递数据

js 复制代码
// 传统函数写法
function add(a, b) {
  return a + b;
}

// 箭头函数写法(直达路线)
const add = (a, b) => a + b;  
console.log(add(1,  2)); // 3(快递直达)

精简规则

单参数可省括号

js 复制代码
const sayHi = name => `你好, ${name}!`;  
sayHi("小明"); // "你好, 小明!"

单行代码自动返回 (无{}时)

js 复制代码
const double = num => num * 2; // 直接返回结果

返回对象需加括号 (避免与{}冲突)

js 复制代码
const getUser = id => ({ id: id, name: "匿名" });

永不迷路的 this

箭头函数最强大的特性------继承外层 this ,解决传统函数的 this 混乱问题

js 复制代码
// 传统函数:this 随调用者变化
const obj1 = {
  name: "对象1",
  print: function() {
    setTimeout(function() {
      console.log(this.name);  // 输出 undefined(this指向window)
    }, 100);
  }
};

// 箭头函数:继承定义时的 this
const obj2 = {
  name: "对象2",
  print: function() {
    setTimeout(() => {
      console.log(this.name);  // 输出 "对象2"(继承print的this)
    }, 100);
  }
};

箭头函数就像带着GPS的快递员,永远记得出发地(定义时的作用域),不因中转站(调用位置)改变路线

一般常见的使用场景

简化回调函数

js 复制代码
// 传统写法
[1, 2, 3].map(function(x) { return x * x; });

// 箭头函数版
[1, 2, 3].map(x => x * x); // [1, 4, 9]

操作数组方法

js 复制代码
const sum = [1, 2, 3].reduce((total, num) => total + num, 0); // 6

固定 this 的场景(如事件监听)

js 复制代码
button.addEventListener("click",  () => {
  console.log(this);  // 始终指向定义时的上下文
});

箭头函数 vs 普通函数

特性 箭头函数 普通函数
this 指向 继承定义时的外层作用域 由调用者决定
构造函数 ❌ 不可用 ✅ 可用
arguments 对象 ❌ 不可用 ✅ 可用
简洁性 ⭐⭐⭐⭐ 极高 ⭐⭐ 较低

牢记

"箭头函数像快递:路线短(语法简),认准出发地(this稳),不接大件货(无构造)。"

相关推荐
bug_kada3 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
stringwu3 小时前
Flutter开发者必备:状态管理Bloc的实用详解
前端·flutter
青晚舟3 小时前
作为前端你必须要会的CICD
前端·ci/cd
hj5914_前端新手3 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
中微子3 小时前
虚拟列表完全指南:从零到一手写实现
前端
jqq6663 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
YaeZed3 小时前
TypeScript6(class类)
前端·typescript
织_网3 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
emojiwoo4 小时前
前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)
前端·交互