深拷贝和浅拷贝


  • 深拷贝:拷贝实例;浅拷贝:拷贝引用(原对象)。

  • 说深拷贝和浅拷贝之前,我先去了解了下高程书上的JavaScript的变量类型:

    1. 基本类型:undefined、null、Boolean、number、string。变量直接按指存放在栈区内,可以直接访问,所以我们平时把字符串、数字的值赋值给新变量,相当于把值完全复制过去,新变量的改变不会影响旧变量。

    2. 引用类型:存放在堆区的对象,变量在栈区中保存的是一个指针地址。

    3. 例子

         let a = 123;
      let b = a;
      b = 456;
      console.log(a);//123
      console.log(b);//456
  • 深拷贝和浅拷贝图解

  • 浅拷贝实现方式

  1. 函数实现

     	function shallowClone (source){
    if(!source || typeof source != 'object'){
    throw new Error ('error');
    }
    var targetObj = source.constructor === Array ? [] : {};
    for(var keys in source) {
    if(source.hasOwnProperty(keys)){
    targetObj[keys] = source[keys];
    }
    }
    return targetObj;
    }
  2. 最简单的浅拷贝:变量复制

     	let a = 123;
    let b = a;
    b = 456;
    console.log(a);
    console.log(b);
  3. 通过es6新增的Object.assign来复制对象

     	let obj = { name: '程序狗', age:{child: 12} }
    let copy = Object.assign({}, obj);
    copy.name = '单身狗';
    copy.age.child = 24;
    console.log(obj);// { name: '程序狗', age:{child: 24} }
  4. jquey中的$.extend({}, obj); Array.prototype.slice()和Array.prototype.concat()都会返回一个数组或者对象的浅拷贝。(看起来像深拷贝)

  • 深拷贝实现
  1. 函数实现

     	function cloneDeep(obj){
    if(typeof obj !== 'object' || Object.keys(obj).length === 0 ){
    return obj;
    }
    let resultData = {};
    return recurison(obj, resultData);
    } function recurison(obj, data = {}){
    for(key in obj){
    if(typeof obj[key] == 'object' && Object.keys(obj[key].length > 0 )){
    data[key] = recurison(obj[key]);
    }else{
    data[key] = obj[key];
    }
    }
    return data;
    } var o1 = {
    arr: [1, 2, 3],
    obj: {
    key: 'value'
    },
    func: function(){
    return 1;
    }
    }; var o3 = cloneDeep(o1);
    console.log(o3 === o1);//false
    console.log(o3.obj === 01.obj);//false
    console.log(o3.func === o1.func);//true
  2. JSON对象中的parse和stringify,JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串,parse可以把JSON字符串反序列化为一个js对象,通过这两个方法,也可以实现对象的深复制。

JavaScript的深拷贝和浅拷贝总结的更多相关文章

  1. javascript对象深拷贝,浅拷贝 ,支持数组

    javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...

  2. 也来玩玩 javascript对象深拷贝,浅拷贝

    经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...

  3. JavaScript的深拷贝和浅拷贝

    一.数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型.. 1.基本数据类型的特点:直接存储在栈(stack ...

  4. JavaScript的深拷贝与浅拷贝

    深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...

  5. 详解javascript的深拷贝与浅拷贝

    1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...

  6. JavaScript 的 深拷贝和浅拷贝

    深拷贝和浅拷贝都是针对的引用类型, JS中的变量类型分为值类型(基本类型)和引用类型: 对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会对地址进行拷贝,最终两个变量指向同一份数据 一.先 ...

  7. JavaScript之深拷贝和浅拷贝

    前言 工作中会经常遇到操作数组.对象的情况,你肯定会将原数组.对象进行‘备份’当真正对其操作时发现备份的也发生改变,此时你一脸懵逼,到时是为啥,不是已经备份了么,怎么备份的数组.对象也会发生变化.如果 ...

  8. javaScript深拷贝和浅拷贝简单梳理

    在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型 基本数据类型 数字Number 字符串 ...

  9. 读懂javascript深拷贝与浅拷贝

    1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...

随机推荐

  1. linux常用命令:sudo 命令

    sudo命令用来以其他身份来执行命令,预设的身份为root. 1.命令格式: sudo  [参数]  [命令] 2.命令功能: 功能:  sudo可以针对单个命令授予临时权限.用户也可以通过su切换到 ...

  2. Linux基础命令---last

    last 显示以前登录过的用户信息,last指令会搜索/var/log/wtmp文件(或者是经过-f选项指定的文件),然后列出文件中所有的用户信息.如果执行last指令时提示“last /var/lo ...

  3. hue, saturation, and brightness:色调、饱和度和亮度

    色调.饱和度和亮度(hue, saturation, and brightness)以人对红.绿.蓝(RGB)三色组合的感觉为基础.在描述阴极射线管显示器参数时,经常提到这三个专有名词.所有的颜色可以 ...

  4. Django框架----基础

    一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model(模型):和数据库相关的,负 ...

  5. shell中参数及带色彩打印

    shell脚本中的一些函数参数说明如下: #!/bin/bash echo 显示参数的个数: $# echo 以单个字符串把每个参数连接起来: $* echo 显示脚本当前运行的进程id: $$ ec ...

  6. c++继承、多态以及与java的行为差异之处

    对于面向对象而言,多态是最有用的基本特性之一,相对于函数指针,易用得多.下面看下c++继承和多态行为的基本特性,最后说明下和java的基本差别. 首先定义父类和子类. base.h #pragma o ...

  7. c++性能之map实现性能比较

    http://www.cnblogs.com/zhjh256/p/6346501.html讲述了基本的map操作,在测试的时候,发现map的性能极为低下,与java相比相差了接近200倍.测试的逻辑如 ...

  8. http://bugs.mysql.com/bug.php?id=72123

    今天某个环境发生了这个bug. http://bugs.mysql.com/bug.php?id=72123

  9. vijos 1360 八数码问题 - 启发式搜索

    背景 Yours和zero在研究A*启发式算法.拿到一道经典的A*问题,但是他们不会做,请你帮他们. 描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0 ...

  10. 打开vi后提示The ycmd server SHUT DOWN (restart with :YcmRestartServer)该如何处理

    答:进入YouCompleteMe的安装目录安装一些必要的依赖 比如:笔者将YouCompleteMe安装到了~/.vim/bundle目录下,那么执行以下操作: cd ~/.vim/bundle/Y ...