要讲 js 的深浅拷贝就必须了解js的数据类型
基本数据类型:null、undefined、number 、string 、boolean 、symbol(es6)
引用数据类型:Object,Array, Map ....
数据赋值
- 基本数据类型拷贝对象的值,两个变量的值相等但是确实两个不同的变量。
- 引用数据类型拷贝的是对象的地址,两个变量指向同一个对象实例。改变其中一个变量的属性都会影响两外一个变量。【其实就是赋值了一个地址,但是没有创建新的对象】
深浅拷贝是对引用数据类型来说的
浅拷贝: 拷贝对象时只拷贝对象属性的一层,当对象的属性也是一个对象时拷贝的是对象的地址。
所以浅拷贝在对象的属性不全是基本数据类型的时候会带来一些问题,因为对象的属性对象指向的
是同一个对象实例,那么在改变的时候就会影响元数据。
const obj = {
a1:1,
a2:'a1',
a3:{ b1: 2, b2:'b2' }
}
// 浅拷贝的方式
const nobj = {...obj} es6语言
const nobj = Object.assign({},obj);
const nobj = Object.keys(obj).reduce((res,cur) => ({ ...res,[cur]:obj[cur]}),{});
const nobj = {};
for(let key in obj)
nobj[key] = obj[key];
// 新知识点 const 表示的常量, 对于基本数据类型来说是不可以改变值的,对于引用数据类型来说是不可以改变引用类型的地址的,但是却可以改变引用数据类的属性的值
// 深拷贝的方式【需要自己补充其他引用数据类型的拷贝】
function deepClone(obj){
const type = Object.prototype.toString.call(obj);
switch(type){
case '[object Object]':
const cloneObj = {};
for(let key in obj)
cloneObj[key] = deepClone(obj[key]);
return cloneObj;
case '[object Array]':
return obj.map(item => deepClone(item));
default:
return obj;
}
}