JavaScript展开运算符详解与实战应用
本文深入解析JavaScript中的展开运算符（Spread Operator）。通过实例演示其在函数调用、数组字面量、解构赋值及对象操作中的具体应用。重点探讨展开运算符在浅拷贝中的作用机制，明确其仅对基本类型进行深拷贝、对引用类型仍共享内存地址的限制条件，帮助开发者正确使用该特性优化代码。
展开运算符（spread operator）允许在一个表达式需要多个参数或多个元素的位置进行展开。它主要应用于函数调用时的多个参数传递、数组字面量中的多个元素组合，以及解构赋值中的变量提取。
let obj1 = {
value1: 1,
value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}上述展开运算符的使用效果，在逻辑上等同于直接赋值的方式。
obj2 = {value1: 1, value2: 2}展开运算符的写法与obj2 = obj1直接赋值的区别在于：若采用直接赋值，对于引用类型而言，仅是将obj1的内存地址赋予变量，导致obj2变化时obj1随之改变。而使用展开运算符时，由于obj1的属性均为基本类型，系统会重新创建一个新对象，此时obj2的变动不会影响obj1。需注意，这仅适用于属性全为基本类型的情况（即单层深拷贝）；若属性包含引用类型，修改该引用类型的值仍会同时影响两个对象。
let obj1 = {
attri1: [3, 6, 0],
attri2: 4,
attri4: 5
};
let obj2 = {...obj1
};
obj2.attri2 = 888;
obj2.attri1[0] = 7;
console.log('obj1:', obj1);
console.log('obj2:', obj2);展开运算符的应用场景
1.在函数调用中使用展开运算符
function test(a, b, c){};
let arr = [1, 2, 3];
test(...arr);2.在数组字面量中使用展开运算符
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]3.用于解构赋值。在解构赋值中，展开运算符必须置于最后位置，否则将引发错误。
// 解构赋值中展开运算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]4.将类数组对象转换为数组
let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];5.在对象操作中使用展开运算符 ES7引入的对象展开运算符使得对象操作更加便捷：
let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}将一个对象嵌入另一个对象中：
let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}合并两个对象：
let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}本文关于JavaScript展开运算符及其实例代码的介绍到此结束。如需了解更多js展开运算符相关内容，建议查阅本站过往文章或继续浏览后续内容，感谢支持。
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18