JavaScript 赋值、浅拷贝、深拷贝的区别与实现

赋值、浅拷贝、深拷贝的区别

一 、赋值
赋值是将某一数值或对象赋给某个变量的过程，分为：

1、基本数据类型：赋值，赋值之后两个变量互不影响

let a = 5;
let b = a;

console.log(a + b); // 10

a = 10;
console.log(a + b); // 15

2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响

let a = {
    name: 'zhangsan',
    age:18,
    book: {
        title: '高性能JavaScript',
        price: '50'
    }
}

let b = a
console.log(b);

a.name ='lisi'
a.book.price = '60'
console.log(a);
console.log(b);

输出结果

{
  name: 'zhangsan',
  age: 18,
  book: { title: '高性能JavaScript', price: '50' }
}
{
  name: 'lisi',
  age: 18,
  book: { title: '高性能JavaScript', price: '60' }
}
{
  name: 'lisi',
  age: 18,
  book: { title: '高性能JavaScript', price: '60' }
}

对基本类型进行赋值操作，两个变量互不影响。

二、浅拷贝

 let obj={
            name:"hello",
            sex:'男',
            msg:{
                phone:123456,
                age:18
            },
            color:['red','yellow']
        }
        let o={};
        let s={}
        console.log('-------------------ES5-------------');
        for(let k in obj){
            s[k]=obj[k]
        }

        console.log(s);
        console.log('-------------------ES6语法糖-------------');
        Object.assign(o,obj);

        console.log(o);
        o.msg.age=30;
        console.log(obj);

输出结果

浅拷贝结论
浅拷贝将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用（拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响）

三、深拷贝

let obj = {
    name: "hello",
    sex: '男',
    msg: {
        phone: 123456,
        age: 18
    },
    color: ['red', 'yellow']
}
// 深拷贝
let deep = {}
function deepCopy(newobj, oldobj) {
    for (let k in oldobj) {
        // 判断属性值属于那种数据类型
        // 1、获取属性值 欧拉都比较[k]
        let item = oldobj[k];
        // 2、判断这个是不是数组

        if (item instanceof Array) {
            newobj[k] = [];
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {

            // 3、判断这个值是不是对象
            newobj[k] = {};
            deepCopy(newobj[k], item)
        } else {
            // 4、属于简单数据类型
            newobj[k] = item;
        }
    }
}

deepCopy(deep, obj)
console.log(deep);
let arr = [];
console.log(arr instanceof Object);

输出结果

deep.msg.age = 20;
console.log(obj);

输出结果

深拷贝结论
深拷贝是将原对象的各个属性的“值”逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上（注意拷贝的“值”而不是“引用”