前端笔记

js之深浅拷贝

2020-03-15  本文已影响0人  小虫along

js之深浅拷贝

标签(空格分隔): javascript


说在前面

javascript中的变量类型分为两大类,基本数据类型与引用数据类型,其中基本值类型包括

引用类型指的是包含多个值的对象。本质上,栈内存中保存固定不变的值,堆内存则保存的更多的是引用类型,但是引用类型的地址保存在栈内存中, 我们要以通过地址来访问。

由于这种方式保存方式, 当访问基本类型时, 可以通过值来访问。当访问引用类型时,通过保存在变量的引用类型的地址来实际操作,就会出现深浅复制的问题

浅拷贝

// 例如 两个对象
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;
}
上一篇下一篇

猜你喜欢

热点阅读