展开运算符（…）是ES6引入的语法，用于将可迭代对象展开为独立元素，支持数组复制合并、函数参数传递、对象浅拷贝与合并等操作；1. 数组中可用作复制、合并或插入元素；2. 函数调用时可将数组转为参数列表，替代apply；3. ES9支持对象展开，实现对象合并与属性添加；4. 可处理类数组和字符串，但仅支持可迭代对象，对null/undefined会报错，且对象展开为浅拷贝，嵌套属性仍共享引用。
JS展开运算符（Spread Operator）是ES6引入的一个实用语法，用三个点 … 表示，能将可迭代对象（如数组、字符串、类数组对象等）展开为独立的元素。它简洁高效，广泛应用于数组操作、函数调用、对象合并等场景。
1. 数组中的展开运算符
展开运算符最常见于数组处理，可以轻松复制、合并或转换数组。
● 复制数组：
避免引用共享，创建新数组：
const arr1 = [1, 2, 3];
const arr2 = […arr1]; // [1, 2, 3]
● 合并数组：
将多个数组拼接成一个新数组：
const a = [1, 2];
const b = [3, 4];
const combined = […a, …b]; // [1, 2, 3, 4]
● 在任意位置插入元素：
比传统的 concat 更灵活：
const nums = [2, 3];
const withOne = [1, …nums, 4]; // [1, 2, 3, 4]
2. 函数调用中的参数展开
展开运算符可用于将数组“打散”为函数的多个参数，替代 apply 的部分功能。
function add(a, b, c) {
return a + b + c;
}
const values = [1, 2, 3];
add(…values); // 6
特别适合处理 Math.max、Math.min 等不支持数组参数的函数：
Math.max(…[10, 20, 30]); // 30
3. 对象中的展开运算符
ES9（ES2018）扩展了展开运算符对对象的支持，用于浅拷贝或合并对象。
● 浅拷贝对象：
const obj1 = { x: 1, y: 2 };
const obj2 = { …obj1 }; // { x: 1, y: 2 }
● 合并对象：
后出现的属性会覆盖前面的：
const a = { name: “Alice”, age: 25 };
const b = { age: 30, city: “Beijing” };
const merged = { …a, …b }; // { name: “Alice”, age: 30, city: “Beijing” }
● 添加或更新属性：
在解构基础上添加新字段很方便：
const user = { name: “Bob” };
const updated = { …user, age: 28, active: true };
4. 常见使用场景与注意事项
展开运算符虽好用，但也需注意其限制和适用范围。
● 展开类数组对象：
如 arguments 或 NodeList，可转为真正的数组：
function example() {
const args = […arguments];
}
● 字符串展开：
字符串是可迭代的，展开后变成字符数组：
[…’hello’]; // [‘h’, ‘e’, ‘l’, ‘l’, ‘o’]
● 注意浅拷贝问题：
展开运算符只做一层深拷贝。嵌套对象仍为引用：
const original = { user: { name: “Tom” } };
const copy = { …original };
copy.user.name = “Jerry”;
// original.user.name 也会变成 “Jerry”
● 不能展开 undefined、null 或非可迭代对象：
否则会报错：
[…null]; // 报错：null is not iterable
基本上就这些。掌握展开运算符，能让代码更简洁清晰，特别是在处理数组和对象时提升开发效率。关键是理解它“打散”可迭代对象的本质，再结合具体语境灵活使用。
以上就是JS展开运算符怎么用_JS展开运算符…语法与使用场景详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537066.html
微信扫一扫 
支付宝扫一扫 
