深拷贝

元让
• 阅读 1551

一、需要知识点回顾

基本类型(值类型)和引用类型

(基本类型)值类型:Number,Boolean,String,undefined,null

引用类型:object,Arrary

二、基本类型和引用类型复制的区别

值类型:对值类型的复制操作,仅仅是对值的进行一份拷贝,复制与被复制的会指向两份不同的数据。

引用类型:引用类型复制的是地址。所以最后会发现,复制与被复制的最终会指向同一份数据。

例子:

// 基本类型

var a = 1;

var b = a;

a = 2;

console.log(a, b); // 2, 1 ,a b指向不同的数据
// 引用类型指向同一份数据

var a = {c: 1};

var b = a;

a.c = 2;

console.log(a.c, b.c); // 2, 2 全是2,a b指向同一份数据

三、深拷贝和浅拷贝的区别

浅拷贝:只拷贝一层。
深拷贝:无限极拷贝。

四、深度拷贝的四个例子

方法一:
function clone(source){
   if (!isObject(source)) return source;//参数校验更加优秀
     var target={};
     for(var i in source){
         if(source.hasOwnProperty(source){
              if(typeof source[i] === 'object'){ // Object.prototype.toString.call(source[i] === '[Object Object]'
                  target[i] = clone(source[i])
              }else{
                  target[i] = source[i];
              }
         }
     return target;
}
function isObject(obj){
   return Object.prototype.toString.call(obj === '[Object Object]'
}
方法二:
function cloneJSON (source){
 return JSON.parse(JSON.stringfy(source));
}

方法三:

function cloneLoop(x) {
    const root = {};
    // 栈
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];
    while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;
        // 初始化赋值目标,key为undefined则拷贝到父元素,否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}
方法四:
// 保持引用关系
function cloneForce(x) {
    // =============
    const uniqueList = []; // 用来去重
    // =============
    let root = {}
    // 循环数组
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];
    while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标,key为undefined则拷贝到父元素,否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }
        
        // =============
        // 数据已经存在
        let uniqueData = find(uniqueList, data);
        if (uniqueData) {
            parent[key] = uniqueData.target;
            break; // 中断本次循环
        }

        // 数据不存在
        // 保存源数据,在拷贝数据中对应的引用
        uniqueList.push({
            source: data,
            target: res,
        });
        // =============
    
        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

function find(arr, item) {
    for(let i = 0; i < arr.length; i++) {
        if (arr[i].source === item) {
            return arr[i];
        }
    }

    return null;
}

引用文章:https://segmentfault.com/a/11...

点赞
收藏
评论区
推荐文章
仔细看看,会有收获。js深浅拷贝
好好理解深浅拷贝和赋值(针对引用类型)赋值:两个对象指向同一内存地址。结果,无论是修改基本类型还是引用类型,两个对象的值都会改变。浅拷贝:两个对象指向不同的内存地址,但是他们中的引用类型数据指向同一内存地址。结果,修改引用类型,两个对象的值都会改变;修改基本类型,互不影响。深拷贝:两个对象指向不同的内存地址,他们中的引用类型也指向不同的内存地址。结果,均互不
菜园前端 菜园前端
2年前
你了解JavaScript中的数据类型区分吗
原文链接:常见的ES5数据类型分为基本数据类型、引用数据类型两种。包含字符串、数字、对象、数组、函数、布尔值、空值、未知。基本数据类型String类型(字符串)javascriptvarname'xiaoming'Number类型(数字)javascrip
LinMeng LinMeng
4年前
js之传值与传址/undefined和null/严格模式
传值与传址基本数据类型有五种Undefined、Null、Boolean、Number和String引用数据类型有两种object,array,fn两种数据类型的区别:1.存储位置不同原始数据类型直接存储在栈(stack)中简单数据段,占据空间小,大小固定,属于被频繁使用的数据,所以存储在栈中;引用数据类型直接存
劳伦斯 劳伦斯
4年前
前端面试题自检 JS CSS 部分
JS类型JavaScript的简单数据类型Number,String,Boolean,Undefined,Null,Symboltypeof操作符的返回值numberstringbooleanundefinedobjectfunction
Wesley13 Wesley13
3年前
Java对象的浅拷贝和深拷贝&&String类型的赋值
Java中的数据类型分为基本数据类型和引用数据类型。对于这两种数据类型,在进行赋值操作、方法传参或返回值时,会有值传递和引用(地址)传递的差别。浅拷贝(ShallowCopy):①对于数据类型是基本数据类型的成员变量,浅拷贝会直接进行值传递,也就是将该属性值复制一份给新的对象。因为是两份不同的数据,所以对其中一个对象的该成员变量值进行修改,
Stella981 Stella981
3年前
JavaScript的深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。、1.基本数据类型的特点:直接存储在栈(stack)中的数据2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据放在堆内存里。引用数据类型在栈中存储了指针,该指针指向堆中该实
Wesley13 Wesley13
3年前
GO值类型与引用类型
值类型值类型包括基本数据类型,int,float,bool,string,以及数组和结构体(struct)。值类型变量声明后,不管是否已经赋值,编译器为其分配内存,此时该值存储于栈上。值类型的默认值:varaint//int类型默认值为0varbstring//string类型默认值为n
Stella981 Stella981
3年前
JavaScript学习小结
JavaScirpt变量可用来保存两种类型值:基本类型值,引用类型值基本类型值:Undefined,Null,Boolean,Number,String基本类型及引用类型值特点:1.基本类型值在内存中占据固定大小的空间,被保存在栈内存中;2.从一个变量向另一个变量复制基本类型值,会创建这个值的一个副本;
Stella981 Stella981
3年前
JVM调优总结一
数据类型   Java虚拟机中,数据类型可以分为两类:基本类型和引用类型。基本类型的变量保存原始值,即:他代表的值就是数值本身;而引用类型的变量保存引用值。“引用值”代表了某个对象的引用,而不是对象本身,对象本身存放在这个引用值所表示的地址的位置。基本类型包括:byte,short,int,long,cha
Easter79 Easter79
3年前
Swift3.0 类和结构体的选择
结构体实例总是通过值传递,类实例总是通过引用传递先说说值类型和引用类型的区别值类型被赋予给一个变量、常量或者被传递给一个函数的时候,其值会被拷贝在Swift中,所有的结构体和枚举类型都是值类型。这意味着它们的实例,以及实例中所包含的任何值类型属性,在代码中传递的时候都会被复制。引用类型在被赋予到一个变量、常
Stella981 Stella981
3年前
JVM调优总结(一)基本概念
数据类型Java虚拟机中,数据类型可以分为两类:基本类型和引用类型。    基本类型:保存原始值,即:他代表的值就是数值本身;    引用类型:保存引用值。“引用值”代表了某个对象的引用,而不是对象本身,对象本身存放在这个引
元让
元让
Lv1
热爱是不会降温的。
文章
1
粉丝
0
获赞
0
热门文章

暂无数据