【JavaScript】(七) 数组

发布时间：2023-10-13 19:30

\"JS\"

目录

🌈 数组的概念

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

// 普通变量一次只能存储一个值
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）数组转换为分割字符串

➢ 要求：将数组 [‘one’,‘two’,‘three’,‘four’,‘five’] 转换为字符串，并且用 | 或其他符号分割
➢ 输出： ‘one|two|three|four|five’

<!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>

结果展示：
\"冒泡排序\"

相关推荐

Matplotlib使用和绘制二维图表

CSS的背景和三大特性

如何使用 vue-cli 创建模板项目

【毕业设计】基于单片机的智能感应垃圾桶设计与实现 - 物联网 stm32 嵌入式

ES2018 最新 理解Javascript中的执行上下文和执行栈

springBoot学习（三）springBoot事件监听和部分注解的运用

JavaScript变量声明的var、let、const详解

JavaEE框架整合开发入门到实战：Spring+SpringMVC+MyBAtis(微课版）——代码练习第一章

pwm控制直流电机转速流程图_基于单片机的PWM控制直流电机转速方法

5月硬核预告！明晚开讲：Virtio 虚拟化技术趋势与 DPU 实践 | 第16 期

python密码学库pynacl功能介绍

Docker 学习笔记-常用命令

Pyecharts实现新冠肺炎疫情数据大屏可视化

一文详解Python中的重试机制

“千万级”高并发进阶笔记，涵盖基础+实战+解决方案

C++学习之多态的使用详解

React组件化的额外知识补充

关于MAC M1处理器运行Android protoc报错的解决方案

Vite 基本配置及原理

循序渐进 Redis 分布式锁（以及何时不用它）

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号