JavaScript-深浅拷贝
浅拷贝
概念:浅拷贝即只复制对象的引用,所以副本最终也是指向父对象在堆内存中的对象,
无论是副本还是父对象修改了这个对象,副本或者父对象都会因此发生同样的改变;
方法:
+ 简单赋值
+ 简单的遍历
+ 扩展运算符
+ assign
1.简单赋值
let obj = {name: '张三',age: 18,o:{gender: '男',},arr:[10,20]}let newObj = objnewObj.name = '李四'console.log(newObj)console.log('原始的',obj)
2.简单的遍历
let obj = {name: '张三',age: 18,o:{gender: '男',},arr:[10,20]}let newObj = {}for (let key in obj) {newObj[key] = obj[key]}// newObj.name = '李四'newObj.o.gender = '保密'console.log(newObj)console.log('原始的',obj)
3.扩展运算符
let obj = {name: '张三',age: 18,o:{gender: '男',},arr:[10,20]}{...obj}// newObj.name = '李四'newObj.arr[0] = 500console.log(newObj)console.log('原始的',obj)
4. assign
let obj = {name: '张三',age: 18,o:{gender: '男',},arr:[10,20]}
let newObj = Object.assign(obj)newObj.name = '李四'console.log(newObj)console.log('原始的',obj)
深拷贝
概念:直接复制父对象在堆内存中的对象,最终在堆内存中生成一个独立的,与父对象无关的新对象。
深拷贝的对象虽然与父对象无关,但是却与父对象一致。两者互不影响
+ json反序列化
+ 递归遍历对象
+ lodash
+ 通过JQuery的extend方法实现深拷贝
1.json反序列化
let obj = {name: '张三',fn: function () { },a: null,o: {gender: "男",obj1: {age: 18}},arr: [10, 20]}
let newObj = JSON.parse(JSON.stringify(obj))
2.递归遍历对象
let obj = {name: '张三',fn: function () { },a: null,o: {gender: "男",obj1: {age: 18}},arr: [10, 20]}function deepClone(obj) {// 判断是数组还是对象 然后给cloneObj赋值let cloneObj = Array.isArray(obj) ? [] : {}// 判断是不是对象还是数组if (obj && typeof obj == 'object') {// 第一层遍历for (var key in obj) {// 如果是对象或者数组 让他继续遍历 if (obj[key] && typeof obj[key] == 'object') {cloneObj[key] = deepClone(obj[key])} else {cloneObj[key] = obj[key]}}}return cloneObj}
3.lodash
let obj = {name: '张三',fn: function () { },a: null,o: {gender: "男",obj1: {age: 18}},arr: [10, 20]}let newObj = _.cloneDeep(obj)// console.log(newObj)newObj.o.gender = '女'newObj.o.obj1.age = 20newObj.arr[0] = 500console.log('拷贝的', newObj)console.log('原始的', obj)
4.juquer
let targetObj = {id:1,msg:{sex:"男"}
}let obj = {id:2,name:"小蜗",msg:{age:22}
}$.extend(true,targetObj,obj)
以上便是所有内容,如有不对请留言指正~~
JavaScript-深浅拷贝相关推荐
- JavaScript 的 深浅 拷贝
深浅 拷贝 所谓的 深拷贝 浅拷贝 是 对 引用 数据类型而言的 如果变量储存的数据是 基本数据类型 例如 字符串,数值,布尔值等 没有所谓的 深浅拷贝 浅拷贝所谓的 浅拷贝 只是 复制变量中存储的内 ...
- php深浅拷贝,JavaScript 中的深浅拷贝
工作中经常会遇到需要复制 JavaScript 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 一.为什么会有深浅 ...
- JS(JavaScript)中实现深浅拷贝的几种方式(详细阅读 非常重要)。
在了解深浅拷贝之前,我们先一起来简单来了解一下,JavaScript 数据存储的方式,以及数据类型(). JavaScript 中数据存储分为 简单数据类型和复杂数据类型(引用数据类型) 其中 5 种 ...
- JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录 一.递归 1.1 概念 1.2 出口 1.3 递归经典问题:递归求斐波那契数列 1.4 递归经典问题:递归求阶乘 1.5 递归求一个数字各个位数上的数字的和 1.6 递归遍历DOM树 二 深浅拷 ...
- JavaScript学习笔记(四)---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
- JavaScript专题(五)深浅拷贝
JavaScript专题之深浅拷贝 了解拷贝背后的过程,避免不必要的错误,Js专题系列之深浅拷贝,我们一起加油- 目录 一.拷贝示例 二.浅拷贝 三.深拷贝的方法? 四.自己实现深浅拷贝 一.拷贝示例 ...
- JavaScript的深浅拷贝
首先,要知道基本类型是没有深浅拷贝之分的,因为基本类型在进行复制时,就是将值直接复制给另一个: 而引用类型在进行复制时,由于占用内存比较大,只会复制引用地址,相当于复制只是共用了同一个对象/数组. 这 ...
- boolean类型_JS核心理论之《数据类型、类型转换、深浅拷贝与参数传递》
数据类型 基本类型:共7种,也被称为值类型,是一种既非对象也无方法的数据.包括:string.number.bigint.boolean.null.undefined.symbol. 除了 null ...
- 数组深拷贝_JavaScript之深浅拷贝
前面给大家分享过了JavaScript的类型判断,今天来跟大家分享一下JavaScript的深浅拷贝. 1. 数组的浅拷贝 如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一 ...
- Python全栈开发【基础-09】深浅拷贝+while循环
专栏介绍: 本专栏为Python全栈开发系列文章,技术包括Python基础.函数.文件.面向对象.网络编程.并发编程.MySQL数据库.HTML.JavaScript.CSS.JQuery.boots ...
最新文章
- (八十二)利用苹果服务器获取导航信息和绘制路径
- npm WARN enoent ENOENT: no such file or directory
- java ibatis 获取执行的sql_小程序官宣+JAVA 三大框架基础面试题
- (4)verilog语言编写计数器
- 网络编程t-io介绍
- WinMerge 操作界面汉语版(截图),以及简单功能介绍
- 内蒙古师范大学计算机与信息工程学院--《大数据存储与处理》期末考试试卷...
- iOS可视化动态绘制连通图(Swift版)
- EF4的系列文章,mark一下
- Hadoop HDFS原理
- Java web简单注册和登陆项目案例
- Microsoft Visual Studio 2010(vs2010) 中文版安装
- 人工智能—— 产生式表示法
- 二层交换机,三层交换机及四层交换机的区别
- java文件乱码_Java文件读取乱码问题解决
- 配置maven的中央仓库mirro镜像
- 单点登录--微服务的登录解决方案
- Linux Kernel Panic报错解决思路
- No converter found for return value of type错误解决以及消息转化器简单分析
- QGIS Osgeo4W国内下载源(武汉大学源),下载速度快!