关于前端赋值、深拷贝、浅拷贝

关于前端赋值、深拷贝、浅拷贝

一、赋值

赋值是将某一数据类型或对象赋给某一变量的过程，js中的数据类型分为基本数据和引用数据类型也就是对象类型

1.基本数据类型包括（null、undefined、number、string、boolean）

2.引用数据类型包括（array、object、function）使用typeof返回array的数据类型其实是object，因为在javascript中，array就是object

基本数据类型的赋值

let a = 20,b=a;
console.log(b); //20
a = 5;
console.log(a);//5
console.log(b); //20

可以看出对基本数据类型赋值互不影响

引用数据类型

let a = {
    name: 20
}
let b = a;
console.log(b); //{name:20}

a.name = 5;
console.log(a);//{name:5}
console.log(b);//{name:5}

可以看出对引用数据类型赋值指向的是同一对象，a改变b也会被影响，但是我们一般不希望a改变影响b的值，这时我们就需要用到深拷贝和浅拷贝

 

二、浅拷贝

其实浅拷贝就是拷贝引第一层的基本类型值和第一层的引用类型值，不会递归拷贝多层值

浅拷贝中如果对变量赋值是基本数据类型，拷贝的就是基本数据类型的值，如果变量赋值的是引用数据类型，拷贝的也就是引用数据类型的内存地址。

javascript中浅拷贝的方法：

• object.assign

let a = {
    name: 20
};
let b = Object.assign({},a);//对象合并
console.log(b); //{name:20}

a.name = 5;
console.log(a);//{name:5}
console.log(b);//{name:20}

• es6展开语法

let a = {
    name: 20,
    d:{
        tx:'haha'
    }
};
let b = {...a};
console.log(b); //{name:20,d:{tx:'hello'}}

a.name = 5;
a.d.tx = 'hello'
console.log(a);//{name:5,d:{tx:'hello'}}
console.log(b);//{name:20,d:{tx:'hello'}}

 

三、深拷贝

深拷贝就是递归拷贝多层数据类型

常用的深拷贝方法

• JSON.parse配合JSON.stringify

let a = {
    name: 20,
    d:{
        tx:'haha'
    }
};
let b = JSON.parse(JSON.stringify(a));
console.log(b); //{name:20,d:{tx:'haha'}}

a.name = 5;
a.d.tx = 'hello'
console.log(a);//{name:5,d:{tx:'hello'}}
console.log(b);//{name:20,d:{tx:'haha'}}

该方法不能拷贝function、undefined

 

• es6的展开语法

let a = {
    name: 20,
    d:{
        tx:'haha'
    }
};
let b = {
    ...a,
    d:{...a.d}
}
console.log(b) 
// {
//     "name": 20,
//     "d": {
//         "tx": "haha"
//     }
// }

a.d.tx = 'hello'

console.log(a)
// {
//     "name": 20,
//     "d": {
//         "tx": "hello"
//     }
// }
console.log(b)
// {
//     "name": 20,
//     "d": {
//         "tx": "haha"
//     }
// }

• 另一种就是使用js的递归进行深拷贝 

function deepCopy(o, c) {
    var c = c || {}
    for (var i in o) {
        if (typeof o[i] === 'object') {
            //要考虑深复制问题了
            if (o[i].constructor === Array) {
                //这是数组
                c[i] = []
            } else {
                //这是对象
                c[i] = {}
            }
            deepCopy(o[i], c[i])
        } else {
            c[i] = o[i]
        }
    }
    return c
}