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

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

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

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

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. InnoDB页压缩技术

    Ⅰ.想起一个报错 1.1 创建表报错 (root@localhost) [(none)]> create tablespace ger_space add datafile 'ger_space ...

  2. 超越Ctrl+S保存页面所有资源

    如何抓取页面所有内容 基本需求 抓取页面所有内容主要包括一下内容: 页面内元素 页面元素包含服务端直接返回的元素,动态构建的元素 页面内所有资源 页面所有资源包含本页面所在域资源以及第三方域资源,同主 ...

  3. Java开源生鲜电商平台-搜索模块的设计与架构(源码可下载)

    Java开源生鲜电商平台-搜索模块的设计与架构(源码可下载) 说明:搜索模块针对的是买家用户,在找菜品找的很费劲下的一种查询方面.目前也是快速的检索商品. 对于移动端的APP买家用户而言,要求的速度在 ...

  4. Containerd 简介

    我们可以把 docker 抽象为下图所示的结构(此图来自互联网): 从图中可以看出,docker 对容器的管理和操作基本都是通过 containerd 完成的. 那么,containerd 是什么呢? ...

  5. Struts2(一)---struts2的环境搭建及实例

    刚刚接触struts2,有点懵懵懂懂,还是习惯于先写代码,然后慢慢来理解其中的思想. 这篇文章主要内容是strusts的环境搭建及通过一个简单的例子来理解到底是怎么使用struts来简化编程的. 1. ...

  6. I/O-----字节输入流

    package io.day03; import java.io.FileInputStream; import java.io.InputStream; public class day03 { p ...

  7. 在当前图纸中创建一个表格, AcDbTable 类

    Table 例子学习笔记在这个例子中,ARX向我们展示了ACDBTABLE类的一些基本操作方法,ACDBTABLE类是ACAD2005及其以后的产品,应该是说ACDBDATATABLE的升级产品,Ac ...

  8. 如何运行vue项目

    首先,列出来我们需要的东西:   node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm  npm的淘宝镜像   安装node.js 从node.js官网下载并安装node,安 ...

  9. 【移动端web】软键盘兼容问题

    软键盘收放事件 这周几天遇到了好几个关于web移动端兼容性的问题.并花了很长时间去研究如何处理这几种兼容问题. 这次我们来说说关于移动端软键盘的js处理吧. 一般情况下,前端是无法监控软键盘到底是弹出 ...

  10. Javapoet源码解析

    Javapoet:是生成.java源文件的开源API  github:https://github.com/square/javapoet   以生成一个HelloWrold.java文件为例: pa ...