JavaScript展开运算符...用法详解

JavaScript中的展开运算符（...）是提升函数调用灵活性与代码可读性的利器——它能将数组、字符串、Set等可迭代对象“打平”为独立参数，轻松替代繁琐的apply()调用，支持与普通参数自由组合（如`func('a', ...arr, 'z')`），且天然兼容DOM节点列表、去重集合等实际场景，让原本笨拙的参数传递变得直观、简洁又富有表现力。

JavaScript 展开运算符（Spread Operator）是三个英文句点 ...，它能把可迭代对象（如数组、字符串、类数组对象）或对象“展开”成独立的元素。在函数调用中，它的核心作用是**把一个数组或类数组结构“打平”，作为多个独立参数传给函数**，替代了过去常用的 apply() 方法。

让数组变成多个参数

以前调用函数时，如果参数已经存在数组里，得这样写：

现在用展开运算符更直观：

它等价于 Math.max(1, 5, 3)，数组被“拆开”，每个元素变成一个实参。

可以和其他参数混合使用

展开运算符不一定要独占全部参数，可以和普通参数、其他展开表达式组合：

• myFunc('a', ...arr, 'z') —— 开头一个固定值，中间展开数组，结尾再加一个值
• console.log(...[1, 2], ...[3, 4]) → 输出 1 2 3 4
• 但注意：展开运算符只能出现在**实参列表的最后位置**（除非是解构赋值场景，那是另一回事）

适用于任何可迭代对象

不只是数组，只要是实现了迭代协议的对象都可以展开：

• console.log(...'hi') // h i（字符串逐字符展开）
• console.log(...new Set([1, 2, 2])) // 1 2（自动去重后展开）
• console.log(...document.querySelectorAll('div')) 可直接传给函数处理 DOM 节点列表

不能用于普通对象（除非在对象字面量中）

单独对普通对象使用展开运算符会报错：

但这是常见误解——在函数调用中，... 只能作用于可迭代值；而 {...obj} 是对象展开，只在对象字面量或解构中合法，和函数调用无关。

今天关于《JavaScript展开运算符...用法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！