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

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

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

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

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. Spring Boot 使用 Log4j2

    Java 中比较常用的日志工具类,有 Log4j.SLF4j.Commons-logging(简称jcl).Logback.Log4j2(Log4j 升级版).Jdk Logging. Spring ...

  2. github代码搜索技巧

    github是一个非常丰富的资源,但是面对这丰富的资源很多人不知到怎么使用,更谈不上怎么贡献给他,我们需要使用github就要学习使用他的方法,学会了使用的方法,接受了他的这种观点我们才会慢慢的给他贡 ...

  3. JAVA中Integer.valueOf, parsetInt() String.valueOf的区别和结果

    先来看段代码 public class IntegerDemo { public static void main(String[] args) { String num = null; System ...

  4. 两个标签页定位第二个标签页元素时显示element not visible

    问题描述 web页面有两个标签页, 当转换到第二个标签页定位元素时, 显示element not visible. 代码 ... //省略 WebElement ele= browser.getEle ...

  5. Java程序员必备的Intellij插件

    以下是我用过不错的Intellij插件 1. .ignore 地址:https://plugins.jetbrains.com/plugin/7495--ignore 生成各种ignore文件,一键创 ...

  6. Elasticsearch笔记八之脑裂

    Elasticsearch笔记八之脑裂 概述: 一个正常es集群中只有一个主节点,主节点负责管理整个集群,集群的所有节点都会选择同一个节点作为主节点所以无论访问那个节点都可以查看集群的状态信息. 而脑 ...

  7. appium 【已解决】Android,每次启动手机中都会安装Appium settings和Unclock的方法

    环境介绍: 1.appium版本:1.4.16.1 2.真机运行 实现结果: 运行appium第一次运行则安装Appium settings和Unclock的apk,再次之后的运行则无需手动卸载,再次 ...

  8. hystrix 请求合并(6)

    hystrix支持N个请求自动合并为一个请求,这个功能在有网络交互的场景下尤其有用,比如每个请求都要网络访问远程资源,如果把请求合并为一个,将使多次网络交互变成一次,极大节省开销.重要一点,两个请求能 ...

  9. 危险 AI 花名册

    简评:臭不要脸 AI 名单,another side of AI. 这是一个可怕的 AI 清单,上面的各种商用 AI 项目都用于一些很恶劣的目的.请大家保持警惕. 区别对待类 · HireVue - ...

  10. 一个C#程序员学习微信小程序路由的笔记

    路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...