【javascript】详解javaScript的深拷贝
浅谈深拷贝和浅拷贝
深拷贝和浅拷贝的区别
为什么要使用深拷贝?
深拷贝的要求程度
怎么检验深拷贝成功
只对第一层级做拷贝
深拷贝数组(只拷贝第一级数组元素)
var array = [1, 2, 3, 4]; function copy (array) {let newArray = []for(let item of array) {newArray.push(item);}return newArray; } var copyArray = copy(array); copyArray[0] = 100; console.log(array); // [1, 2, 3, 4] console.log(copyArray); // [100, 2, 3, 4]
var array = [1, 2, 3, 4]; var copyArray = array.slice(); copyArray[0] = 100; console.log(array); // [1, 2, 3, 4] console.log(copyArray); // [100, 2, 3, 4]
var array = [1, 2, 3, 4]; var copyArray = array.concat(); copyArray[0] = 100; console.log(array); // [1, 2, 3, 4] console.log(copyArray); // [100, 2, 3, 4]
var array = [{ number: 1 },{ number: 2 },{ number: 3 } ]; var copyArray = array.slice(); copyArray[0].number = 100; console.log(array); // [{number: 100}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
深拷贝对象
var obj = {name: '彭湖湾',job: '学生' }function copy (obj) {let newObj = {};for (let item in obj ){newObj[item] = obj}return newObj; }var copyObj = copy(obj); copyObj.name = '我才不是彭湖湾呢! 哼 (。・`ω´・)'; console.log(obj); // {name: "彭湖湾", job: "学生"} console.log(copyObj); // {name: "我才不是彭湖湾呢! 哼 (。・`ω´・)", job: Object}
该方法不做解释(逃...)
var obj = {name: '彭湖湾',job: '学生' } var copyObj = Object.assign({}, obj); copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)'; console.log(obj); // {name: "彭湖湾", job: "学生"} console.log(copyObj); // {name: "我才不叫彭湖湾呢! 哼 (。・`ω´・)", job: "学生"}
Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target
var obj = {name: '彭湖湾',job: '学生' } var copyObj = { ...obj } copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)' console.log(obj.name) // 彭湖湾 console.log(copyObj.name) // 我才不叫彭湖湾呢! 哼 (。・`ω´・)
扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
var obj = {name: {firstName: '彭',lastName: '湖湾'},job: '学生' }var copyObj = Object.assign({}, obj) copyObj.name.lastName = '湖水的小浅湾'; console.log(obj.name.lastName); // 湖水的小浅湾 console.log(copyObj.name.lastName); // 湖水的小浅湾
拷贝所有层级
1.JSON.parse(JSON.stringify(XXXX))
var array = [{ number: 1 },{ number: 2 },{ number: 3 } ]; var copyArray = JSON.parse(JSON.stringify(array)) copyArray[0].number = 100; console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
能用大招杀的就不要用q杀嘛!!
2.手动写递归
var array = [{ number: 1 },{ number: 2 },{ number: 3 } ]; function copy (obj) {var newobj = obj.constructor === Array ? [] : {};if(typeof obj !== 'object'){return;}for(var i in obj){newobj[i] = typeof obj[i] === 'object' ?copy(obj[i]) : obj[i];}return newobj } var copyArray = copy(array) copyArray[0].number = 100; console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
【注意】:上文的所有的示例都忽略了一些特殊的情况: 对对象/数组中的Function,正则表达式等特殊类型的拷贝
存在大量深拷贝需求的代码——immutable提供的解决方案
const { Map } = require('immutable') const map1 = Map({ a: 1, b: 2, c: 3 }) const map2 = map1.set('b', 50) map1.get('b') // 2 map2.get('b') // 50
参考资料:
【javascript】详解javaScript的深拷贝相关推荐
- 详解JavaScript对象深拷贝
详解JavaScript对象深拷贝 在几乎所有编程语言中,对象都以引用形式保存给变量.复制给其他变量.JavaScript语言也是如此.因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个 ...
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
- 详解JavaScript变量类型判断及domReady原理 写得很好
原文:详解JavaScript变量类型判断及domReady原理 我们知道,在开发JavaScript时候,经常要判断JavaScript变量类型,此 JavaScript教程 详细介绍JS变量的判断 ...
- 详解JavaScript数组过滤相同元素的5种方法
详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm 转载于:https://www.cnblogs.com/bydzha ...
- Javascript详解
Javascript详解 案例一:使用JS完成注册页面的校验 案例介绍 用户在提交表单是,需要对用户填写的数据进行校验.因为用户如果输入非法内容,则会导致服务器的压力过大,因此,一般提供前端校验和后 ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串,在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
- 【JavaScript详解】一文掌握JavaScript基础知识(上)
JavaScript基础 前言 一.什么是JavaScript 1.JavaScript概述 2.javaScript有什么作用 二.JavaScript快速入门 1.引入JavaScript 2.基 ...
最新文章
- 语义分割改进:通过视频传播和标签松弛
- Linux中的In命令
- Spring整合Quartz定时发送邮件
- Java 8状态更新
- JAVA遇见HTML——JSP篇(JSP状态管理)
- PCRE正则表达式语法
- 华科计算机网络报告,华科-计算机网络实验报告-Java Socket编程-网络组建实验
- 如何动态改变Table Control的列抬头
- C语言课后习题(41)
- 如何查看selenium的版本号
- 【渝粤教育】电大中专工程图学基础 (2)作业 题库
- linux 离线安装node.js,Linux上离线安装node.js、Newman、newman-reporter-html
- 高等代数——大学高等代数课程创新教材(丘维声)——3.6笔记+习题
- java case when多分支判断_Apache Spark之单分支CaseWhen优化为IF
- Oracle nlssort()中文排序
- 《亲密关系》良句收录和观后观想
- 【计算机视觉40例】案例10:隐身术
- vivo X70系列搭载自研V1芯片9月9日发布
- 华为Nova7Pro和华为mate30 哪个好
- 一个故事讲完进程、线程和协程
热门文章
- iOS 单元测试 Tests 和 UITests
- C盘用户里的文件夹改名
- 音频剪辑软件分享,教你快速剪辑音频
- 《孙子兵法战略运筹之谋攻篇》
- 【Flink】Flink 做检查点 报错 Checkpoint Coordinator is suspending.
- springboot-单文件多文件下载Zip
- 笔记本此计算机到网络出现一个叉,笔记本电脑无线网络不可用并显示红叉的解决方...
- 【短视频运营】短视频制作流程 ( 视频存稿 | 写脚本 | 拍摄收音 | 提词器 | 后期剪辑 | 前测工具 | 检查违禁词 )
- 费马大定理与费马小定理
- 【成功解决】运行qt生成的.exe文件报“无法找到入口”的问题