JavaScript学习总结（数组）

已于 2023-09-13 17:28:31 修改
阅读量127 收藏
点赞数
文章标签： 学习 javascript
于 2023-07-14 22:05:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75688394/article/details/130047255
版权
本文详细介绍了JavaScript中数组的概念、创建方法、获取元素、遍历数组的技巧，包括如何通过索引访问元素、数组长度的获取。此外，还展示了如何新增数组元素、筛选数组元素以及数组的案例应用，如数组求和、找最大值、字符串转换和数组排序等操作。
摘要由CSDN通过智能技术生成

目录

一、数组的概念

二、创建数组

1、数组的创建方式

2、利用new创建数组

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

4、数组元素的类型

三、获取数组元素

1、数组的索引

四、遍历数组

1、数组的长度

案例：数组求和及平均值

案例：数组最大值

案例：数组转换分割字符串

五、数组中的新增元素

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

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

 案例：数组新增元素

案例：筛选数组1

案例：筛选数组2

六、数组案例

案例：删除数组指定元素

案例：翻转数组

案例：交换两个变量

案例：数组排序（冒泡排序）

一、数组的概念

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

二、创建数组

1、数组的创建方式

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

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

2、利用new创建数组

  •  注意Array( ) ，A要大写

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

  •  数组的字面量是方括号 [ ] 
  • 声明数组并赋值称为数组的初始化

4、数组元素的类型

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

