js之深浅拷贝
2020-03-15 本文已影响0人
小虫along
js之深浅拷贝
标签(空格分隔): javascript
说在前面
javascript中的变量类型分为两大类,基本数据类型与引用数据类型,其中基本值类型包括
- Number
- String
- Boolean
- Null
- undefine
引用类型指的是包含多个值的对象。本质上,栈内存中保存固定不变的值,堆内存则保存的更多的是引用类型,但是引用类型的地址保存在栈内存中, 我们要以通过地址来访问。
由于这种方式保存方式, 当访问基本类型时, 可以通过值来访问。当访问引用类型时,通过保存在变量的引用类型的地址来实际操作,就会出现深浅复制的问题
浅拷贝
// 例如 两个对象
var obj1 = {
a: "123",
b: "456"
}
var obj2 = {}
// 由于a,b 的值都是原始值基本类型所以
// 方法一
clone(o1, o2){
for(var key in o1){
o2[key] = o1[key]
}
return o2
}
clone(obj1, obj2)
// 方法二
Object.assign() // (兼容性一般)
// 方法三
// 数组中的 concat 和 slice
// 方法四
ES6 中的展开运算符号
var arr = [{name:'xiaolong',age:18}]
var arr2 = [...arr]
深拷贝
简单的说深拷贝就是当遇到值的是对象类型时, 再进行复制一次,
可以用lodash _.cloneDeep() , jQuery 中的 .clone()/.extend()
当然也可以自己用递归实现在一个方法
function deepClone (ob2) {
var res ;
//引用类型分数组和对象分别递归
if(Object.prototype.toString.call(ob2) == '[object Array]'){
res = [];
for(var i =0; i<= ob2.length; i++){
res[i] = deepClone(ob2[i])
}
}else if(Object.prototype.toString.call(ob2) == '[object Object]'){
res = {}
for(let j in ob2){
res[j] = deepClone(ob2[j])
}
}else {
return ob2
}
// 值类型直接返回
return res;
}