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

目录

一、扩展运算符

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' } }

你可能感兴趣的:(es6,typescript,前端)