登录
首页 >  文章 >  前端

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

时间:2026-04-11 21:36:36 129浏览 收藏

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

javascript展开运算符是什么_它在函数调用中有什么作用

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

让数组变成多个参数

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

Math.max.apply(null, [1, 5, 3]) // 5

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

Math.max(...[1, 5, 3]) // 5

它等价于 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 节点列表

不能用于普通对象(除非在对象字面量中)

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

myFunc({...obj}) // ❌ 错误:对象不可迭代(在函数调用中)

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

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

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>