前端笔记(关于js深浅拷贝的理解)

要说深浅拷贝,首先要看下js的数据类型

大家都知道js包含基本类型和引用类型

基本类型:String、Number、Boolean、undefined、null、symbol。

引用类型:Object(Function、Array、Date、RegExp(正则表达式))

基本类型放在中,引用类型放在中,但是引用类型的地址放在栈中。

基本类型的拷贝:直接b=a赋值就行,本身就互不影响。

引用类型的拷贝:就要区分深浅拷贝了,b=a不是拷贝,只是拷贝了新的地址,他们的指向堆中的对象是同一个,会互相影响的

什么是浅拷贝

浅拷贝就是只拷贝对象的第一层内容

什么是深拷贝

深拷贝就是完全拷贝,改变b对象后不会影响到a对象

 

假设一个对象

let obj1={
    a:1,
    b:{b:2},
    c:[1,2,3],
    d:function(){}
}

几种浅拷贝方式:

1.es6剩余参数方式...

//浅拷贝
var obj5={...obj1}
console.log(obj1,obj5)

2.es6的Object.assign

var obj6=Object.assign({},obj1)
console.log(obj1,obj6)

3.自写方法(新空对象,for...in遍历复制)

function simpleClone(obj){
    let newobj={}
    for(let i in obj){
        newobj[i]=obj[i]
    }
    return newobj
}

说下for..in,这是可以遍历对象和数组的key的函数(对象是遍历key,数组是遍历下标)

 

实现深拷贝的几种方式:

1.使用jquery的$.extend

let obj2=$.extend(true,{},obj1)

2.使用JSON.parseJSON.stringify 属于半深拷贝(注意这种方式是不能拷贝对象内的方法的)

var obj4=JSON.parse(JSON.stringify(obj1))

 

3.深拷贝数组 使用slice(传递下标,从0开始复制,返回新数组)

let arr3=arr.slice(0)

4.深拷贝节点 使用cloneNode,在于是否传参

let p=document.getElementById("d")
let cp1=p.cloneNode()//拷贝当前层
let cp2=p.cloneNode(true)//拷贝当前层及子元素

前端笔记(关于js深浅拷贝的理解)_第1张图片

 

5.递归实现深拷贝对象(重写了Object的原型方法

Object.prototype.clone=function(){
    var copy = (this instanceof Array) ? [] : {};
    for (attr in this){
        if (!this.hasOwnProperty(attr)) continue;//取是否存在当前key
        copy[attr] = (typeof this[attr] == "object")?this[attr].clone():this[attr];//是否递归调用
    }
    return copy;
}
var obj3=obj1.clone()
console.log(obj1,obj3)

 

你可能感兴趣的:(前端笔记(关于js深浅拷贝的理解))