【JavaScript】(七) 数组

香蕉卟NaNa

已于 2023-02-24 16:09:06 修改

阅读量600

点赞数 29

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-05-15 17:43:49 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/124756726

版权

JavaScript 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

本文详细讲解了JavaScript中数组的基础概念，包括数组的创建（使用`new`和字面量）、索引访问、元素类型、长度获取、遍历方法（包括求和、平均值、最大值、字符串转换和分割）、动态添加元素以及关键案例如数组过滤。通过实例演示，助你掌握数组在实际开发中的运用。

摘要由CSDN通过智能技术生成

🌈 数组的概念

➢ 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。

// 普通变量一次只能存储一个值
var num = 10; 
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

🌈 创建数组

1、数组的创建方式

➢ JS 中创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

2、利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

注意 Array () ，A 要大写

3、利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = [1,2,3,4,5];

数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是使用的最多的方式

4、数组元素的类型

➢ 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['JJ',22,true,28.8];

🌈 获取数组元素

1、数组的索引

➢ 索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
数组索引
例子：

<!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>Document</title>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组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>Document</title>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        console.log(arr[1]);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
通过数组索引找元素

🌈 遍历数组

➢ 通过“数组名[索引号]”的方式获取数组中的每一项

var arr = ['苹果','香蕉','榴莲','橙子'];
console.log(arr[0]) // 苹果
console.log(arr[1]) // 香蕉
console.log(arr[2]) // 榴莲
console.log(arr[2]) // 橙子

➢ 从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增

遍历: 就是把数组中的每个元素从头到尾都访问一次
我们可以通过 for 循环索引遍历数组中的每一项

