对象的扩展运算符

最新推荐文章于 2025-06-15 09:15:00 发布

Meskjei

最新推荐文章于 2025-06-15 09:15:00 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： Javscript 对象扩展运算符

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/88323744

32 篇文章

订阅专栏

这篇笔记详细探讨了JavaScript中的扩展运算符，纠正了只适用于数组的误解。扩展运算符同样可以用于对象，不仅在函数调用时使用，还能进行对象的解构赋值和复制。注意解构赋值的拷贝是浅拷贝，对象的扩展运算符则实现了对象字段的复制，而非深拷贝。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前我写过一篇笔记就是说扩展运算符的。可是那个笔记说的并不全面。以前我一直片面的认为，扩展操作符只能作用于数组而不能作用于对象，而且只能在函数调用的时候使用，可实际上扩展操作符是可以作用于对象的。

解构赋值

应该来说，扩展运算符用在解构赋值中更像是rest参数。同样是把目标对象还未读取的字段，分配到指定的对象。例如

let {a, b, ...c} = {a: 12, b: 13, c: 15, d: 16, e: 17};
console.log(a); //12
console.log(b); //13
console.log(c); //{c: 15, d:16, e: 17}

它跟rest参数很像的一个地方在于它也是只能放在最后一个，如果放在其他的位置上则会报语法错误，例如

let {a, ...b, c} = {a: 12, b: 13, c: 15, d: 16, e: 17};

需要注意的是，解构赋值的拷贝是浅拷贝。也就是说，对于像对象这些引用类型，那么拷贝的则是它们的引用。

let obj = {a:{b: 100}};
let {...x} = obj;
obj.a.b = 1000;
console.log(x.a.b);   //1000

在对象中，扩展运算符虽不是在函数调用时使用，但是效果却也和用在数组上差不多。

可以用对象的扩展运算符来实现对对象的复制（只是字段）。例如

let x = {a: 1, b: 2, c: 3};
let y = {...x};
console.log(y); //{a: 1, b: 2, c: 3}

实际上我理解这样的操作就相当于是使用了Object.assign方法。

let x = {a: 1, b: 2, c: 3};
let y = {...x};

//等同于
Object.assign({}, x);