三、获取数组元素

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>
        // 1. 数组（Array）：就是一组数据的集合 存储在单个变量下的优雅方式
        // 2. 利用new创建数组
        var arr = new Array(); // 创建一个空的数组
        // 3. 利用数组字面量创建数组[]
        var arr = []; // 创建一个空的数组
        var arr1 = [1,2,'天气好',true];
        // 4. 我们数组里面的数据一定用逗号分隔
        // 5. 数组里面的数据 比如1,2， 我们称为数组元素
        // 6. 获取数组元素  格式 数组名 [ 索引号 ] 索引号从0开始
        console.log(arr1);
        console.log(arr1[2]); // 天气好
        console.log(arr1[3]); // true
        var arr2 = ['晴天','雨天','刮风'];
        console.log(arr2[0]);
        console.log(arr2[1]);
        console.log(arr2[2]);
        console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined
    </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 = ['red','green','blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }
        // 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0 开始 i < 3
        // 2. 输出的时候 arr[i] 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>
        // 数组长度  数组名.length
        var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维'];
        // for (var i = 0; i < 7; i++){
        //     console.log(arr[i]);
        // }
        console.log(arr.length);
        for (var i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
        // 1. 数组的长度是元素个数  不要跟索引号混淆 
        // 2. arr.length 动态监测数组元素的个数
    </script>
</head>
<body>
</body>
</html>

  • 案例：数组求和及平均值

       求数组 [ 2,6,1,7,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>
        // 1. 求数组 [ 2,6,1,7,4 ] 里面所有元素的和以及平均值
        // (1) 声明一个求和变量 sum
        // (2) 遍历这个数组，把里面每个数组元素加到sum里面
        // (3) 用求和变量 sum 除以数组的长度就可以得到数组的平均值
        var arr = [2,6,1,7,4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i++){
            sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
        }
        average = sum / arr.length;
        console.log(sum,average); // 想要输出多个变量，用逗号分隔即可
        // 结果 20 4
    </script>
</head>
<body>
</body>
</html>

  • 案例：数组最大值

       求数组 [ 2,6,1,77,52,25,7 ] 中的最大值

<!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>
        // 求数组[2,6,1,77,52,25,7] 中的最大值
        // 声明一个保存最大元素的变量 max
        // 默认最大值可以取数组中的第一元素
        // 遍历这个数组，把里面每个数组元素和 max 相比较
        // 如果这个数组元素大于 max 就把这个数组存到 max 里面，否则继续下一轮比较
        // 最后输出这个 max 
        var arr = [2,6,1,77,52,25,7];
        var max = arr[0];
        for (var i = 1; i < arr.length; i++){
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        console.log('该数字里面的最大值是：' + max);
    </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>
        // 将数组 ['red','green','blue','pink'] 转换为字符串，并且用 | 或其他符号分割
        // 1. 需要一个新变量用于存放转换完的字符串 str
        // 2. 遍历原来的数组，分别把里面数据取出来，加到字符串里面
        // 3. 同时在后面多加一个分割符
        var arr =  ['red','green','blue','pink'];
        var str = '';
        for (var i = 0; i < arr.length; i++){
            str += 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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 新增数组元素 修改 length 长度
        var arr = ['red','green','blue'];
        console.log(arr.length);
        arr.length = 5;  // 把我们数组的长度修改为5 里面应该有5个元素
        console.log(arr);
        console.log(arr[3]);  // undefined
        console.log(arr[4]);  // undefined
    </script>
</head>
<body>
    
</body>
</html>

​

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

  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值，否则会覆盖掉以前的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 2. 新增数组元素 修改索引号 追加数组元素
        var arr1 = ['red','green','blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        arr1[4] = 'hotpink';
        console.log(arr1);
        arr1[0] = 'yellow';  // 这里是替换原来的数组元素
        console.log(arr1);
        arr1 = '有点意思';
        console.log(arr1);  // 不要直接给 数组名赋值 否则里面的数组元素都没有了
    </script>
</head>
<body>
</body>
</html>

 案例：数组新增元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 新建一个数组，里面存放10个整数（1~10）
        // 核心原理：使用循环来追加数组。
        // 1、声明一个空数组 arr 。
        // 2、循环中的计数器 i 可以作为数组元素存入
        // 3、由于数组的索引号是从 0 开始，因此计数器从 0 开始更合适，存入的数组元素要+1
        var arr = [];
        for (var i = 0; i < 10; i++){
            // arr = i; 不要直接给数组名赋值 否则以前的元素都没有了
            arr [i] = i + 1;
        }
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

案例：筛选数组1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
        // 1、声明一个新的数组用于存放新数据newArr。
        // 2、遍历原来的旧数组，找出大于等于 10 的元素。
        // 3、依次追加给新数组 newArr。
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++){
            if (arr[i] >= 10){
                //新数组索引号应该从0开始 依次递增
                newArr[j] = arr[i];
                j++;
                // 结果为：newArr[i] = arr[i];
            }
        }
        console.log(newArr);
        // newArr[i] = arr[i]; 无j++;时 结果为： (9) [空 ×4, 77, 空, 52, 空, 25]
    </script>
</head>
<body>
</body>
</html>

案例：筛选数组2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        // 刚开始newArr.length 就是0
        for (var i = 0; i < arr.length; i++){
            if (arr[i] >= 10){
                //新数组索引号应该从0开始 依次递增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</head>
<body>
</body>
</html>

六、数组案例

案例：删除数组指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组。
        // 1、需要一个新数组用于存放筛选之后的数据。
        // 2、遍历原来的数组，把不是 0 的数据添加到新的数组里面（此时要注意采用数组名 + 索引的格式接收数据）。
        // 3、新数组里面的个数，用 length 不断累加。
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        for (var i = 0; i < arr.length; i++){
            if (arr[i] != 0){
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
        //结果为：(7) [2, 6, 1, 77, 52, 25, 7]
    </script>
</head>
<body>
    
</body>
</html>

案例：翻转数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //将数组 ['red','green','blue','pink','purple'] 的内容反过来存放
        // 1、声明一个新数组 newArr
        // 2、把旧数组索引号第4个取过来（arr.length - 1), 给新数组索引号第0个元素(newArr.length)
        // 3、我们采取 递减的方式 i--
        var arr = ['red','green','blue','pink','purple'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--){
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);
        // 结果为：(5) ['purple', 'pink', 'blue', 'green', 'red']
    </script>
</head>
<body>
</body>
</html>

案例：交换两个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //交换两个变量
        var num1 = 10;
        var num2 = 20;
        var temp;
        temp = num1;
        num1 = num2;
        num2 = temp;
        console.log(num1,num2);  // 结果为：20 10
    </script>
</head>
<body>
    
</body>
</html>

案例：数组排序（冒泡排序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = 0; j <= arr.length - i - 1; j ++){  //里面的循环管 每一躺的交换次数
                // 内部交换2个变量的值 前一个和后面一个数组元素相比较
                if(arr[j] > arr[j + 1]){
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
        // 结果为：(5) [1, 2, 3, 4, 5]
    </script>
</head>
<body>
</body>
</html>

Qinqin.J
关注
JavaScript基础学习之数组
weixin_54671516的博客
08-15 217
那么在Javascript中数组到底是什么，又是如何创建的呢?我们可以如何使用数组呢
JavaScript中数组对象详解
radcb55226的博客
05-05 781
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
javascript学习 - 数组应用
paofuluolijiang的博客
07-31 983
之前的学习中，如果我们要存储一个值，一般都是通过变量来存储。但如果我们现在想要存储一系列的值，又该如何存储呢，你可能会说可以用多个变量来进行存储。这种方法也可以，但如果你想，一旦值过多，那岂不是就要多个变量，到时候管理就很混乱了。这时候就想，有没有一个可以存储多个值的数据结构，方便我们进行多个值的存储管理呢？针对上面这一需求，提出了数组这一数据结构。数组是指一组数据的集合，数组中的每个数据被称为元素，而且数组中可以存放任意类型的元素。
JavaScript学习之数组总结
m0_46476764的博客
12-15 184
javascript数组1. 1.
Javascript 学习总结
weixin_56732056的博客
06-24 820
JavaScript入门学习总结，JS入门，掌握这些知识就够。 操作符 语句 代码块 空格 注释 变量 数据类型 JavaScript 拥有动态类型 字符 布尔 数组 (array) 常用的数组方法
Javascript数组学习总结
少晒太阳，如鱼得水
11-26 421
数组的基本特点 数组元素是任意类型的 可能的最大索引是2^32-2，默认起始索引是 0 Javascript的数组是动态的，无需手动开辟内存 数组可能不连续 每个数组都与一个length属性，length之比数组中所有元素的索引值都大 1.创建数组 四种方式 1. var arr = []; //空数组，不含任何元素 2. var arr = new Array(); //空数组，不含任何
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 4023
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
JavaScript学习总结
手可摘星辰博客
07-04 375
Javascript入门
学习javascript的数组
weixin_54454406的博客
05-24 1067
数组：（Array）是一种数据类型，属于引用数据类型。作用：在单个变量名下存储多个数据 注意事项：数组是按照顺序保存（是有序的），所以，每一个数据都有自己的编号。编号从0开始，数据的编号经常称为索引或下标。数组可以存储任意类型的数据。数组名[索引]; 4.遍历数组 把数组中每个数据都访问到。使用for循环遍历数组数组的长度：通过数组.length属性获取。 5.demo 求数据的和和平均数,最大值和最小值 6.操作数组-增删改查 数组的本质就是数据集合，增删改查。查询语法：数组[索引
JavaScript学习笔记之数组求和方法
10-22
总结起来，JavaScript中的数组求和是一个基础且重要的操作。它不仅涉及到对数组的遍历和元素的累加，还涉及到对不同迭代方法的理解和选择。掌握数组的增删改查以及各类迭代方法的使用，可以大幅提高编程效率和代码...
JavaScript学习笔记之数组随机排序
10-22
总结来说，JavaScript中实现数组随机排序有多种方法，可以根据不同的需求选择合适的方法。除了上面提到的递归法和扩展Array原型方法外，还可以通过多次调用reverse()方法来实现简单但效果不佳的“洗牌”效果。在实际...
JavaScript实现删除数组重复元素的5种常用高效算法总结
10-18
在JavaScript中，数组去重是一个常见的需求，尤其是在处理数据时，为了提高数据处理的准确性与效率，去除数组中...通过对这些方法的深入学习和理解，可以更好地掌握JavaScript数组操作的技巧，并在实际开发中灵活应用。
JavaScript实现将数组数据添加到Select下拉框的方法
10-23
总结来说，JavaScript 实现数组数据添加到 Select 下拉框的方法，涉及到数组操作的基础知识，包括如何声明数组、获取数组长度、遍历数组以及创建 Option 对象。同时，还需要掌握通过 JavaScript 动态修改 HTML 页面...
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 808
学习UART串口的简明学习笔记
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 680
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
嵌入式通信协议：MODBUS简明学习笔记
weixin_73867577的博客
11-02 307
学习Modbus的简明学习笔记
SPI通信详解-学习笔记
最新发布
qq_45059758的博客
11-04 350
SPI通信
SAP ABAP开发学习——接口中间件（PI）
m0_64077397的博客
11-04 146
左侧的红圈表示没有被生成。
JavaScript数组去重方法总结
"这篇JavaScript学习笔记主要探讨了如何在JavaScript中进行数组去重，通过不同的方法来实现这一功能。文章提供了实例代码和简单的性能测试，适用于正在学习JavaScript数组操作的朋友参考学习。" 在JavaScript中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值