← 返回目录

10. arguments / 剩余参数 / 箭头函数

有时候你不知道用户会丢几个料进来——比如「算一组数的最大值」，可能丢 3 个也可能丢 10 个。JS 给你两个工具：老的 arguments 伪数组，和 ES6 更推荐的 ...rest 剩余参数。另外学最常用的箭头函数。

10.1 互动演示（任意个数求和 / 箭头函数简化）

10.2 知识点逐条讲解（配合代码）

① arguments：自动把所有料收集起来（伪数组）

每个函数肚子里都藏着一个 arguments，装着所有丢进来的料。它有 length、能按编号取，但没有 push/pop 这些数组方法，所以叫「伪数组」——长得像数组，其实不是真的。

function getMax() {
    let max = arguments[0];      // 先假设第一个是最大
    for (let i = 1; i < arguments.length; i++) {
        // 挨个比，遇到更大的就换
        if (arguments[i] > max) max = arguments[i];
    }
    return max;                  // 把最大的递出去
}
getMax(1, 99, 23, 66);   // 比完 → 99

	

② ...rest 剩余参数（ES6 推荐，是真数组）

...rest 收进来的是真数组，数组该有的方法它全有，比 arguments 好用。必须放在投料口最后一位。

function sum(a, b, ...rest) {   // 前两个正经接，剩下的全收进 rest
    console.log(a, b);        // 1 2
    console.log(rest);        // [3,4,5]，是真数组
    let total = 0;
    for (let n of rest) total += n;  // 把 rest 挨个加起来
    return total;             // 递出去
}
sum(1, 2, 3, 4, 5);

	

③ 箭头函数：匿名函数的偷懒写法

// 普通函数表达式
let add = function (a, b) { return a + b; };

// 箭头函数完整写法：把 function 换成 =>
let add = (a, b) => { return a + b; };

// 偷懒1：只有一行 return，{} 和 return 都能省
let add = (a, b) => a + b;

// 偷懒2：只有一个投料口，连小括号都能省
let double = n => n * 2;

	

④ 箭头函数两个怪脾气（重点）

如果你拿箭头函数去当对象里的方法，this 就会跑偏。因为箭头函数不自己认 this，它的 this 是从外层「借」来的，而且它没有 arguments。所以它不适合做对象方法、不适合做事件处理；但写小回调、短计算特别顺手。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：写小回调、事件处理里的短函数、求和求最大这种参数个数不定的功能。

② 常见坑：拿箭头函数做对象方法，this 跑偏；用老的 arguments 却想调用数组方法。

③ 怎么解决：参数不定用 ...rest（真数组）；对象方法/事件用普通函数，别用箭头函数。