深拷贝和浅拷贝


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

  • 说深拷贝和浅拷贝之前,我先去了解了下高程书上的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. M2C的概念

    M2C即Manufacturers to Consumer(生产厂家对消费者),生产厂家(Manufacturers)直接对消费者(Consumers)提供自己生产的产品或服务的一种商业模式,特点是流 ...

  2. 命名空间“Microsoft.Office.Interop”中不存在类型或命名空间名称“Excel”。是否缺少程序集引用 的另一种解决方案

    一直以来都是使用tfs进行源代码管理,系统部署也是由我本机生成后发布到服务器上,某一日,进行发布操作时,报了 [命名空间“Microsoft.Office.Interop”中不存在类型或命名空间名称“ ...

  3. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

  4. netty4----日志框架的检查

    https://segmentfault.com/a/1190000005797595 2016年06月25日  ·  4.1k 次阅读 Netty4.x Internal Logger机制 nett ...

  5. (二)github的价值意义篇

    为什么需要社会化编程? 如果您是程序员面试官,两者之间你会选择哪一位呢? 能查看以前所写代码的程序员 or 无法查看的程序员 精通最新软件的程序员 or 不精通的程序员 对语言或软件差异带来的不同文化 ...

  6. spring mvc @ModelAttribute 每次执行requestmapping前自动执行

    在不少应用场景中,我们希望在每次执行requestmapping前自动执行一些操作,比如把某些数据(比如数据字典.系统配置.标准错误号,这在企业应用系统中极为常见)塞到model中供view访问,因为 ...

  7. linux学习笔记《一.烧写篇_android》

    一.菜鸟入门.烧写篇 (1).A8板子烧写程序 (NANDFlash烧写) ①烧写软件: 安装原件 安装后: 应用软件图标 ② 我们首先选中English/中文,切换到中文,然后关掉重启(也可以用英文 ...

  8. 如何修改ls命令列出来的目录颜色

    答:默认为蓝色,在黑色背景下无法看清楚,因此以以下方法修改; 1.往~/.bash_profile文件中添加以下内容: export LS_COLORS='no=00:fi=00:di=01;33:l ...

  9. 【Cuda编程】加法归约

    目录 cuda编程并行归约 AtomicAdd调用出错 gpu cpu下时间计算 加法的归约 矩阵乘法 矩阵转置 统计数目 平方和求和 分块处理 线程相邻 多block计算 cuda编程并行归约 At ...

  10. hdoj-1005-Number Sequences

    题目:Number Sequences 代码: #include<stdlib.h> #include<iostream> #include<cstdio> #in ...