<!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>Document</title>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        for (var i=0;i<=3;i++) {
            console.log(arr[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组遍历

1、数组的长度

➢ 使用“数组名.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>Document</title>
    <script>
        var arr=['A','B','C','D'];
        console.log(arr.length);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组长度

➢ 注意：
① 此处数组的长度是数组元素的个数，不要和数组的索引号混淆。
② 当数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

2、案例

（1）数组求和及平均值

➢ 求数组 [1,2,3,4,5,6,7,8,9,10] 里面所有元素的和以及平均值。

<!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>Document</title>
    <script>
        var arr=[1,2,3,4,5,6,7,8,9,10];
        var sum=0;
        for (var i=0;i<arr.length;i++) {
            sum=sum+arr[i];
        }
        console.log('该数组的和是：'+sum);
        console.log('该数组的平均值是：'+sum/arr.length);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
求数组和以及平均值

（2）数组最大值

➢ 求数组 [2,5,66,99,33,88] 中的最大值。

<!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>Document</title>
    <script>
        var arr = [2,5,66,99,33,88];
        var max = arr[0];    // 将数组的第一位元素赋值给max
        for (var i=1;i<arr.length;i++) {
            if (arr[i]>max) {
                max=arr[i];
            } 
        }
        console.log('该数组的最大值是：'+max);

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

结果展示：
求数组最大值

（3）数组转换为字符串

➢ 要求：将数组 [‘one’,‘two’,‘three’,‘four’,‘five’] 里面的元素转换为字符串
➢ 输出： ‘onetwothreefourfive’

<!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>Document</title>
    <script>
        var arr = ['one','two','three','four','five'];
        var str = '';
        for (var i=0;i<arr.length;i++) {
            str = str + arr[i];
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组转换为字符串

（4）数组转换为分割字符串

<!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>Document</title>
    <script>
        var arr = ['one','two','three','four','five'];
        var str = arr[0];
        var sep = '|'
        for (var i=1;i<arr.length;i++) {
            str = str + sep + arr[i];
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组转换为分割字符串

🌈 数组中新增元素

1、通过修改 length 长度新增数组元素

可以通过修改 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>Document</title>
    <script>
        var arr = ['one','two','three'];    // 此时arr.length = 3
        arr.length = 5;
        console.log(arr[3]);
        console.log(arr[4]);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组扩容例子1

➢ 其中索引号是 3，4 的空间没有给值，就是声明变量未给值，默认值就是 undefined。

2、通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

➢ 追加数组元素：

<!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>Document</title>
    <script>
        var arr = ['one','two','three'];
        arr[3] = 'four';
        console.log(arr);
    </script>
</head>
<body>
    
</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>Document</title>
    <script>
        // 如果给数组中已经被占用的索引号赋值，原有元素会被替换
        var arr = ['one','two','three'];
        arr[0] = 'six';
        console.log(arr);
    </script>
</head>
<body>
    
</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>Document</title>
    <script>
        var arr = [1,2,3,4,5];
        arr = '啊这这这';
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组名被直接赋值的例子

3、案例

（1）数组新增元素

➢ 新建一个数组，里面存放10个整数（ 1~10），要求使用循环追加的方式输出： [1,2,3,4,5,6,7,8,9,10]

<!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>Document</title>
    <script>
        var arr = [];
        for (var i=0;i<10;i++) {
            arr[i] = i+1;
        }
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
数组追加元素1~10

（2）筛选数组

➢ 要求：将数组 [1,3,22,11,66,5,0,9,66] 中大于等于 10 的元素选出来，放入新数组。

方法一：

<!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>Document</title>
    <script>
        var arr1 = [1,3,22,11,66,5,0,9,66];
        var arr2 = [];
        var j = 0;
        for (var i=0;i<arr1.length;i++) {
            if (arr1[i] >= 10) {
                arr2[j] = arr1[i]; 
                j++;
            }
        }
        console.log(arr2);
    </script>
</head>
<body>
    
</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>Document</title>
    <script>
        var arr1 = [1,3,22,11,66,5,0,9,88];
        var arr2 = [];
        for (var i=0;i<arr1.length;i++) {
            if (arr1[i] >= 10) {
                arr2[arr2.length] = arr1[i];  
                 /* 一开始时，arr2是空数组，此时的arr2.length=0，
                 把arr2.length=0当作arr2数组的索引号，刚好是数组的首位索引号，
                 当arr2存了一个元素时，此时arr2.length=1，1就是arr2的第二个索引号啦 */
            }
        }
        console.log(arr2);
    </script>
</head>
<body>
    
</body>
</html>

两种方法得到的结果都一样：
数组筛选

🌈 数组案例

1、删除指定数组元素

➢ 要求：将数组 [2,60,0,89,0,65,36,0,99] 中的 0 去掉后，形成一个不包含 0 的新数组。

<!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>Document</title>
    <script>
        var arr1 = [2,60,0,89,0,65,36,0,99];
        var arr2 = [];
        for (var i=1;i<arr1.length;i++) {
            if (arr1[i]!=0) {
                arr2[arr2.length] = arr1[i];
            }
        }
        console.log(arr2);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
删除数组中的0

2、翻转数组

➢ 要求: 将数组[‘one’,‘two’,‘three’,‘four’,‘five’] 的内容反过来存放。
➢ 输出： [‘five’, ‘four’, ‘three’, ‘two’, ‘one’]

<!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>Document</title>
    <script>
        var arr1 = ['one','two','three','four','five'];
        var arr2 = [];
        for (var i=arr1.length-1;i>=0;i--) {
            arr2[arr2.length] = arr1[i];
        }
        console.log(arr2);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
反转数组

3、数组排序（冒泡排序）

➢ 冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。

➢ 例如，我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

<!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>Document</title>
    <script>
        // 冒泡排序
        var arr = [5,4,3,2,1];
        for (var i=0;i<arr.length-1;i++) {
            for (var j=1;j<=arr.length-i-1;j++) {
                // 内部交换两变量的值
                if (arr[j]>arr[j+1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
冒泡排序

香蕉卟NaNa

关注

29
点赞
踩
30

收藏

觉得还不错? 一键收藏
62
评论
【JavaScript】(七) 数组

🌈 一、数组的概念数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。// 普通变量一次只能存储一个值var num = 10; // 数组一次可以存储多个值var arr = [1,2,3,4,5];🌈 二、创建数组1、数组的创建方式JS 中创建数组有两种方式：利用 new 创建数组利用数组字面量创建数组2、利用 new 创建数组var 数组名 = new Array() ；var arr = ne
复制链接

扫一扫