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

    前端研习录（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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

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

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

    二、遍历数组

      遍历数组可以考虑使用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

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

      除了使用上面的两种方式外，还可以使用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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

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

    三、数组的方法

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

      结果如下：

    在这里插入图片描述

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

    注：当内部元素删完之后，赋值给变量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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

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

       如果数组中存在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

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

       使用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

  • 相关阅读:
    Bean的管理
    【知识点随笔分析 | 第八篇】什么是布谷鸟过滤器（缓解Redis穿透）
    C语言典型例题31
    Dubbo-时间轮设计
    【LeetCode】5. Valid Palindrome·有效回文
    VI/VIM的使用
    SQL优化——如何写出高效率SQL
    408操作系统学习笔记——进程与线程、处理机调度、同步与互斥（PV操作）、死锁
    SendKeys.SendWait 函数模拟键盘输入
    实现分布式锁SchedulerLock
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126274580