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

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

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

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

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. Java生成名片式的二维码源码分享

    世界上25%的人都有拖延症——但我觉得这统计肯定少了,至少我就是一名拖延症患者.一直想把“Java生成名片式(带有背景图片.用户网络头像.用户昵称)的二维码”这篇博客分享出来,但一直拖啊拖,拖到现在, ...

  2. Spring Boot + Websocket + Thymeleaf + Lombok

    https://github.com/guillermoherrero/websocket 验证错误消息文件名字:是默认名ValidationMessages.properties,编译后存放在cla ...

  3. Oracle12c中功能及性能新特点之with子句的增强

    1. 设置创建测试表.DROP TABLE test PURGE; CREATE TABLE test ASSELECT 1 AS idFROM   dualCONNECT BY level < ...

  4. 三. 200多万元得到的创业教训--创业并不需要app

    摘要:有个点子,研发app或网站,推广,不断改进,探索盈利模式.这个通用的移动互联网创业流程.但我认为,在某些特定的商业模式下,"研发app或网站"这步可以砍掉或推迟. 健生干货分 ...

  5. storage.go

    package storage import (     "fmt"     "os" ) const DEFAULT_STORAGE_ENGINE = &qu ...

  6. session.go

    package {             so.ttl = ttl         }     } } // WithContext assigns a context to the session ...

  7. BZOJ_1097_[POI2007]旅游景点atr_状压DP

    BZOJ_1097_[POI2007]旅游景点atr_状压DP 题面描述: FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣 的事情.经过这些城市的顺 ...

  8. myeclipse maven tomcat插件 创建web工程

    自从有了云笔记,很久不写博客了.今天写了使用Freemarker静态化JSP页面,索性就发出来.初学,勿喷. 这篇文字以前放在云笔记里,当然里面有很多借鉴网络上的东西,而自己也使用Maven很久了,索 ...

  9. 深入学习MySQL事务:ACID特性的实现原理

    事务是MySQL等关系型数据库区别于NoSQL的重要方面,是保证数据一致性的重要手段.本文将首先介绍MySQL事务相关的基础概念,然后介绍事务的ACID特性,并分析其实现原理. MySQL博大精深,文 ...

  10. Gatling简单测试SpringBoot工程

    前言 Gatling是一款基于Scala 开发的高性能服务器性能测试工具,它主要用于对服务器进行负载等测试,并分析和测量服务器的各种性能指标.目前仅支持http协议,可以用来测试web应用程序和RES ...