js实现浅拷贝和深拷贝
实现浅拷贝和深拷贝
1. 浅拷贝和深拷贝的区别
简单点说,浅拷贝拷贝完后,修改拷贝的内容可能会对源内容产生影响。而深拷贝就是拷贝前后的内容相互不影响。
那为什么拷贝前后的内容会相互影响呢?那就得知道原始数据类型和引用类型的区别了。
在内存中的存储方式不同,原始数据类型在内存中是堆存储,引用类型是栈存储 栈(stack)为自动分配的内存空间,它由系统自动释放;而堆(heap)则是动态分配的内存,大小不定也不会自动释放。在内存中存储方式的不同导致了原始数据类型不可变 原始数据类型和引用数据类型做赋值操作一个是传值一个是传址
- 原始数据类型:自然不用说了,它的值就是一个数字,一个字符或一个布尔值。
- 引用类型:是一个对象类型,值是什么呢?它的值是指向内存空间的引用,就是地址,所指向的内存中保存着变量所表示的一个值或一组值。
而在js中,有三大引用类型即Object、Array、Function。
因此在拷贝他们的时候,应该使用深拷贝来避免于源内容产生影响。
2.实现浅拷贝
2.1 object.assign()
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN];
var result= Object.assign(arr);
arr[2][a]='222';
console.log(arr);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN]; console.log(result);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
2.2 拓展运算符…
var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN]; var result= [...arr];
arr[2][a]='222'; console.log(arr);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN]; console.log(result);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
以上两种方法很简单,一句话就搞定啦。
3.实现深拷贝
3.1 JSON
var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN];
var result = JSON.parse(JSON.stringify(arr));
arr[2][a]='222';
console.log(arr);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
console.log(result);
//output: [1, [7,[9]], {a:'111'}, null, null, null, null]
所以可以看出,使用JSON不能实现对function、undefined、NaN的拷贝。
如果拷贝的数据不存在function、undefined、NaN这些数据类型的话,使用JSON是个很简便的方法呢。
3.2 递归遍历
想要对所有类型都能够实现深拷贝的话,那就只能自己封装个函数来实现啦。
var arr = [1, [7, [9]], { a: '1'}, function () {}, null, undefined, NaN]; function deepCopy(arr) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if(obj[key]===null){newObj[key]=null;continue;}
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
} var result = deepCopy(arr));
arr[2][a]='222';
console.log(arr);
//output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
console.log(result);
//output: [1, [7, [9]], { a: '1'}, function () {}, null, undefined, NaN]
js实现浅拷贝和深拷贝的更多相关文章
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
- Javascript/js 的浅拷贝与深拷贝(复制)学习随笔
js变量的数据类型值分基本类型值和引用类型值. 在ES6(ECMAScript6)以前,基本数据类型包括String.Number.Boolean.Undefined.Null. 基本类型值的复制(拷 ...
- [转] js对象浅拷贝和深拷贝详解
本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = ...
- js中浅拷贝和深拷贝以及深拷贝的实现
前言:2019年的第一篇分享... 一.什么是基本类型值和引用类型值?ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型.基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构 ...
- js的浅拷贝和深拷贝和应用场景
为什么会用到浅拷贝和深拷贝 首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e ...
- 小tips:JS之浅拷贝与深拷贝
浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: functio ...
- js相关--浅拷贝和深拷贝
1.js的数据类型 基本概述:js的数据类型分为两种,分别为基本数据类型和引用数据类型,它们俩的区别在于基本数据类型采用值传递,引用数据类型采用指针形式传递. 如下所示:引用类型通过简单的=进行复制, ...
- JS的浅拷贝与深拷贝
浅拷贝 //这样的拷贝有一个问题.那就是,如果父对象的属性等于数组或另一个对象,//那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能. function exten ...
- js之浅拷贝与深拷贝
浅拷贝:只会复制对象的第一层数据 深拷贝:不仅仅会复制第一层的数据,如果里面还有对象,会继续进行复制,直到复制到全是基本数据类型为止 简单来说,浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块 ...
随机推荐
- git 将本地项目关联到远程仓库
初始化 在本地需要关联到远程仓库的项目根目录下执行 git init 然后关联远程仓库 [project].你需要存在一个远程仓库,名字随意,然后执行下面的命令(去掉中括号)就可以关联到该仓库. gi ...
- 埃利斯(A.Ellis)ABCDE情绪管理理论
埃利斯(A.Ellis)ABCDE情绪管理理论A :Activating Events(诱发事件)B :Beliefs(个体对诱发事件的评价.解释.看法)C :Consequences(个体情绪和行为 ...
- ValueAnimator
import android.animation.ValueAnimator; import android.os.Bundle; import android.support.v7.app.AppC ...
- Python安装以及简单使用教程
以windows版本举例: 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载P ...
- 如何访问pod(6)
一.通过 Service 访问 Pod: 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 control ...
- centos7.6安装docker
先运行 yum update 然后卸载旧版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ do ...
- Python实现计算圆周率π的值到任意位的方法示例
Python实现计算圆周率π的值到任意位的方法示例 本文实例讲述了Python实现计算圆周率π的值到任意位的方法.分享给大家供大家参考,具体如下: 一.需求分析 输入想要计算到小数点后的位数,计算圆周 ...
- linux下后台启动springboot项目(转载)
我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn package”进行打包时,会打包成一个可以直接 ...
- java数据机构之自定义栈
一.栈的特点 1.线性数据结构 2.后进先出 二.使用数组来实现栈 //使用数组来实现栈 public class MyArrayStack<E> { //保存数据 private Obj ...
- django 之(三) --- 会话|关系|静态*
会话技术 HTTP在web开发中基本都是短连接[一个请求的生命周期都是从request开始到response结束]. 下次再来请求就是一个新的连接了.为了让服务器端记住用户端是否登陆过就出现了会话技术 ...