js赋值 浅拷贝 深拷贝

用javascript对一个json数组深度赋值示例 <!DOCTYPE HTML> <html> <head> <title>test1</title> </head> <body> [removed] var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", "gas":{ "gasSheet":"气态流出物月报", "H_adjust":1 }, "time":{ "duration":31 } }, "units":{"title":"function"} } function show(obj){ var tmp={}; for(var i in obj){ i 立即下载

要区分是赋值还是浅拷贝和深拷贝首先要理解一下几个概念

ECMAScript中的数据类型可分为两种:
    基本类型:undefined,null,Boolean,String,Number,Symbol
    引用类型:Object,Array,Date,Function,RegExp等

堆和栈
        栈(stack)为自动分配的内存空间,它由系统自动释放;
        堆(heap)则是动态分配的内存,大小不定也不会自动释放。

不同类型的存储方式:
        基本类型:基本类型值在内存中占据固定大小,保存在栈内存中
        引用类型:引用类型的值是对象,保存在堆内存中,而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址

    值传递
        方法调用时,实际参数把它的值传递给对应的形式参数,函数接收的原始值得一个copy,此时内存中存在两个相等的基本类型,即实际参数和形式参数,后面方法中的操作都是对形参这个值得修改,不影响实际参数的值

    引用传递
        一般也称为地址传递。方法调用时,实际参数的引用(地址,而不是参数的值)被传递给方法中相对应的形式参数,函数接收的原始值的内存地址, 在方法执行中,形参和实参内容相同,只想同一块内存地址,方法执行中对引用的操作将影响到实际对象。

什么是深拷贝和浅拷贝

基本类型
        赋值

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true
			
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1

基本数据类型值不可变
基本类型的比较是值的比较

引用类型

引用类型的赋值是传址

let a = [1,2,3];
let b = a;
console.log(b); // [1, 2, 3]

    引用对象的指针指向同一个对象,项目之间有影响

浅拷贝
        对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝,此为浅拷贝。
        重新在堆中创建内存,拷贝后对象的基本类型互不影响,但是不能对对象中的子对象进行拷贝

1.手工浅拷贝

function simpleClone(initalObj) {    
    let obj = {};    
	for ( let i in initalObj) {
	    obj[i] = initalObj[i];
	}    
	return obj;
}

let obj = {
    a: "hello",
	b:{
		a: "world",
		b: 21
	},
	c:["Bob", "Tom", "Jenny"],
	d:function() {
		alert("hello world");
	}
}
let cloneObj = simpleClone(obj); 
console.log(cloneObj.b);   //{a: "world", b: 21}
console.log(cloneObj.c);   //["Bob", "Tom", "Jenny"]
console.log(cloneObj.d);   //ƒ () {alert("hello world");}

cloneObj.b.a = "changed";
cloneObj.c = [1, 2, 3];
cloneObj.d = function() { alert("changed"); };
console.log(obj.b);      //{a: "changed", b: 21}
console.log(obj.c);     //["Bob", "Tom", "Jenny"]
console.log(obj.d);     //ƒ () {alert("hello world");}

2.Object.assign()

Object.assign(target,...source)  返回值  目标对象
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
					
let obj = {a: {b: "javascript", c: 24}};
let newObj = Object.assign({}, obj);
				
newObj.a.b = "Hello";
console.log(obj.a.b)  //Hello

深拷贝

对基本数据类型进行值传递,对引用数据类型,创建一个新的对象,并复制其内容,此为深拷贝。
实现深拷贝 的几种方法:

1.JSON.parse()和JSON.stringify()

