javascript实现深浅拷贝
深浅拷贝通常是对于引用数据类型进行的(数据类型为:对象(Object)、数组(Array)、函数(Function))
浅拷贝:
let obj = {id: 1, name: 2};
let newObj = obj; setTimeout(() => {
newObj.id = 2;
console.log(obj,newObj)
},1000); // 输出如下
// { id: 2, name: 2 } { id: 2, name: 2 }我们发现,随着newObj的变化,obj也随之变化,这明显不是我们想要的,数组也同样如此,那么就需要进行深拷贝了。
深拷贝:
方法1(封装函数)
// 构造一个深拷贝函数
function deepClone(obj) {
var result = Array.isArray(obj) ? [] : {}; // 判断当前传进来的是对象还是数组
for(var key in obj) {
if (obj.hasOwnProperty(key)) { // 该key是否存在
if (typeof obj[key] === 'object' && obj[key] !== null) { // obj[key]如果为object,递归调用该方法,obj[key] = arr || obj[key] = {}都为'object'
result[key] = deepClone(obj[key]);
} else {
result[key] = obj[key];
}
}
}
return result;
}let arr1 = [1,2,3,4,5];
let arr2 = deepClone(arr1);
arr2[0] = 'hello';
arr2[4] = 'world';
console.log(arr1); // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 'hello', 2, 3, 4, 'world' ] let obj1 = {id: 1, name: 1, love: [1,2,3,4], test: {id: 1, name: 1}};
let obj2 = deepClone(obj1);
obj2.love[0] = 'ecmascript';
obj2.test.id = 2;
console.log(obj1);
// { id: 1, name: 1, love: [ 1, 2, 3, 4 ], test: { id: 1, name: 1 } }
console.log(obj2);
// { id: 1,name: 1,love: [ 'ecmascript', 2, 3, 4 ],test: { id: 2, name: 1 } }方法2(JSON.parse和JSON.stringify)
let obj1 = {
id: 1,
name: 1
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.id = 2;
obj2.name = 2;
console.log(obj1,obj2);
// { id: 1, name: 1 }
// { id: 2, name: 2 }方法3(在nodeJS项目中,有一个lodash模块,我们可以利用它提供的方法来实现深度克隆,或者将其下载到本地,引入它对应的js文件也可如下)
lodash中文网 https://www.lodashjs.com/docs/latest
// npm install lodash -S const cloneDeep = require('lodash/cloneDeep')
let arr3 = [1,2,3,4];
let arr4 = cloneDeep(arr3);
arr4[1] = 'hello';
console.log(arr3,arr4); // [ 1, 2, 3, 4 ]
// [ 1, 'hello', 3, 4 ]
javascript实现深浅拷贝的更多相关文章
- JavaScript之深浅拷贝
数组的浅拷贝 如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一个新数组的特性来实现拷贝.比如: , true, null, undefined]; var new_arr ...
- javascript简单实现深浅拷贝
深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝: 首先我们来了解一下javascript的 ...
- JavaScript深浅拷贝区别
分享一篇自己关注的微信订阅号(前端大全)文章:JavaScript浅拷贝与深拷贝 作者:浪里行舟 https://github.com/ljianshu/Blog/issues/5 这里很详细的讲解了 ...
- JavaScript数据存储和深浅拷贝实际运用
JavaScript分两种数据类型.1.简单数据类型有:number, string, boolean, undefined和null当声明一个简单数据类型的变量时,在内存中会把数据存在栈里.2.复杂 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- JavaScript深浅拷贝
深浅拷贝 基本类型和引用类型 ECMAScript 中的变量类型分为两类: 基本类型:undefined,null,布尔值(Boolean),字符串(String),数值(Number) 引用类型: ...
- Javascript 中的深浅拷贝
工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...
- JavaScript中的深浅拷贝
深浅拷贝 在JS中,数据类型分为两类: 简单数据类型:Number.Boolean.String.undefined 引用数据类型:Array.Object.Function 简单数据类型通常 ...
- Python开发【第二章】:Python深浅拷贝剖析
Python深浅拷贝剖析 Python中,对象的赋值,拷贝(深/浅拷贝)之间是有差异的,如果使用的时候不注意,就可能产生意外的结果. 下面本文就通过简单的例子介绍一下这些概念之间的差别. 一.对象赋值 ...
随机推荐
- NLP 中任务及相关概念
命名实体识别 命名实体识别(Named Entity Recognition,简称NER),又称作"专名识别",是指识别文本中具有特定意义的实体,主要包括人名.地名.机构名.专有名 ...
- centos 7 安装 nginx 或 apache,及其比较
来自 知乎 陈湛翀 的回答:https://www.zhihu.com/question/19571087/answer/12313829 nginx 和 apache 比较 nginx 相对 apa ...
- 分页控件SSTab
一.分页控件SSTab概述1.作用:采用分页形式查询或编辑数据表中数据.2.添加到控件箱菜单命令:工程 | 部件,选择:Microsoft Tabbed Dialog Control 6.0 (SP6 ...
- Flutter SDK安装(windows)
Flutter集成了Dart,因此不需要单独安装dart-sdk.Flutter的SDK可以从官网下载:https://flutter.io/sdk-archive/#windows 在Flutter ...
- 应用程序不了找到mysql中的表,客户端可以正常打开表
原因是mysql中区分大小写的参数:lower-case-table-names=1 默认是区分大小写的,程序中代码可能是大小写混合的,其中访问数据库的sql是大小写混合的.所以找不到数据库中的表 ...
- 基于VSFTP的本地YUM源及光盘YUM源搭建
基于VSFTP的本地YUM源及光盘YUM源搭建 一.yum环境的本地源搭建(基于VSFTP): 1)安装vsftp; *********************************** ...
- HBase设计规范(转载)
在这里讲什么设计规范实在是有些不知天高地厚,毕竟笔者本人也只是一个大数据技术的初学者,断然不敢制订什么设计规范的,所以请原谅我的狂妄,这个设计规范,只是本人对自己制订的,与别人无关. 之前,HBase ...
- springboot自定义异常数据
一.源码分析 自定义异常数据之前我们先看看一下源码 上述代码意思是如果你没有提供就使用springboot提供的类 这是springboot提供的异常属性类,我们想要自 ...
- Centos logrotate截断tomcat日志文件
1. 设置logrotate轮转日志文件 tomcat日志目录:/usr/local/tomcat/apache-tomcat-8.5.34/logs /etc/logrotate.d/目录下创建to ...
- Shell入门01
Shell入门 1.基于硬件的虚拟化 2.基于平台的虚拟化 3.基于服务的虚拟化 4.基于库的虚拟化 5.基于操作系统的虚拟化 管理员使用Shell程序与操作系统进行交互,之前学习的shell脚本都是 ...