javascript: 复制数组时的深拷贝及浅拷贝(chrome 105.0.5195.125)_刘宏缔的架构森林-编程思维

一,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的版本:

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/architectforest/p/16717331.html

object.freeze的应用_蓓蕾心晴-编程思维

概念 Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对

js 模块化- 01 模块化前传 _程序员优雅哥(\/同)-编程思维

JS 模块化 01 - 模块化前传 前端技术的发展不断融入了很多后端的思想,逐步形成前端的 ”四个现代化“:工程化、模块化、规范化、流程化。这个主题介绍 模块化 ,主要内容包括模块化前传(早期模块化的实现)、模块化的四个规范(Common JS、AMD、CMD、ESM)。本文就聊聊早期的模块化。 1. 原始时代 - 无

js中数组的操作方法_markguan-编程思维

今天给大家带来一篇有关数组操作方法的文章。 新建数组 方法一:通过new运算符创建一个数组构造函数。 var arr = new Array(); 方法二:通过方括号直接创建直接量数组。 var arr = [1,2,3]; 添加数组中的元素 方法一:通过下标添加元素。 var arr = new A

leetcode_三数之和_程序员翔仔-编程思维

题目信息 源地址:三数之和 给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0,请你找出所有和为 0 且不重复的三元组。 注意:答案中不可以包含重复的三元组。 提示信息 示例 1 输入:nums = [-1,0,1,2,-1,-4] 输出:[[-

快速记住js数组栈和队列函数_蓓蕾心晴-编程思维

自从开了这个公众号,一直没时间为大家分享技术文章,今天得空,来开启的我首篇发文。         首先说,我也是一个前端小白,以后且叫我小叙妹妹就可,刚刚步入前端行业半年时间,很多东西都还在不断学习中,所以以后公众号为大家分享的,大部分都是一些个人学习总结的笔记与心得,如果看到好的技术文章,也会为大家分享出来(当然,一

js 中如何优雅地创建多维数组 - 编程思维

前言已经坚持力扣刷题 80 天了,其中经常需要创建多维数组比如给你两个需求:创建一个 10 * 10 的数组,初值为 0创建一个 10 * 10 的数组,值为 0-99想知道掘友们会如何创建这两个数组呢?常规方法在这里展示一下常见的三种创建多维数组的方法for 遍历最经典的方法就是 for 循环下面是需求一的代码con

【重点】快速记忆javascript的数组api - 编程思维

前言  在学习JavaScript数组的时候经常感觉有些api很陌生,那有什么方法可以方便记忆这些api呢?记住所有api可能性不大,但通过对数组的api进行分类,记住这些分类总不难吧?然后要用到哪个api的时候就想想属于哪个分类,然后在那个分类的api里面找,应该就可以快速找到了。然后可以通过 MDN 网站来查找这些