JS深拷贝和浅拷贝图例理解

最新推荐文章于 2024-07-12 10:43:17 发布
最新推荐文章于 2024-07-12 10:43:17 发布
阅读量73 收藏
点赞数
文章标签： javascript
原文链接：https://www.cnblogs.com/echolun/p/7889848.html
版权

a引用数据类型存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

这里写图片描述

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

这里写图片描述


而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

这里写图片描述


那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，起步就达到深拷贝的效果了
 

这里写图片描述

 本文转载于：阅读原文

☆ inner ★ peace ☆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习（七十五）—图解浅拷贝和深拷贝
道阻且长，行则将至。
05-16 381
JavaScript学习（七十五）—图解浅拷贝和深拷贝 浅拷贝 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用 Object.assign(target, ...sources);ES6新增方法可以浅拷贝 深拷贝
JS深拷贝与浅拷贝
weixin_50313248的博客
06-06 577
1.基本概念 (1)深拷贝和浅拷贝针对的是引用类型。基本类型的名值存储在栈中，当复制时，栈内存会开辟一个栈内存。所以二者修改时，彼此不会影响。 (2)浅拷贝复制的是指向对象的指针，并没有开辟新的栈内存，原对象和新对象还是共享同一块内存，修改新对象自然会影响原对象。 深拷贝会开辟新的栈内存，原对象和新对象不共享同一块内存，修改新对象不会影响到原对象。 2.实现方式 2.1深拷贝的实现方式 2.1.1 JSON.parse(JSON.stringify()) 说明： 1.用JSON.str
JavaScript 浅拷贝与深拷贝
01-09 99
一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。 基本数据类型的特点：直接存储在栈(stack)中的数据 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释...
js中对象的深拷贝与浅拷贝
逸的博客
07-29 1349
一、概念 1.1 浅拷贝 浅拷贝:只拷贝对象中的基本类型的数据，而引用类型数据，复制后也是会发生引用。 简单来说，浅拷贝只复制指向某个对象的指针，这个指针指向对象在内存中保存的地址，并不会复制对象本身，新旧对象共享同一块内存。 示意图如图所示： 其中，0x2000代表对象在内存中的地址，obj1与obj2共同指向0x2000 1.2 深拷贝 深拷贝:将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上，并开辟了一块新的内存地址来存放复制的对象。 示意图如
JS浅拷贝与深拷贝
lovelyshuoshuo的博客
06-20 109
1.什么是浅拷贝和深拷贝 javascript中一般有值传递和引用传递两种方式: 按值传递的是基本数据类型（Number,String,Boolean,Null,Undefined），直接用 = 传递，一般存放于内存中的栈区，存取速度快，存放量小； 按引用传递的是引用类型（Object,Array,Function,Symbol），一般存放与内存中的堆区，存取速度慢，存放量大，其引用指针存于栈区，...
js特效脚本含源码和说明JS动态图例代码
03-31
js特效脚本含源码和说明JS动态图例代码本资源系百度网盘分享地址
JS动态图例demo代码
05-23
在JavaScript的世界里，动态图例是一种常见的交互式元素，它能增强用户对图表的理解和操作体验。本示例代码着重展示了如何使用JavaScript实现动态图例的功能，尤其适用于数据可视化项目。下面我们将深入探讨这个主题...
echarts设置图例颜色和地图底色的方法实例
12-09
在ECharts中，设置图例颜色和地图底色是通过配置项进行的，这涉及到对图表样式和数据的深入理解。下面将详细讲解如何实现这一功能。 首先，图例（legend）是ECharts中用于展示数据系列的一个组件，它允许用户通过...
林业设计制图图例符号-林业图例
10-16
7. **教育与培训**：了解并掌握林业图例符号对于林业专业的学生和从业者来说至关重要，这有助于他们理解和解析图纸，提高专业素养。 综上所述，林业设计制图图例符号是林业工作中的基础工具，它们提供了标准的沟通...
停车场图例和路口标志.zip室内设计CAD图库dwg格式下载
03-05
停车场图例和路口标志.zip室内设计CAD图库dwg格式下载室内设计CAD图库dwg格式下载志.zipÊÄɼCADÍ¿dwg¸ÊÏÔ 1.ʺÑÉÖ׸Öɼ²¿ 2.ʺ¸ÈÖ׸Öɼ²¿ 3.ʺ¹ËÖ׸Öɼ²¿
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 185
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 306
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 162
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1267
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 193
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
最新发布
专注基础架构领域
07-12 341
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 237
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 113
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
JavaScript之Chart.js图例(legend)
06-03
Chart.js是一个流行的JavaScript库，用于创建响应式、动态的图表。它提供了许多有用的功能，其中之一就是可以轻松地添加图例（legend）。 要添加图例，需要在Chart对象的配置选项中指定一个legend对象。例如，以下代码创建一个简单的柱状图，并将图例放置在底部： ```javascript var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { legend: { display: true, position: 'bottom' } } }); ``` 在上面的代码中，`legend`对象的`display`属性设置为`true`，表示要显示图例。`position`属性设置为`bottom`，表示将图例放置在底部。 当然，还有许多其他的选项可以配置，例如`labels`属性用于设置图例中的标签，`onClick`属性用于设置单击图例时的回调函数等等。具体的选项可以参考Chart.js的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值