JavaScript中对象的数据拷贝

JavaScript中对象的数据拷贝

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

在Javascript中我们将一个对象赋值给另外一个对象时,是将第一个对象的地址值赋值给了新对象.

这样就会导致当我们修改新对象的值时旧对象对应的值也会改变.

const obj = {
  a: 1,
};

const obj2 = obj;
obj2.a = 2;

console.log(obj); // {a:2}
console.log(obj2); // {a:2}

在很多业务场景中这种方式是不可取的,所以我们就要解决这个问题.

1.问题原因

发生这个问题的原因是因为两个对象的地址值是共享的没有产生新的对象所以就会导致修改一个对象的值两个对象的值都变了.

在JavaScript中,Object是引用数据类型,这种数据类型在进行赋值操作时是将地址值赋值给了新变量,详细可以去看我的文章JavaScript中的数据类型.

2.问题解决

在知道问题发生的原因后解决起来就轻松了.

1.新建一个对象进行复制

const obj = {
  a: 1,
  b: 2,
};

const newObj = {};
for (let k in obj) {
  newObj[k] = obj[k];
}
newObj.a = 22;

console.log(obj); // { a: 1, b: 2 }
console.log(newObj); // { a: 22, b: 2 }

通过遍历obj的建值访问对应的值进行赋值,这样就不会通过对象的地址进行赋值了,但是代码书写有点繁琐.

2.Object.assign

Object.assign这个方法可以复制一个对象的所有值到另一个对象中,这样也可以绕过对象的地址进行赋值操作

const obj = {
  a: 1,
  b: 2,
};

const newObj = Object.assign({}, obj);
newObj.a = 22;

console.log(obj); // { a: 1, b: 2 }
console.log(newObj); // { a: 22, b: 2 }

3.扩展运算符

es6中新增的扩展运算符==…==三个点,这个操作符可以展开一个可迭代的对象或者数组,将它们的值返回

const arr = [1,2,3]
console.log(...arr) // 1 2 3

但是对象类型不可以直接进行展开,需要通过Object.keys获取对象的键数组或者Object.values获取对象的值数组还可以用一个对象进行包裹展开,这样也就完成了复制对象的操作.

const obj = {
    a:1,
    b:2
}
const obj2 = {...obj}
console.log(obj2) {a:1,b:2}

4.JSON.stringify

使用==JSON.stringify(obj)进行对象转换为json字符串再使用JSON.parse(obj)==将json字符串转换为对象.性能较差,限制较多不推荐此做法

const obj = {
    a:1,
    b:2
}
const obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj2) // {a:1,b:2}

5.深层遍历每个值(深拷贝)

当对象内的值也是一个对象时,上面的方法都有所欠缺,所以需要我们自己编写深拷贝对象函数.

function deepClone(obj, newObj) {
        var newObj = newObj || {};
        for (let key in obj) {
            if (typeof obj[key] == 'object') {
                newObj[key] = (obj[key].constructor === Array) ? [] : {}
                deepClone(obj[key], newObj[key]);
            } else {
                newObj[key] = obj[key]
            }
        }
        return newObj;
    }
    console.log(deepClone(obj, newObj));//{name: "123",sex: {age: '小花'}}

思路解析

循环遍历对象内的每个值,当这个的类型为object时,再判断这个值是不是数组,如果是数组就给定一个空数组,如果是对象那就给定一个空对象,然后进行递归调用此函数.当类型不为object时则直接进行值的赋值操作.

3.结语

Hi👋,这里是瑞雨溪 -> 一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助.
欢迎您关注我 -> 我会持续不断的更新更多优质文章.
你的关注就是我的动力!!!🎉🎉🎉