JavaScript：扩展函数的含义及非可迭代值用扩展语法不报错的原因

嘿，这个问题问得特别到位，我来一步步给你捋明白～

1. 先澄清：你说的“扩展函数”应该是指**扩展运算符（Spread Operator）**吧？ #

咱们常说的...语法就是扩展运算符，在JS里主要有两种使用场景：

• 针对可迭代对象（比如数组、字符串、Map、Set）：把它们的元素展开到数组或者函数参数里，比如[...'hello']会变成['h','e','l','l','o']，Math.max(...[10,20,30])直接拿到30；
• 针对对象：把对象的可枚举自有属性复制到新对象里，比如const newUser = {...oldUser}，用来浅拷贝或者合并对象都很方便。

2. JavaScript中的普通函数是否可迭代？ #

普通函数不是可迭代对象。可迭代对象的核心要求是必须有Symbol.iterator方法，调用这个方法能返回一个迭代器，通过next()一步步取到值。而普通函数默认根本没有这个方法——不信你试试用数组扩展语法[...add]，立马会报错：Uncaught TypeError: add is not iterable。

那你之前用{...add}为啥没问题？因为这是对象扩展语法，和可迭代性完全是两码事，下面重点说这个。

3. 为啥非可迭代实体用对象扩展语法不会报错？ #

这就是关键啦！你混淆了两种扩展语法的规则：对象扩展语法{...x}的逻辑和数组扩展语法[...x]完全不一样。

对象扩展语法的执行逻辑是这样的：

1. 先把x通过ToObject()这个内部操作转换成对象——JS里除了undefined和null（不过ES2018之后这俩也允许，会直接被忽略），几乎所有值都能转成对象：
   • 函数本身就是对象（JS里函数是Function的实例，属于对象类型），所以直接用它；
   • 数字123会被转成Number包装对象（相当于new Number(123)）；
2. 然后遍历这个转换后的对象的可枚举自有属性，把这些属性复制到新对象里。

那为啥你得到的是空对象？因为默认情况下：

• 普通函数的自有属性（比如name、length）都是不可枚举的，所以{...add}复制不到任何属性，结果就是空对象；
• 数字转成Number对象后，它的有用方法都是在原型链上的，自有属性里也没有可枚举的，所以同样得到空对象。

咱们可以做个小实验验证：

// 默认函数扩展：空对象
const obj1 = {...function() {}};
console.log(obj1); // {}

// 给函数加个可枚举的自有属性
const add = (a,b) => a+b;
add.myCustomProp = 42;
const obj2 = {...add};
console.log(obj2); // { myCustomProp: 42 }

// 用数组扩展语法试试：直接报错
const arr = [...add]; // Uncaught TypeError: add is not iterable

这下就清楚了吧？你之前用的是对象扩展语法，它不要求源是可迭代对象，只要能转成对象就行，所以不会报错～

内容的提问来源于stack exchange，提问作者Abhishek