let obj = {
  name: 'leeper',
  age: 20,
  friend: {
	name: 'lee',
	age: 19
  }
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = 'Sandman';
obj.friend.name = 'Jerry';
console.log(obj);	//  {name: "Sandman", age: 20, friend: {age: 19,name: 'Jerry'}}
console.log(copyObj);	// {name: "leeper", age: 20, friend: {age: 19,name: 'lee'}}

以简单的方法做到深拷贝,但这种方法也有不少坏处  抛弃了对象的constructor        
只能处理Number String  Boolean  Array  扁平对象等能被Json表示的数据结构,RegExp对象是无法通过这种方式深拷贝,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON。   

2.递归拷贝

function checkedType(target) {
  return Object.prototype.toString.call(target).slice(8, -1)
}
function deepClone(target) {				  
  let result, targetType = checkedType(target)
  if (targetType === 'object') {
	result = {}
  } else if (targetType === 'Array') {
	result = []
  } else {
	return target
  }
  for (let i in target) {
	let value = target[i]
	if (checkedType(value) === 'Object' ||
	  checkedType(value) === 'Array') { 
	  result[i] = deepClone(value)
	} else { 
	  result[i] = value;
	}
  }
  return result
}

递归实现深拷贝但是当遇到两个互相引用的对象,会出现死循环的情况

深拷贝与浅拷贝的区别

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象

 

基于MicroBlaze与LWIP的FPGA以太网通信实战指南 本文详细介绍了基于MicroBlaze软核处理器与LWIP协议栈的FPGA以太网通信实现方案。通过Vivado工具链配置硬件设计,结合LWIP轻量级TCP/IP协议栈优化,提供高效、低成本的嵌入式网络解决方案,适用于工业控制等场景。文章包含硬件设计、软件配置及常见问题排查等实战指南。 阅读详情

相关推荐

手把手教你用mitmproxy抓包抖音数据流(附Python脚本模板)

本文详细介绍了如何使用mitmproxy抓包抖音数据流,包括环境搭建、证书安装和Python脚本模板。从mitmproxy配置到抖音API解析,提供完整的移动端数据流分析方案,帮助开发者快速掌握数据抓取技术,适用于应用优化、竞品分析和安全审计等场景。

weixin_33670786的博客 307

JS 中引用类型的引用赋值、浅拷贝和深拷贝

改变浅拷贝后对象的引用类型值,原对象的基本类型值就会被改变。深拷贝得到的对象是重新创建的新对象。所以改变赋值后对象的基本类型值和引用类型值,原对象的基本类型值和引用类型值都不会被改变。赋值得到的对象和原对象引用的是堆内存中的同一个地址,指向的是同一个对象。所以改变赋值后对象的基本类型值和引用类型值,原对象的基本类型值和引用类型值也会被改变。改变 obj2 的 name 属性和 hobby 属性的第一个元素,可以看到 obj 的 name 属性值没有被改变,hobby 属性的第一个元素值被改变。

花铛 840

一文带你完成ARMv8架构中的cache知识点

【摘要】 在最初开发ARM架构时,处理器的时钟速度和内存的访问速度大致相同。今天的处理器内核要复杂得多,其时钟速度可以快上几个数量级。但是,外部总线和内存设备的频率并没有扩大到同样的程度。有可能实现小块的片上SRAM,它可以以与内核相同的速度运行,但是与标准的DRAM块相比,这种RAM非常昂贵,因为后者的容量可以达到数千倍。在许多基于ARM处理器的系统中,访问外部存储器需要几十甚至几百个内核周期。 cache的技术背景 在最初开发ARM架构时,处理器的时钟速度和内存的访问速度大致相同。今天的处.

ABCCloud的博客 1853

深浅拷贝

涉及面试题:什么是浅拷贝?如何实现浅拷贝?什么是深拷贝?如何实现深拷贝? 首先浅拷贝现在也是前端面试题的一个难点 let a = { age: 1 } let b = a a.age = 2 console.log(b.age) // 2 浅拷贝 首先可以通过 Object.assign 来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign 只会拷贝所有的...

家有佳欣宝贝的博客 291

黑科技已上线|Lazada数据分析软件,一键式搞定你的店铺!

工欲利其事,必先利其器。在lazada跨境电商的整个流程中,适当的使用一些工具,不仅能大大的简化工作流程,而且可以提高实施效率。Mengla专为lazada电商卖家行业精细化分析lazada数据分析软件都有哪些强大功能! 一、两大优势: 1.海量数据: 数据覆盖面积大;数据分析维度逛;精确算法抓取海量数据;亿万数据秒级响应多种数据来源; 2.技术成熟: 深耕SaaS大数据挖掘;提供一站式数据分析服务;拥有领先的采集技术和运算模型架构; 二、Lazada数据分析软件的功能: 1.各国站点一键分析: 马来西亚

Menglakeji的博客 1145

第17篇:深入解析OpenEuler 24.03系统中的逻辑卷管理(LVM)

OpenEuler 24.03系统中的逻辑卷管理(LVM)提供了灵活的存储管理方案,通过在物理存储与文件系统间构建抽象层实现动态资源分配。

专注于系统运维、数据库、DevOps、虚拟化技术、docker、kubernetes、等云原生技术。 1689

js深度克隆(深度赋值)

克隆 浅度克隆:原始类型为值传递,对象类型为引用传递 深度克隆:所有对象的属性和值均全部复制,即所有新对象的修改不会影响原对象。 函数的克隆通过浅克隆就可以实现,并不影响原函数。因为函数克隆会在内存中单独开辟一片空间,互不影响。 var n=function(){ alert(1); } var m=n; m=function(){ alert(2); } Console.l...

yezi__6的博客 1787

【车载以太网】【架构】整体架构与协议标准

车载以太网架构图 应用层:DHCP /SOMEIP/DoIP/XCP/UDPNM 传输层:TCP/IP 网络层:IPv4/IPv6/ARP/ICMP 链路层:IEEE Ethernet MAC+VLAN 物理层:Ethernet PHY: 100BASE-T1/1000BASE-T1/100BASE-Tx

专注汽车软件开发、AutoSAR、车载以太网、SOA、EE架构。 8354

Js进阶3-赋值、浅拷贝、深拷贝深度解析

基本数据类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。引用数据类型对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date。

晴雪月乔的博客 283

YOLO11有效改进专栏目录

YOLO11改进专栏导航

A1983Z的博客 3677

第12步 支持向量机(SVM)

搭建SVM

Jet4505的博客 1050

js深度对象合并,深度赋值、拷贝

问题场景 平时我们在处理纯粹对象(键值对对象/JSON)时,如果使用Object.assign或者对象解构赋值,只会合并第一层的数据,而当合并嵌套对象,将会直接覆盖掉前面被合并对象里的数据,这是因为Object.assign和对象解构赋值都是只有第一层属于深拷贝,而往下都是浅拷贝,例如: var obj1 = { a: { b: 1, c: 1 } }; var obj2 = { a: { b: 2 } }; var obj3 = {}; // Object.assign Object.assign(obj

cyh5d的博客 1598

智元机器人开源具身仿真框架 Genie Sim 入门教程

GenieSim是AgiBot推出的具身智能仿真框架,提供完整闭环开发管道,包括轨迹生成、模型训练和基准测试。框架支持Docker容器化部署,要求Ubuntu 22.04和NVIDIA硬件环境。主要功能涵盖: 支持12种基准测试任务 提供ADER评估框架 集成UniVLA/RDT等基线模型 支持PICO/键盘遥操作 具备轨迹记录回放功能 提供完整API控制接口 开发者可通过Hugging Face获取场景资产,使用标准化ROS主题与仿真环境交互。框架特别优化了碰撞检测和抓取物理模拟,适用于从简单抓取到复杂操

2506_90492529的博客 2541

一文大白话讲清楚javascript数据的赋值、浅拷贝和深拷贝以及js内置的浅拷贝和深拷贝方法

一文大白话讲清楚javascript数据的赋值、浅拷贝和深拷贝以及js内置的浅拷贝和深拷贝方法

xiaobangkeji的博客 1210

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

js:JavaScript的赋值、浅拷贝、深拷贝

赋值:增加了一个指针指向已存在的内存地址 浅拷贝:申请了一个新的内存,拷贝第一层对象,不拷贝对象中的子对象 深拷贝:申请了一个新的内存,并复制其全部内容

彼方_的博客 444

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

js 浅拷贝直接赋值_浅拷贝与深拷贝-javaScript

浅拷贝与深拷贝为了更好的理解js的深浅拷贝,我们先来理解一些js基本的概念数据类型javascript中的数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和复杂的数据类型(也称作引用数据类型-Object)。当一个变量存放基本数据类型时与复杂的数据类型时分别存在以下的特点:基本数据类型的特点:变量直接将基本数据类型的值存储在栈(...

weixin_29883867的博客 275

js 浅拷贝直接赋值_浅析JavaScript解析赋值、浅拷贝和深拷贝的区别

一、赋值(Copy)赋值是将某一数值或对象赋给某个变量的过程,分为:1、基本数据类型:赋值,赋值之后两个变量互不影响2、引用数据类型:赋**址**,两个变量具有相同的引用,指向同一个对象,相互之间有影响对基本类型进行赋值操作,两个变量互不影响。// saucxslet a = "saucxs";let b = a;console.log(b); // saucxsa = "change";con...

weixin_42447681的博客 234

js 浅拷贝直接赋值_javascript深拷贝与浅拷贝

这是一道几乎所有面试都会面试的问题,为什么会有这个问题的因为这个问题涉及js基础知识比较多,所以经常拿来问,我们看下会涉及哪些知识:一 js基本类型的分类以及包含哪些?基础类型:undefined 、 null、number、string、boolean、symbol引用类型:object对象类型(Object 、Array 、Function 、Data)对于这两种类型有几个关键知识点:1 基础...

weixin_36340672的博客 114

【2022前端进阶】赋值、浅拷贝和深拷贝(js / javascript)

js中的8种数据类型和他们在内存中的分配形式,赋值、浅拷贝和深拷贝的区别,浅拷贝和深拷贝的多种实现方式

Cyrios_ykx的博客 635

js中的 赋值 浅拷贝 和 深拷贝 详细解读

js数据类型主要分基本数据类型和引用数据类型。前者包括Number,String等,后者主要是Object,因此以下会针对不同的数据类型来分析,需要的朋友可以参考一下前言:在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下。

人间草木 807

js 浅拷贝直接赋值_深入剖析javaScript中的深拷贝和浅拷贝

在面试时经常会碰到面试官问:什么是深拷贝和浅拷贝,请举例说明?如何区分深拷贝与浅拷贝,简单来说,假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝;我们先看两个简单的案例://案例1 var a1 = 1, a2= a1;console.log(a1) //1console.log(a2) //1a2 = 2; //修改 a2consol...

weixin_36087357的博客 186

JS中的赋值,浅拷贝,深拷贝

JavaScript中赋值、浅拷贝、深拷贝的区别

updydydy的博客 685

JavaScript 浅拷贝 深拷贝 赋值 引用 JS

前言 这个问题说严重也不严重,说不小也不小。 如果你也刚刚好碰到了这个问题。就跟着我一起了解一下吧! 基本类型和引用类型 基本类型 基本类型也称值类型,数值类型。 包括了 String Number Boolean Null Undefined Symbol(ES6新增,表示独一无二的一个值。MDN) 基本类型的是放在栈区的,访问的时候也是按值访问,就是正常的理解的赋值。 引用类型和浅...

cuandeqin2083的博客 379

JS赋值、浅拷贝和深拷贝

​ 同一个Array或者Object赋值给两个不同变量时,变量指向的是同一个内存地址,所以就会造成其中一个变量改变属性值,同时改变了另外一个变量的对应属性值。 ​ 而大多数实际项目中,我们想要的结果是两个变量(初始值相同)互不影响。所以就要使用到拷贝(分为深浅两种) 文章目录一、赋值二、浅拷贝三、简单的深拷贝:四、包含处理循环引用问题的深拷贝五、考虑symbol类型 一、赋值 ​ 赋值是将某一数值或对象赋给某个变量的过程,分为: ​ 1、基本数据类型:赋值,赋值之后两个变量互不影响 ​ 2、引用数

weixin_51670675的博客 1160

js 浅拷贝直接赋值_js的赋值与浅拷贝、深拷贝

昨天翻了下数组API,看到concat和slice方法,突然想到这个两个方法是浅拷贝还是深拷贝,结果陷入了死胡同,为什么MDN文档说是浅拷贝,但进行简单的操作为什么能复制成功啊,纠结半天后才弄清原由,原来我一直把赋值和深浅拷贝搞混了。首先不要把引用类型的赋值归结为浅拷贝,深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只拷贝一层对象的属性,而深拷贝则递归拷贝了...

weixin_30224231的博客 396

js赋值、浅拷贝、深拷贝的区别

js深浅拷贝

qq_44746317的博客 1425

JS核心知识点 - 赋值、浅拷贝、深拷贝。

1、赋值处理基本数据类型时,直接赋值是最简单的方式(会生成一个新的内存空间、不会共享内存空间,即不会修改原数据)。处理引用数据类型的时候需要考虑新数据修改是否能影响原数据、能影响的话可以用赋值(不会生成一个新的内存空间、会共享内存空间,会修改原数据)。2、浅拷贝处理引用数据类型的时、希望修改新数据时不能影响原数据(基础数据类型修改后原数据不会修改、引用数据类型修改后原数据会修改3、深拷贝(慎用)处理引用数据类型的时、希望修改新数据时不能影响原数据(

qq_61723274的博客 1330
上一篇: JS中从Array.slice()与Array.splice()的底层实现原理分析区别
coder_chenz
博客等级 码龄10年 8粉丝 12原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值