• JavaScript学习笔记——浅拷贝、深拷贝


    参考自:http://www.cnblogs.com/yichengbo/archive/2014/07/10/3835882.html

    一、数组的深浅拷贝

    在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

    var arr01 = ["One","Two","Three"];
    var arrt02 = arr01;
    arrt02[1] = "test";
    console.log("arr01:" + arr01);     //One,test,Three
    console.log("arr02:" + arrt02);    //One,test,Three

    像上面的这种直接赋值的方式就是浅拷贝,很多时候,这样并不是我们想要得到的结果,其实我们想要的是arr的值不变。

    方法一:js的slice方法

    var arr01 = ["One","Two","Three"];
    var arrt02 = arr01.slice(0);
    arrt02[1] = "test";
    console.log("arr01:" + arr01);    //One,Two,Three
    console.log("arr02:" + arrt02);   //One,test,Three

    方法二:js的concat方法

    var arr01 = ["One","Two","Three"];
    var arrt02 = arr01.concat();
    arrt02[1] = "test";
    console.log("arr01:" + arr01);    //One,Two,Three
    console.log("arr02:" + arrt02);   //One,test,Three

    二、对象的深拷贝

    var a={name:'yy',age:26};
    var b={};
    
    b = deepCopy(a);
    b.name = 'zz';
    console.log(b);  //Object { name="zz", age=26}
    console.log(a);  //Object { name="yy", age=26}
    
    //定义对象的深拷贝方法
    function deepCopy(obj) { 
        var result={};
        for (var k in obj) {
            result[k] = obj[k] instanceof Object ? deepCopy(obj[k]) : obj[k];
        } 
        return result; 
    }

    三、兼容数组和对象深拷贝的综合方法

    var snail01 = {
        name:'奔跑的蜗牛',
        age:'26',
        like:{
            fruit:'orange',
            sport:'football'
        }
    }
    // 创建深拷贝方法
    function deepCopy(obj){
        var result,b;  //result:存储拷贝数据,b:存储是否为数组的布尔值
        b = obj instanceof Array;
        if(obj instanceof Array || obj instanceof Object){
            result = b ? [] : {};
            for(var k in obj){
                if(obj[k] instanceof Array || obj[k] instanceof Object){
                    result[k] = deepCopy(obj[k]);
                }else{
                    result[k] = obj[k];
                }
            }
        }
        return result;
    }
    
    var snail02 = deepCopy(snail01);
    snail02.name = 'running snail02';
    snail02.like.fruit = 'banana';
    
    console.log(snail02);  // Object { name="running snail02",  age="26",  like=Object { fruit="banana",  sport="football"}}
    console.log(snail01);  // Object { name="奔跑的蜗牛",  age="26",  like=Object { fruit="orange",  sport="football"}}
  • 相关阅读:
    clientHeight、offsetHeight、scrollHeight详解
    JavaScript中常见的字符串操作函数及用法
    获取伪元素的属性和改变伪元素的属性
    HTML和CSS实现左侧固定宽度右侧内容可滚动
    gulp常用插件
    gulp入门详细教程
    Javascript 异步实现机制
    JavaScript:彻底理解同步、异步和事件循环(Event Loop)
    chrome调试,打完断点后关于JS的几个控制介绍
    js断点调试心得
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5402090.html
Copyright © 2020-2023  润新知