javaScript的拷贝有浅拷贝和深拷贝。拷贝我们一般拷贝对象,获取对象的内容(字段、函数)都给复制一遍

浅拷贝:一般只是简单的赋值

//浅拷贝
var obj1={name:"cat"};
var obj2=obj1;//直接赋值给obj2
obj2.name="pig";//修改
console.log(obj1.name); // pig
console.log(obj2.name); // pig
//obj2与obj1所应用的是同一个对象,只是简单复制对象内容
console.log(obj1 === obj2);//true

由上可知这种直接赋值式的浅复制是复制了同一个内存地址,所以有一个修改了其他也会被修改,因为它们同在一个地址里面。

深拷贝:复制对象的内容创建一个新的对象内容

//深拷贝1、利用 JSON 对象中的 parse 和 stringify
var obj3 = {
name: "cat",
show:function(){
console.log(this.name);
}
};
var obj4 = JSON.parse(JSON.stringify(obj3));
obj4.name = "pig";
console.log(obj3.name); // cat
console.log(obj4.name); // pig
obj3.show();//cat
//obj4.show(); //函数被丢失,出错

但是我们函数对象没有复制过来,它出错了。为了解决这种问题,我们又有了另外一种深复制——利用递归

递归方法:

//递归方法,进行深拷贝
function deepClone(obj) {
//传进来的参数如果是数组选择[],如果不是数组选择{}
let objClone = Array.isArray(obj) ? [] : {};
//判断传进来的是不是object类型,如果是基本类型就直接返回。
if(obj && typeof obj === "object") {
for(key in obj) {//枚举遍历
if(obj.hasOwnProperty(key)) {//判断obj是否有该名称的属性或对象
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {//当递归到子元素不是对象时、简单复制
//如果不是,简单复制
objClone[key] = obj[key];
 }
  }
  }
}
return objClone;
}

我们直接调用这个 递归函数就可以进行深拷贝了

var obj5 = {
name: "cat",
show: function() {
console.log("名称:"+this.name);
}
};
var obj6 = deepClone(obj5); //调用方法进行复制 obj6.name = "pig"; console.log(obj5.name); // cat
console.log(obj6.name); // pig obj5.show(); // cat
obj6.show(); // pig

JavaScript的深拷贝的更多相关文章

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

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

  2. javascript浅拷贝深拷贝理解记录

    javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...

  3. JavaScript实现深拷贝(深复制) 面试题

    1.两种方法实现深拷贝(深复制) (1)方法一:兼容性好,请仔细看代码(网上大部分代码有Bug) (2)方法二:需要对象满足JSON数据格式.JOSN数据格式:http://www.cnblogs.c ...

  4. JavaScript中深拷贝实现

    JavaScript 中深拷贝实现   拷贝时候涉及到: 1.循环结构 2.判断数组 Array 还是对象 Object   函数实现 /** * 获取满足条件的数组中的第一个元素 * @param ...

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

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

  6. JavaScript的深拷贝的实现

    JavaScript的数据类型 简单数据类型 string number boolean function null undefined 复杂数据类型 String Number Boolean Fu ...

  7. 【javascript】浅谈javaScript的深拷贝

        前言: 最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时 ...

  8. JavaScript之深拷贝和浅拷贝

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

  9. javascript浅拷贝深拷贝详解

    一.浅拷贝 浅拷贝在现实中最常见的表现在赋值上面,例如 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 【javascript】详解javaScript的深拷贝

        前言: 最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时 ...

随机推荐

  1. 版本控制系统(VCS)简介

    简介 版本控制系统(VCS)是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.使用版本控制系统通常还意味着,就算你乱来一气把整个项目中的文件改的改删的删,你也照样可以轻松恢复到原先 ...

  2. DML子句returing into用法举例

    一.概述: ORACLE的DML语句中可以指定RETURNING语句.使用起来也很简单,和SELECT INTO语句没有多大区别.RETURNING语句的使用在很多情况下可以简化PL/SQL编程. I ...

  3. JavaScript 廖

    =============== JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中 ======注释 // 以双斜杠开头直到行末 ...

  4. 原生js手机端触摸下拉刷新

    废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. Vue多语言支持

    i18n插件实现多语言支持,本文以中英文为例记录一下配置过程. 1.配置 1.1安装:npm install vue-i18n --save 1.2创建中英文配置项文件 src/lang目录下创建以下 ...

  6. Java知识点汇总-1

    目录 1 native方法 2 泛型 3 hashcode 4 JDK主要的包 5 被final修饰的类特点 6 空串与null串 7 判断字符串是否相等 1 native方法 JDK源代码由C++. ...

  7. sql server 综合使用的例子

    exec sp_helptext prosampleoldstyle_usp -- ============================================= -- ========= ...

  8. P1929 迷之阶梯

    题目描述 在经过地球防卫小队的数学家连续多日的工作后,外星人发的密码终于得以破解.它 告诉我们在地球某一处的古老遗迹中,存在有对抗这次灾难的秘密武器.防卫小队立即赶 到这处遗迹.要进入遗迹,需要通过一 ...

  9. 爬虫(七):爬取猫眼电影top100

    一:分析网站 目标站和目标数据目标地址:http://maoyan.com/board/4?offset=20目标数据:目标地址页面的电影列表,包括电影名,电影图片,主演,上映日期以及评分. 二:上代 ...

  10. 问题:python3 使用beautifulSoup时,出错UnicodeDecodeError: 'gbk' codec …….

    想将html文件转为纯文本,用Python3调用beautifulSoup 超简单的代码一直出错,用于打开本地文件: from bs4 import BeautifulSoup file = open ...