箭头函数的艺术：如何优雅的写好JS代码

加洛斯2025-12-04 11:39

大家好，我是加洛斯。作为一名程序员👨‍💻，我深深信奉费曼学习法------教，是最好的学 📚。这里是我的知识笔记与分享，旨在把复杂的东西讲明白。如果发现有误🔍，万分欢迎你帮我指出来！废话不多说，正文开始 👇

一、箭头函数基础概念

1.1 什么是箭头函数

箭头函数是ES6引入的一种新的函数表达式语法。它使用 => 符号定义，具有更简洁的语法和特定的行为特性。

1.2 基础语法

我们先看一下传统的函数是如何写的

javascript 复制代码

//无参
function init() {
  return "基础函数"
}
//有参
const addArrow = function(a, b) {
  return a + b;
};

我们在看一下箭头函数的写法

javascript 复制代码

//无参
const init = () => {
  return "基础函数"
}
//有参
const addArrow = (a, b) => {
  return a + b;
};

或者更为简洁，当函数体只有一条return语句时，可以省略return与大括号

javascript 复制代码

const init = () => "基础函数"

const addArrow = (a, b) => a + b;

二、箭头函数的各种形式

2.1 参数处理

javascript 复制代码

// 1. 单个参数 - 可以省略括号
const square = (x)=>x * x;
const square = x => x * x;

// 2. 多个参数 - 必须使用括号
const multiply = (x, y) => x * y;

// 3. 无参数 - 必须使用空括号
const getRandom = () => Math.random();

// 4. 默认参数
const greet = (name = 'Guest') => `Hello, ${name}!`;

// 5. 剩余参数
const sumAll = (...numbers) => 
  numbers.reduce((total, num) => total + num, 0);

// Vue3组合式API中的使用
export default {
  setup() {
    const numbers = ref([1, 2, 3, 4, 5]);
    
    // 使用箭头函数计算属性
    const squaredNumbers = computed(() => 
      numbers.value.map(num => num * num)
    );
    
    // 使用箭头函数方法
    const addNumber = newNumber => {
      numbers.value.push(newNumber);
    };
    
    return {
      numbers,
      squaredNumbers,
      addNumber
    };
  }
};

2.2 函数体形式

javascript 复制代码

// 1. 单行表达式 - 隐式返回（即当函数体只有一条return语句时，可以省略return与大括号）
const double = x => x * 2;

// 2. 多行代码块 - 需要显式return
const processUser = user => {
  const name = user.name.toUpperCase();
  const age = user.age + 1;
  return { name, age };
};

// 3. 返回对象字面量 - 需要用括号包裹
const createUser = (name, age) => ({ 
  name, 
  age, 
  id: Date.now() 
});