js数组学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_52683504/article/details/128192269

文章目录

数组的创建
数组的长度
二维数组的遍历
数组类型的检测
练习：
基本数据类型和引用数据类型（面试必问）
数组的深克隆和浅克隆（面试必问）

数组的创建

数组里面可以包含任意的数据类型，不需要指定哪一种类型

var a=[]

访问数组的注意事项

1.var a=[1,2,,,]
a.length==4//注意长度不是5
2.访问不存在的项时，不会报错，会返回undefined
var a=[1,3,4]
a[4];//输出undefined
3.访问数组中的空项，也是返回undefined
var a=[1,2,,4]//有空元素的数组，叫做稀疏数组
a[2];//undefined

数组的长度

要清空一个数组，可以将数组的长度变为0

var arr = [1, 2, 3, 4, 5];
arr.length = 0;//清空数组，变成了空数组
console.log(arr);//arr[]
console.log(arr[0]);//undefined

如果数组的长度变为了arr.length=15,那么数组会变成arr[1,2,3,4,5, , , , , , , , , , ]
数组的长度会随着元素的增加而增加
遍历数组可以下面这种写法:

 var a=[1,2,3,4,['a','b']];
        var b=[];
        for(var i=0;i<a.length;i++){
            console.log(b.length);
            b[b.length]=a[i];//数组的长度会随着元素的增加而增加，会自动增加
            console.log(b.length);
        }
        console.log(a,b);

二维数组的遍历

var arr = [
  [2, 5, 8],
  [11, 22, 33],
  [55, 88, 66],
  [23, 56, 89],
];
for(var i=0;i<a.length;i++){
	for(var j=0;j<a[i].length;j++){
		console.log(a[i][j]);
]
}

数组类型的检测

Array.isArray();
Array.isArray([1, 2, 3]); // true
Array.isArray({ name: "清心老师", age: 18 }); // false
Array.isArray([]); // true

练习：

1.数组的翻转

思路一：创建一个空数组

 var a=[1,2,3,4,5,6,7];
        var b=[],j=0;
        for(var i=a.length-1;i>=0;i--){//a数组进行反向遍历
            b[j]=a[i];
            j++;
        }
        console.log(b)

思路二:双指针

 var a=[1,2,3,4,5,6,7];
 var i=0,j=a.length-1;//一个指针指向头，一个指向尾
        while(i<j){
        //不使用中间变量交换两个变量
            a[i]^=a[j];
            a[j]^=a[i];
            a[i]^=a[j];
            i++;
            j--;
        }
        console.log(a);

2.删除数组中指定的元素

数组的空间是连续的，元素不能删除，只能覆盖，删除一个元素，就得让其他元素向前移动
题目:删除数组中大于10的元素

分析：
会变的:数组的长度以及数组的下标
注意：在改变数组的长度的时候，不要把数组的长度赋值给另一个变量，然后让这个变量发生变化，这样子数组的长度并没发生改变

  var a=[1, 4, 12, 6, 33, 15, 30];
        //  var len=a.length;//注意：这里如果写的是len，下面改变的是len，不是数组的长度，所以这里不可以赋值给len 
           for(var i=0;i<a.length;i++){
                if(a[i]>10){
                    for(var j=i;j<a.length;j++){
                        a[j]=a[j+1];
                    }
                    // len=len-1;
                  a.length=a.length-1;
                    i=i-1;
                }
           }
           console.log(a);

随机生成指定范围内的颜色

思路：将颜色存储在数组中（范围），然后随机生成数组下标(随机)

<style>
        .ball{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="ball" id="J_ball"></div>
    <script>
        var ball=document.getElementById("J_ball");
        var a=['blue','red','orange','pink'];
        var len=a.length;
        ball.style.backgroundColor=a[Math.random()*len>>0]//记得取整

    </script>
</body>

基本数据类型和引用数据类型（面试必问）

重点：存储方式不同
问题引入：为什么b的值没有发生改变，而arr2的值改变了

// 代码片段一
var a = 10;
var b = a;
a = 20;
console.log(a); // 20
console.log(b); // 10

// 代码片段二
var arr1 = [1, 2, 3, 4];
var arr2 = arr1;//这里复赋值的是地址，两个数组指向堆中的同一个地址
arr1[0] = "A";
console.log(arr1[0]); // A
console.log(arr2[0]); // A

基本数据类型是存储在栈中的，而引用数据类型则存储在堆中
代码片段一：
a和b两个变量对应的是两个不同的空间，改变a的值对b没有影响
在这里插入图片描述
代码片段二：
引用数据类型的存储方式：

栈空间中存储着引用类型在堆空间中的地址，堆中存储着数据内容

分析：声明数组，会在栈中开辟两个空间，栈空间中存储着他们在堆中的地址，堆空间中存储着数据内容，因为指向的是同一个地址，所以当arr1修改了，即地址中指向的内容修改，所以arr2也会修改

数组的深克隆和浅克隆（面试必问）

1.var arr = [1, 2, 3, ["a", "b", "c"]];
2.var arr2 = [];
3.for (var i = 0; i < arr.length; i++) {
    arr2.push(arr[i]);//
}
console.log(arr); // [1,2,3,['更改','b','c']]
console.log(arr2); // [1,2,3,['更改','b','c']]
// arr 和 arr2是两个不同数组，其栈内存中指向堆内存的地址是不一样的
console.log(arr == arr2);
false;
// arr[3] 和 arr2[3] 是全等的，即两者指向堆内存中的同一个地址
console.log(arr[3] === arr2[3]); // true
// 修改arr[3][0]的值，arr与arr2中的同时都更新了
arr[3][0] = "更改";
console.log(arr); // [1,2,3,['更改','b','c']]
console.log(arr); // [1,2,3,['更改','b','c']]

在第三行代码中，将arr1中的每一个元素遍历，然后赋值给arr2,不是直接赋值地址，（arr2=arr1这种形式是直接赋值地址)
所以arr1和arr2是两个指向不同堆地址的数组，但是在遍历的时候，arr1中的第3个元素是直接赋值的，也就是两个地址是相同的，所以当改变arr1[3]的时候，arr2也改变，这就是数组的浅克隆
如果要深克隆，需要把["a", "b", "c"]每个元素都取出来，涉及到递归，后面讲