javascript: 复制数组时的深拷贝及浅拷贝(chrome 105.0.5195.125)
2023-09-14 09:01:15 时间
一,js代码:
<html> <head> <meta charset="utf-8"/> <title>测试</title> </head> <body> <button onclick="assignCopy()">无效:变量直接赋值</button><br/><br/><br/> <button onclick="sliceCopy()">浅拷贝:slice复制数组</button><br/><br/> <button onclick="concatCopy()">浅拷贝:concat复制数组</button><br/><br/> <button onclick="arrayFromCopy()">浅拷贝:Array.from复制数组</button><br/><br/> <button onclick="operatorCopy()">浅拷贝:操作运算符复制数组</button><br/> 说明:对于对象数组的整体拷贝,其内部对象则依旧为浅拷贝<br/><br/><br/> <button onclick="mapCopy()">深拷贝:map遍历复制数组</button><br/><br/> <button onclick="jsonCopy()">深拷贝:json复制数组</button><br/><br/> <script> //直接赋值复制数组 function assignCopy() { let array1 = new Array("1","2",{name:'老刘',age:30},"3"); let array2 = array1; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } //slice复制数组 function sliceCopy() { let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); let array2 = array1.slice(0); console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } //concat复制数组 function concatCopy() { let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); let array2 = array1.concat(); console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } //操作运算符复制数组 function operatorCopy() { let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); let array2 = [...array1]; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } //map遍历复制数组 function mapCopy() { let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); let array2 = [...array1.map(aInfo => { return Object.assign({}, aInfo) })]; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } // jsonCopy function jsonCopy() { let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); let array2 = JSON.parse(JSON.stringify(array1)); console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); array1[1] = '测试'; array1[2].name = '老王'; console.log('array1:'); console.log(array1); console.log('array2:'); console.log(array2); console.log('是否同一个数组:'); console.log(array1 === array2 ); } </script> </body> </html>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
无效时:可以看到array1、array2是同一个数组
浅拷贝:数组中的对象没有成功复制
深拷贝:数组中的对象也被成功复制为新对象
三,查看chrome的版本:
相关文章
- JavaScript & 6小时了解ES6基本语法
- JavaScript原生折叠扩展收缩菜单带缓冲动画
- JavaScript 浏览器对象模型 (BOM)
- javascript: addEventListener对事件冒泡和事件捕获的处理演示(chrome 108.0.5359.98)
- javascript: 用图片加载演示promise的应用(chrome 107.0.5304.110)
- javascript:innerText、innerHTML、textContent的区别(chrome 107.0.5304.62)
- javascript: 复制数组时的深拷贝及浅拷贝(chrome 105.0.5195.125)
- javascript转换日期字符串为Date对象
- [Javascript] Prototype Pattern
- [Javascript] Automate the process of flattening deeply nested arrays using ES2019's flat method
- [Javascript Crocks] Recover from a Nothing with the `coalesce` Method
- javascript:监控video全屏时取消静音(chrome 107.0.5304.87)
- javascript: 自定义鼠标拖动的滑块slider(chrome 105.0.5195.125)
- Chrome 开发者工具 Initiator 面板单击后看不到 JavaScript 源代码的解决方法
- 一串最简单的JavaScript代码,在Chrome开发者工具调试器里触发VM8标签的出现
- 使用Chrome开发者工具研究JavaScript的垃圾回收机制
- 使用Chrome开发者工具研究JavaScript函数的原生实现原理
- How JavaScript works in browser and node?
- ZoomCharts Javascript Crack