关于前端赋值、深拷贝、浅拷贝
一、赋值
赋值是将某一数据类型或对象赋给某一变量的过程,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
}