管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家。

首先要知道什么是深拷贝?什么是浅拷贝?

深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响。

浅拷贝:拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间。

1、对象(object)的深拷贝和浅拷贝:

  1.1对象的浅拷贝:

 var a={x:,y:};
var b=a;
a.x=;
console.log(a); //=>Object {x: 2, y: 0}
console.log(b); //=>Object {x: 2, y: 0}

1.2对象的深拷贝的几种方法:

  方法1:利用JSON.parse();

var obj1={x:,y:};
var obj2=JSON.parse(JSON.stringify(obj1));
obj1.x=;
console.log(obj1); //=>Object {x: 2, y: 0}
console.log(obj2); //=>Object {x: 0, y: 0}

方法2:es6中的Object.assign();

var obj1={x:,y:};
var obj2=Object.assign({},obj1);
obj1.x=;
console.log(obj1);//=>Object {x: 2, y: 1}
console.log(obj2);//=>Object {x: 1, y: 1}

2、数组(Array)的深拷贝和浅拷贝:

  2.1数组的浅拷贝:

var arr1=[,,];
var arr2=arr1;
arr1.push();
console.log(arr1);//=>[1, 2, 3, 5]
console.log(arr2);//=>[1, 2, 3, 5]

   2.2数组深拷贝的几种方法:

方法一:利用slice()方法:

     var arr=[,,];
var arr2=arr.slice();
arr.push();
console.log(arr); //=>[1, 2, 3, 4]
console.log(arr2);//=>[1, 2, 3]

方法二:利用 Object.assign() 方法:

var arr=[,,];
var arr2=Object.assign([],arr);
arr.push();
console.log(arr);//=>[1, 2, 3, 4]
console.log(arr2);//=>[1, 2, 3]

方法三:数组的 concat() 方法:

var arr=[,,];
var arr2=arr.concat();
arr.push();
console.log(arr);//=>[1, 2, 3, 4]
console.log(arr2);//=>[1, 2, 3]

方法四:es6中的扩展运算符:

let arr=[,,];
let [...arr2]=arr;
arr.push();
console.log(arr);//=>[1, 2, 3, 4]
console.log(arr2);//=>[1, 2, 3]

方法五:通过遍历将值赋值

 let arr=[,,];
let arr2=arr.map((item,index)=>{
return item;
})
arr.push();
console.log(arr);//=>[1, 2, 3, 4]
console.log(arr2);//=>[1, 2, 3]

通过以上5中方法实现了数组的深拷贝,数组arr1和数组arr2相互独自,互不影响。

javascript对象和数组之 深拷贝和浅拷贝的更多相关文章

  1. 第一百零三节,JavaScript对象和数组

    JavaScript对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAScript中 ...

  2. JavaScript 对象与数组参考大全

    http://www.cnblogs.com/meil/archive/2006/06/28/437527.html本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作 ...

  3. JAVA中对象的克隆及深拷贝和浅拷贝

    使用场景: 在日常的编程过程 中,经常会遇到,有一个对象OA,在某一时间点OA中已经包含了一些有效值 ,此时可能会需一个和OA完全相对的新对象OB,并且要在后面的操作中对OB的任何改动都不会影响到OA ...

  4. JavaScript中对象和数组的深拷贝

    不管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家. 首先要知道什么是深拷贝?什么是浅拷贝? 深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另 ...

  5. 使用slice和concat对数组的深拷贝和浅拷贝

    一.数组浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份. 如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问 ...

  6. javascript中的堆栈、深拷贝和浅拷贝、闭包

    堆栈 在javascript中,堆内存是用来存放引用类型的空间环境 而栈内存,是存储基本类型和指定代码的环境 在对象中的属性名具有唯一性,数字属性名=字符串属性名,但是在测试的时候你会发现,好像所有属 ...

  7. JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 : ...

  8. JavaScript对象和数组

    1.JavaScript中有两个非常重要的数据类型是对象和数组. 通过"."或者"[]"来访问对象属性 举例:var book = { topic:" ...

  9. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

随机推荐

  1. IntelliJ IDEA(十) :常用操作

    IDEA功能详细,快捷键繁多,但是实际开发时不是所有都能用上,如果我们熟悉一些常用的也足够满足我们日常开发了,多的也只是提高我们的B格. 1.自定义主题 IDEA默认的主题有三款,分别是Intelli ...

  2. Java 读书笔记 (十二) Java Character 类

    在实际开发过程中, 我们经常会遇到需要使用对象,而不是内置数据类型的情况. 为了解决这个问题, Java语言为内置数据类型char提供了包装类Character类. 可以使用Character的构造方 ...

  3. OpenCV-Python学习01

    import tensorflow as tf 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Tue Dec 31 19:16 ...

  4. BZOJ_2631_tree_LCT

    BZOJ_2631_tree_LCT Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上 ...

  5. input表单中嵌入百度地图

    在做项目开发中,常常会用到定位的操作,比如在做一些资产房产等方面的业务的时候,需要知道资产的具体位置,并将位置信息保存下来,这个时候我们可以使用form表单嵌入百度地图的方式来实现这个功能,下面请看详 ...

  6. 关于String类型中==和equals的区别。

    "=="操作符的作用 1.用于基本数据类型的比较,比较的是值. 2.用于比较对象,判断对象的引用是否指向堆内存的同一块地址. equals的作用 用于比较两个对象的内容是否相同 代 ...

  7. 转载 python实例手册

    python实例手册 #encoding:utf8# 设定编码-支持中文 0说明 手册制作: 雪松 更新日期: 2013-12-19 欢迎系统运维加入Q群: 198173206 # 加群请回答问题 请 ...

  8. Java关于static的作用

    概述 只要是有学过Java的都一定知道static,也一定能多多少少说出一些作用和注意事项.如果已经对static了如指掌的请点击关闭按钮,看下去也只是浪费您宝贵时间而已.这篇随笔只是个人的习惯总结. ...

  9. 基于ZigBee模块与51单片机之间的简化智能家居项目简介(学生版本)

    5月份学校举行比赛,我们团队报名<智能家居>的项目,设计的总体思路用:QT写的上位机与ZigBee无线通信加51作为终端的简易版智能家居 电路连接:PC机->cc2530(协调器)- ...

  10. react源码总览(翻译)

    用react也有段时间了, 是时候看看人家源码了. 看源码之前看到官方文档 有这么篇文章介绍其代码结构了, 为了看源码能顺利些, 遂决定将其翻译来看看, 小弟英语也是半瓢水, 好多单词得查词典, 不当 ...