es6中的扩展运算符与对象拷贝情况

最新推荐文章于 2023-09-02 17:30:08 发布

原创最新推荐文章于 2023-09-02 17:30:08 发布 · 565 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #typescript #前端

文章详细阐述了ES6中的扩展运算符在处理简单数据类型和引用类型时的区别。对于简单数据类型，扩展运算符实现的是深拷贝，修改拷贝后对象的属性不会影响原对象。然而，当属性值为引用类型时，扩展运算符仅进行浅拷贝，修改引用对象的属性会导致原对象的属性值也发生变化。

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

一、扩展运算符

1-1当value值为简单数据类型时，此时使用扩展运算符可以算是深拷贝

1-2当value值为引用类型时，此时使用扩展运算符算是浅拷贝

一、扩展运算符

扩展运算符为es6中新增的运算符，扩展运算符允许扩展可迭代对象的元素，例如数组、映射或集合。

1-1当value值为简单数据类型时，此时使用扩展运算符可以算是深拷贝

对象由属性和属性值组成而当属性值为简单数据类型时，此时修改拷贝后对象中的属性值不会影响原对象。

以下示例修改属性值不会影响原对象

        const obj = { name: 'a' };
        const newObj = { ...obj };
        newObj.name = 'b';
        console.log(newObj); //拷贝后的对象  { name: 'b' } 
        console.log(obj); //原对象 { name: 'a' }

1-2当value值为引用类型时，此时使用扩展运算符算是浅拷贝

属性值为引用类型时，此时只是拷贝了引用类型的地址，他和原属性值指向的地址一致，此时修改引用对象里面的属性值会使得原对象的值也发生改变。

以下示例修改属性值影响了原对象

        const obj = { name: { name: 'a' } };
        const newObj = { ...obj };
        newObj.name.name = 'b';
        console.log(newObj); //拷贝后的对象 { name: { name: 'b' } }
        console.log(obj); //原对象 { name: { name: 'b' } }