前端研习录（23）——JavaScript数组及其方法合集

最新推荐文章于 2024-07-12 16:55:56 发布

清风不渡

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量291

点赞数 1

分类专栏：前端研习录文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/WXKKang/article/details/126274580

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（23）——JavaScript数组及其方法合集

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript数组部分

一、数组

1、定义

数组（array）是按次序排列的一组值，每个值都有下标（由左到右从0开始），整个数组用方括号表示，例如：

var arr = [‘a’,‘b’,‘c’];

我们既可以向上面那样在定义时赋值，也可以先声明再赋值，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var arr = [];
        var num = 0;
        for (num;num<=9;num++){
            arr[num] = num+1;
        }
        console.log(arr);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

注意：使用数组名[下标] 进行取值的时候，如果下标越界（超出数组现有下标最大值），则会返回undefined

另，数组中可以包含任何类型的数据，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var arr = [];
        var num = 0;
        for (num;num<=9;num++){
            if (num % 2 == 0){
                arr[num] = '数字'.concat(num+1);
            }
            else{
                arr[num] = num+1;
            }
        }
        console.log(arr);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

如果数组中嵌套了一个或多个数据，我们称之为多维数组，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr = [1,2,[3,4],5,[6,7]];
        console.log(arr);
        
    </script>
</body>
</html>

结果如下：
在这里插入图片描述
如下，二维数组的下标为：

var arr = [1,2,[3,4],5,[6,7]];
arr[2][0] 第一个表示一维中的下标，第二个为二维中的下标，所以这个下标表示的是数字3

2、length属性

数组的length属性返回数组的成员数量，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr = [1,2,[3,4],5,[6,7]];
        console.log(arr.length);

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

二、遍历数组

遍历数组可以考虑使用for循环或者while循环，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr = [1,2,[3,4],5,[6,7]];

        console.log("------------使用for循环遍历--------------");
        for (var a = 0;a<arr.length;a++){
            console.log(arr[a]);
        }

        console.log("------------使用while循环遍历--------------");
        var b = 0;
        while(b<arr.length){
            if (Array.isArray(arr[b])){
                for (var c = 0;c<arr[b].length;c++){
                    console.log(arr[b][c])
                }
            }else{
                console.log(arr[b]);
            }
            b+=1;
        }

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

除了使用上面的两种方式外，还可以使用for…in来遍历数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr = [1,2,[3,4],5,[6,7]];

        for (var a in arr){
            console.log(arr[a]);
        }

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

三、数组的方法

1、静态方法Array.isArray

我们可以通过typeof来判断数据的类型，但是无论是数组还是还是null等返回都是object，所以我们可以通过此方法来判定是否为数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =10;

        if (Array.isArray(arr)){
            for (var a in arr){
            console.log(arr[a]);
         }
        }else{
            console.log("这不是数组！！！"); 
        }
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

2、push()方法

push()方法可用于在数组的末尾添加一个或多个元素，并返回添加元素后数组的长度
该方法会改变原数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;
        for (var a = 1 ; a<=10 ; a++){
            num = arr.push(a);
        }
        console.log(arr);
        console.log("数组的长度为："+num)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

3、pop()方法

pop()方法用于删除数据的最后一个元素，并返回该元素
该方法会改变原数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;
        for (var a = 1 ; a<=10 ; a++){
            num = arr.push(a);
        }
        console.log(arr);
        console.log("------------------下面开始删除-----------------")
        for (var b = 1;b<=num;b++){
            var str = arr.pop();
            console.log("第"+b+"次删除，删除的元素为：")
            console.log(+str)
        }
        console.log("最终数组为：")
        console.log(arr)

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

4、shift()方法

shift()方法用于删除数组的第一个元素，并返回该元素
该方法会改变原数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;
        for (var a = 1 ; a<=10 ; a++){
            num = arr.push(a);
        }
        console.log(arr);
        console.log("------------------下面开始删除-----------------")
        var item;
        while(item = arr.shift()){
            console.log("删除的元素为：");
            console.log(item);
        }
        console.log("最终数组为：")
        console.log(arr)
        </script>
</body>
</html>

结果如下：
在这里插入图片描述

注：当内部元素删完之后，赋值给变量item 的值为undefined，由于对undefined取布尔值为false，所以while循环结束

5、unshift()方法

unshift()方法用于向数组开始位置添加元素，并返回该元素
该方法会改变原数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;

        console.log("------------------下面开始添加元素-----------------")
        for (var a = 1 ; a<=10 ; a++){
            num = arr.push(a);
        }
        console.log("目前数组为：")
        console.log(arr)
        console.log("------------------下面开始向头部添加元素-----------------")
        for (var a = 2;a<=num;a++){
            arr.unshift(a);
        }
        console.log("最终数组为：")
        console.log(arr)

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

6、join()方法

join()方法用于以指定参数作为分隔符，将所有数组成员连接成为一个字符串返回
如果不提供参数，则默认以逗号分隔，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;

        console.log("------------------下面开始添加元素-----------------")
        for (var a = 1 ; a<=10 ; a++){
            num = arr.push(a);
        }
        console.log(arr)
        console.log("------------------以逗号为分隔符返回字符串-----------------")
        console.log(arr.join())
        console.log("------------------以分号为分隔符返回字符串-----------------")
        console.log(arr.join(";"))

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

如果数组中存在null、undefined或者空位，则会被转换为空字符串，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;

        console.log("------------------下面开始添加元素-----------------")
        for (var a = 1 ; a<=10 ; a++){
            if (a == 3){
                arr.push(null);
            }else if (a == 5){
                arr.push(undefined);
            }else if (a == 8){
                arr.push("")
            }else{
                num = arr.push(a);
            }  
        }
        console.log(arr)
        console.log("------------------以逗号为分隔符返回字符串-----------------")
        console.log(arr.join())

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

使用join配合字符串split方法可实现数组与字符串的转换，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr =[];
        var num = 0;

        console.log("------------------下面开始添加元素-----------------")
        for (var a = 1 ; a<=10 ; a++){
                num = arr.push(a.toString());  
        }
        console.log(arr)
        console.log("------------------以逗号为分隔符返回字符串-----------------")
        var str = arr.join()
        console.log(str)
        console.log("------------------将字符串按逗号转为数组-----------------")
        var str1 = str.split(",");
        console.log(str1)

    </script>
</body>
</html>

结果如下：
在这里插入图片描述

7、concat()方法

concat()方法用于将新数组添加到原数组的后部，返回一个新的数组，原数组不变，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr1 =[1,2,3];
        var arr2 = ['1','2','3'];
        var arr3 = arr1.concat(arr2);
        console.log(arr3);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

除了将新数组内容接入，也可将其他类型的值作为参数接入，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr1 =[1,2,3];
        var arr2 = ['1','2','3'];
        var arr3 = arr1.concat(arr2,8,9);
        console.log(arr3);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

8、reverse()方法

reverse()方法用于颠倒排列的数组元素，返回改变后的数组
该方法将改变原数组，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr1 =[1,2,3];
        var arr3 = arr1.reverse();
        console.log(arr1);
        console.log(arr3);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

9、indexOf()方法

indexOf()方法用于返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr1 =[1,2,3];
        console.log(arr1.indexOf(2));
        console.log(arr1.indexOf(6));
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

还可以给第二个参数，用于表示开始查找的位置，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>

        var arr1 =[1,2,3];
        console.log(arr1.indexOf(2));
        console.log(arr1.indexOf(2,2));
    </script>
</body>
</html>