JavaScript展开运算符(…)用于将可迭代对象或对象展开为独立元素或属性,支持数组/对象合并、浅拷贝、函数传参、解构等操作,但仅限可迭代对象且仅浅层展开。

JavaScript 的展开运算符(Spread Operator)是三个连续的英文句点 …,它能把可迭代对象(如数组、字符串、类数组对象)或对象“展开”成独立的元素或属性,常用于复制、合并、解构等操作。
数组的展开与合并
展开运算符最直观的用途是把数组“打散”成单个元素,方便传参或拼接。
替代 concat() 合并数组:const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2]; // [1, 2, 3, 4] 函数调用时展开参数:Math.max(...[2, 5, 1]) // 等价于 Math.max(2, 5, 1) → 5 快速浅拷贝数组:const copy = [...originalArray];(注意:只复制第一层)
对象的展开与合并
对对象使用展开运算符,会将其自身可枚举属性(不含原型链)展开为键值对,常用于对象合并或添加新属性。
合并多个对象,后出现的同名属性会覆盖前面的:const a = { x: 1 }; const b = { y: 2, x: 99 }; const obj = { ...a, ...b }; // { x: 99, y: 2 } 添加新属性或覆盖已有属性:{ ...user, name: 'Alice', active: true } 实现对象浅拷贝:const clone = { ...originalObj };
替代 apply 和简化解构
展开运算符让一些传统写法变得更简洁自然。
立即学习“Java免费学习笔记(深入)”;
不再需要 func.apply(null, args),直接写 func(...args) 配合解构,提取剩余属性:const { id, ...rest } = { id: 1, name: 'Tom', age: 30 }; // rest → { name: 'Tom', age: 30 } 函数参数中接收不定数量参数(与 rest 参数配合):function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2, 3); // 6
注意事项和常见误区
展开运算符不是万能的,用错场景会出问题。
只能用于**可迭代对象**(Array、String、Map、Set 等),对普通对象直接展开会报错(除非在对象字面量中使用) 展开的是**浅层结构**,嵌套数组或对象不会被递归展开或拷贝 不能展开 null 或 undefined,否则抛出 TypeError 与 rest 参数写法相同(...),但语义相反:在等号右边或函数调用处是展开,在函数参数或解构左侧是收集(rest)
基本上就这些。掌握展开运算符能写出更简洁、可读性更强的代码,尤其在处理数组合并、对象配置、函数传参等日常任务时非常实用。
以上就是javascript的展开运算符是什么_它有哪些应用场景?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542766.html
微信扫一扫
支付宝扫一扫