• JS中数组的一些笔记


    今天工作时碰到一个需求,有两个数组arrayChild, arrayFather, 要求:
    1、往数组arrayChild中放入一个元素;
    2、将当前的数组arrayChild放入arrayFather中;
    3、清空数组arrayChild,将一个新元素放进去;
    4、将放了新元素的arrayChild放入数组arrayFather中。
    刚开始是这么写的:

    const arrayChild = [];
    const arrayFather = [];
    
    arrayChild.push(0, 1);
    arrayFather.push(arrayChild);
    
    arrayChild.splice(0);
    
    arrayChild.push(3, 4);
    arrayFather.push(arrayChild);
    
    console.log(`arrayFather = ${arrayFather}`);
    
    预想结果是:  
    arrayFather = [[0, 1], [3, 4]];  
    实际结果:  
    arrayFather = [[3, 4], [3, 4]];
    

    为什么呢?向公司老司机请教,才知道原来创建一个数组时,会在内存中开辟一块堆内存A,我的arrayChild是在另一块栈内存中存入了指向堆内存A的地址,所以使用const声明的数组,还可以继续向数组内添加东西。在第一步,arrayFather.push(arrayChild),也是将arrayFather指向了arrayChild指向的堆内存A,然后splice是清除arrayChild中的数据,就是将堆内存A中的数据全部清除,所以这时arrayFather和arrayChild都是空的。这时再往arrayChild中添加新数据,那么arrayFather = arrayChild = [3, 4], 然后arrayFather又push了一次arrayChild,所以最后arrayFather = [[3, 4], [3, 4]]

    那想要实现需求怎么办呢?可以用这种方法:

    let arrayChild = [];
    const arrayFather = [];
    
    arrayChild.push(0, 1);
    arrayFather.push(arrayChild);
    
    arrayChild = [];
    
    arrayChild.push(3, 4);
    arrayFather.push(arrayChild);
    
    console.log(`arrayFather = ${arrayFather}`);
    
    预想结果是:  
    arrayFather = [[0, 1], [3, 4]];  
    实际结果:  
    arrayFather = [[0, 1], [3, 4]];
    

    这里的arrayChild = []就是重新开辟一片内存了,所以原来的值还会存在,相当于:
    1、首先分配了一块内存(数组的值存放在堆中,索引存放在栈中),存了个数组[0, 1],索引是arrayChild
    2、将arrayFather(前两个地址指针)指向这块堆内存
    3、另外分配一块新内存,存了数组[3, 4],把索引arrayChild重新指向这里
    4、将新内存的地址存入arrayFather(的arrayFather[2]和arrayFather[3])中,因为原先的arrayChild的值还在被arrayFather引用,所以这块内存不会被回收,所以最终的目的达成。
    综上所述,问题的根源在于对数组的本质不了解。新建数组,就是新分配一块堆内存存放数组的值。堆内存的地址存放在一块栈内存中,组成数组的索引

  • 相关阅读:
    面试6 在c#中如何声明一个类不能被继承
    面试5 如何理解静态变量,局部变量,全局变量
    面试4 你在什么情况下会用到虚方法?它与接口有什么不同
    面试3 不用系统自带的方法将字符串类型123456转换为值类型
    面试2 递归的算法求1,1,2,3,5,8.......的第30位数是多少,然后求这些数的和.
    面试1 SQL SERVER 查询第20行到30之间的数据
    ubuntu安装nginx
    ubuntu上使用ufw配置管理防火墙
    ubuntu上安装docker
    ubuntu上使用vim编辑文本内容
  • 原文地址:https://www.cnblogs.com/wz71014q/p/9606493.html
Copyright © 2020-2023  润新知