JavaScript——数组详解2(数组的基本操作)

吐槽君 分类:javascript

这是我参与更文挑战的第4天,活动详情查看: 更文挑战

数组的访问与遍历

1. 访问数组元素

访问数组元素很简单,只需要通过“数组名[下标]”即可访问。

var arr = new Array(3,4,5);
console.log(arr[0]);
 

2. 遍历数组元素
遍历数组元素有三种,分别是for ,for in ,for of。

<script>
        var arr = new Array(3,4,5);
        //for 循环遍历数组
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        //for in遍历数组
        for(var i in arr){
            console.log(arr[i]);
        }
        //for of 循环遍历数组
        for(var i of arr){
            console.log(i);
        }
    </script>
 

image.png

元素的添加,修改与删除

1.添加元素

在JS中,添加元素可以说是非常“任性”!!!
直接通过“数组名[下标] = 值”即可,下标可以超过数组的长度,这时就相当于把整个数组的长度变大了,而没有赋值的元素会以空存储位置的形式存在。

 /*
        例如这样一个数组:
        var arr = [1,2,3];
        显然它的长度是3,但是你可以给添加下标为4的元素
        arr[4]=5;
        这时arr = [1,2,3, ,4];//此时arr有5个元素。
        */
        var arr = [1,2,3];
        arr[4]=5;
        for(var i of arr){
            console.log(i);
        }
 

image.png
2.修改元素
修改元素与添加元素的形式相同,只不过是为已有的元素更新值。

        var arr = [1,2,3];
        console.log("修改前的数组")
        for(var i of arr){
            console.log(i);
        }
        arr[1]=9;
        console.log("修改后的数组")
        for(var i of arr){
            console.log(i);
        }
 

image.png
3.删除元素
删除元素需要使用delete关键字,并且删除的只是元素的值,删除后该元素依然会占用一个空存储位置。

        var arr = [1,2,3];
        delete arr[1];
        for(var i of arr){
            console.log(i);
        }
 

image.png

解构赋值

什么是解构赋值呢?我举一个例子大家就明白了

        var arr = [1,2,3];
        var a,b,c;
        a=arr[0];
        b=arr[1];
        c=arr[2];
        console.log(a);
        console.log(b);   
        console.log(c);
        
 

image.png

        var arr = [1,2,3];
        var a,b,c;      
        [a,b,c]=[1,2,3];
        console.log(a);
        console.log(b);   
        console.log(c);
 

image.png
你会发现第一个代码显然要麻烦些,但是这两个代码结果是一样的,是不是很神奇,这就是JS的解构赋值的方便之处。
JS的解构赋值会把“=”右边的元素依次赋值给左边的元素,当左边的元素多于右边时,多出来的元素会被赋值为undefined,而当右边的元素多于左边的元素时,会把右边多于的值舍去。
除此之外,解构赋值还可以用来交换两个变量的值。

var n1=1,n2=2;
[n1,n2] = [n2,n1];//又是一个小技巧
 

以上就是JS数组的一些基本操作,如有遗漏或错误之处,欢迎大家留言指正。

回复

我来回复
  • 暂无回复内容