【JavaScript】1.JavaScript数组

最新推荐文章于 2023-05-27 00:29:02 发布
最新推荐文章于 2023-05-27 00:29:02 发布
阅读量629 收藏 1
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46293452/article/details/130000584
版权

JavaScript数组

1. 数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素

数组是一种将一组数据存储在单个变量名下的方式

2. 创建数组

  • JS 中创建数组有两种方式：
    • 利用 new 创建数组
    • 利用数组字面量创建数组

数组的字面量是方括号 [ ]

声明数组并赋值称为数组的初始化

<!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>
    <script>
        // 利用 new 创建数组
        var arr = new Array(); // 创建了一个空的数组

        // 利用数组字面量创建数组
        var arr = []; // 创建了一个空的数组
        // 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
        var arr1 = [1, 2, 'ich', true]; //数组里面的数据一定用逗号分隔
    </script>
</head>

<body>

</body>

</html>

3. 获取数组中的元素

索引 (下标) ：用来访问数组元素的序号（数组下标从 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>获取数组中的元素</title>
    <script>
        var arr1 = [1, 2, 'ich', true];

        // 获取数组元素  格式 数组名[索引号]  索引号从 0开始
        console.log(arr1);
        console.log(arr1[0]);
        console.log(arr1[1]);
        console.log(arr1[2]);
        console.log(arr1[3]);
        console.log(arr1[4]); // 因为没有这个数组元素 所以输出的结果是 undefined
    </script>
</head>

<body>

</body>

</html>

3.1 数组练习

定义一个数组，里面存放星期一、星期二…… 直到星期日（共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>数组练习</title>
    <script>
        var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        console.log(arr[6]);
    </script>
</head>
<body>
    <!-- 定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日 -->
</body>
</html>

在这里插入图片描述

4. 遍历数组

遍历：就是把数组中的每个元素从头到尾都访问一次

可以通过 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>遍历数组</title>
    <script>
        var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        for (var i = 0; i < 7; i++) {
            console.log(arr[i]);
        }
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

4.1 数组的长度

使用 数组名.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>
    <script>
        var arr1 = ['1星期一', '1星期二', '1星期三', '1星期四', '1星期五', '1星期六', '1星期日'];
        for (var i = 0; i < 7; i++) {
            console.log(arr1[i]);
        }

        // 使用“数组名.length”可以访问数组元素的数量（数组长度）
        var arr2 = ['2星期一', '2星期二', '2星期三', '2星期四', '2星期五', '2星期六', '2星期日'];
        for (var i = 0; i < arr2.length; i++) {
            console.log(arr2[i]);
        }
        // 数组的长度是元素个数  不要跟索引号混淆
        // arr.length 动态监测数组元素的个数
    </script>
</head>

<body>

</body>

</html>

4.2 数组求和及平均值

求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值

  • 分析
    • 声明一个求和变量 sum
    • 遍历这个数组，把里面每个数组元素加到 sum 里面
    • 用求和变量 sum 除以数组的长度就可以得到数组的平均值
<!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>
    <script>
        var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        console.log('数组所有元素的和 = ' + sum);
        console.log('数组所有元素的平均值 = ' + sum / arr.length);
    </script>
</head>

<body>
    <!-- 数组求和及平均值 -->
    <!-- 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值 -->
</body>

</html>

在这里插入图片描述

4.3 数组最大值

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

  • 分析：
    • 声明一个保存最大元素的变量 max
    • 默认最大值可以取数组中的第一个元素
    • 遍历这个数组，把里面每个数组元素和 max 相比较
    • 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较
    • 最后输出这个 max
<!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>
    <script>
        var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i];
            }
        }
        console.log('最大值：' + max);
    </script>
</head>

<body>
    <!-- 数组最大值 -->
    <!-- 求数组[2,6,1,77,52,25,7]中的最大值 -->
</body>

</html>

4.4 数组转换为字符串

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素转换为字符串

  • 分析：
    • 就是把里面的元素相加就好了，但是注意保证是字符相加
    • 需要一个新变量 str 用于存放转换完的字符串
    • 遍历原来的数组，分别把里面数据取出来，加到字符串变量 str 里面
<!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>
    <script>
        var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i];
        }
        console.log('str = ' + str);
    </script>
</head>

<body>
    <!-- 数组转换为字符串 -->
    <!-- 将数组 ['red', 'green', 'blue', 'pink'] 里面的元素转换为字符串 -->
    <!-- 输出： 'redgreenbluepink' -->
</body>

</html>

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>数组转换为分割字符串</title>
    <script>
        var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + '|';
        }
        console.log('str = ' + str);
    </script>
</head>
<body>
    <!-- 数组转换为分割字符串 -->
    <!-- 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割 -->
    <!-- 输出： 'red|green|blue|pink' -->
</body>
</html>

5. 数组中新增元素

5.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>通过修改 length 长度新增数组元素</title>
    <script>
        // 新增数组元素 修改length长度 
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        console.log(arr);
        arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素
        console.log(arr.length);
        console.log(arr);
        console.log('arr[3] = ' + arr[3]); // undefined
        console.log('arr[4] = ' + arr[4]); // undefined
        
        // 新增数组元素 修改索引号 追加数组元素
        arr[3] = 'black';
        arr[4] = 'gray';
        console.log('arr[3] = ' + arr[3]); // black
        console.log('arr[4] = ' + arr[4]); // glay

        // 替换原来的数组元素
        arr[0] = 'after red';
        console.log(arr[0]);

        // 不能直接给数组名赋值，否则会覆盖掉以前的数据
        arr = '不能直接给数组名赋值，否则会覆盖掉以前的数据';
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.2 数组新增元素

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

  • 分析：使用循环来追加数组
    声明一个空数组 arr
    循环中的计数器 i 可以作为数组元素存入
    由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+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>
    <script>
        var arr = []; // 创建了一个空的数组
        for (var i = 0; i < 10; i++) {
            arr[i] = i + 1;
        }
        console.log('arr[' + arr + ']');

    </script>
</head>

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

</html>

在这里插入图片描述

5.3 筛选数组

将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

  • 分析：
    • 声明一个新的数组用于存放新数据
    • 遍历原来的数组，找出大于等于 10 的元素
    • 依次追加给新数组 newArr
<!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>
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var arr1 = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                arr1[j] = arr[i];
                j++; 
            }
        }
        console.log('arr1[' + arr1 + ']');
    </script>
</head>
<body>
    <!-- 筛选数组 -->
    <!-- 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组 -->
</body>
</html>

6. 数组案例

6.1 删除指定数组元素

将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组

  • 分析：
    • 需要一个新数组用于存放筛选之后的数据
    • 遍历原来的数组，把不是 0 的数据添加到新数组里面( 此时要注意采用数组名+索引的格式接收数据)
    • 新数组里面的个数，用 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>
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var arr1 = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                arr1[j] = arr[i];
                j++;
            }
        }
        console.log('arr1[' + arr1 + ']');
    </script>
</head>

<body>
    <!-- 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组 -->
</body>

</html>

6.2 翻转数组

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放

分析：把arr 的最后一个元素取出来给新数组作为第一个

<!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', 'pink', 'purple'];
        var arr1 = [];
        var j =0;
        for (var i = arr.length -1; i >= 0; i--) {
            arr1[j] = arr[i];
            j++;
        }
        console.log('arr1[' + arr1 + ']');
    </script>
</head>

<body>
    <!-- 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放 -->
    <!-- 输出： ['purple', 'pink', 'blue', 'green', 'red'] -->
</body>

</html>

6.3 数组排序（冒泡排序）

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

<!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>
    <script>
        var arr = [5, 4, 3, 2, 1];
        var temp = 0;
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j + 1];
                    arr[j + 1] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        console.log('arr[' + arr + ']');
    </script>
</head>

<body>
    <!-- 冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小） -->
    <!--例如，我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5 -->
</body>

</html>

在这里插入图片描述
GitHub代码
gitee代码

ich&du
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数组
m0_72313625的博客
08-05 2317
JavaScript 数组用于在单一变量中存储多个值，数组是一种特殊的变量，它能够一次存放一个以上的值。数组当中首先就是数组的创建方式，然后就是遍历数组中的元素，根据要求生成新的数组，最后就是增加数组元素，以及熟练掌握和理解冒泡排序的思路和书写方法...
JavaScript 数组详解
Java小技巧
07-10 1823
JQuery 数组详解 1.认识数组 1)、内置对象是JS语言自带的对象，提供了一些基本的功能提供开发者使用。常用的内置对象有 Math,String,Array,Date等。 2)、数组就是对象，可以存储多个不同类型的数据。 3)、【对象】属性（变量）和方法（函数）的集合。 2.创建数组 1)、【内存】栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放。 ...
JavaScript之数组的详细介绍
跳探戈的小龙虾的博客
04-10 4447
每一门编程语言，都有数组或类似数组的结构，同样的JavaScript(虽然是脚本语言)也不例外，学习JavaScript的数组，我们从新建第一个数组开始。 JavaScript中的数组，长度是动态可变的，如果学过其他编程语言的朋友可能对这一点不是很习惯。 但事实上反而使得问题变得简单了，因此不需要再定义数组的时候就指定它的大小。
JavaScript-数组（Array）
StupidlyGrass的博客
01-16 4769
JavaScript数组（Array）
JavaScript数组方法（最全）
热门推荐
weixin_46734347的博客
04-02 3万+
JavaScript数组常用方法(最全) 今天我们对JavaScript的数组以及对象的方法做一个总结，方便与以后的开发与查询，多多收藏哦！ 1. push() push方法可以向数组的末尾添加一个或者多个元素，并返回新的长度. 2. pop() pop() 方法用于删除并返回数组的最后一个元素。 3. unshift() unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 4. shift() shift() 方法用于把数组的第一个元素从其中删除，并返回第一
【JavaScript】数组的遍历和增删
DomCode
09-25 838
一、数组 1、数组是什么？ 数组(Array)是一种可以按顺序保存数据的数据类型 练习1 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值 let sum = 0 let arr = [2, 6, 1, 7, 4] for (let i = 0; i < arr.length; i++) { sum += arr[i] } let avg = sum / arr.length document.write(`所有元素的和为${sum}<br>`) document.wr
js数组去重
weixin_43960320的博客
09-04 569
一、理解 根据当前数组产生一个去除重复元素后的新数组 如: [6,9,8,7,2,5,6,5,4,5,6,4,5] ==> [6,9,8,7,2,5,4] 二、实现代码 forEach()和indexOf() 说明: 本质是双重遍历, 效率差些 /* 接收一个数组为参数,返回一个去重的数组 */ function unique (array) { // 定义一个空数组 const resultArr = [] // 循环遍历未去重的数组 a
javascript求数组[2,6,1,77,52,25,7]中的最大值。
weiyindan的博客
12-31 2387
var arr = [2, 6, 1, 77, 52, 25, 7]; arr.sort((a, b) => { return b - a }) console.log(arr[0]) //求得数组的最大值 //最小值 arr.sort((a, b) => { return a - b }) ...
数组——数组中存放1-10个整数
小鱼儿~同学
09-05 6981
新建一个数组，里面存放10个整数 (1-10) 分析： 1. 声明一个空数组 2. 使用循环来追加数组， 3. 循环中的计数器 i ，可以作为数组元素存入空数组中 4. 由于数组索引是从0开始，所以 计数器 i 适合从 0 开始，但是从0开始，最后空数组里存的是0-9的数字，但是题目是1-10整数，所以需要加 1 5. 代码实现如下： var arr = []; for (var ...
JavaScript-75：空数组存放1~10个值
臧小川的博客
09-26 2202
1 新建一个数组 里面存放10个整数（1~10） 核心原理 ： 使用循环来追加数组 2 声明一个空数组 arr 3 循环中的计数器i 可以作为数组元素存入 4 由于数组的索引号是从0开始的 因此计数器从0开始更合适 存入数组元素+1 var arr = []; for (var i = 0; i < 10; i++) { // arr = i // 不要直接给数组名赋值 否则以前的元素都没了 arr[i] = i + 1; } console.log(arr); ...
JavaScript-72：求数组中的最大值
臧小川的博客
09-26 697
求数组[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.
求数组中最大的值
weixin_41086056的博客
04-17 4704
示例代码: // 求数组[2,6,1,77,52,25,7]中的最大值 // 声明一个保存最大元素的变量 max。 // 默认最大值可以取数组中的第一个元素。 // 遍历这个数组，把里面每个数组元素和 max 相比较。 // 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。 //...
js中求数组中的最值
m0_62877814的博客
10-13 281
js中的最值问题的例子
JavaScript数组常用方法
MXC17692370773的博客
10-05 457
1. 向数组的末尾添加（push） 2. 向数组的末尾删除（pop） 3. 向数组的开头添加元素（unshift） 4. 向数组的开头删除元素（shift） 5. 数组排序（sort） 6. 替换或删除数组中的元素（splice） 7. 数组反转（reverse） 8. 连接两个数组（concat） 9. 从数组中截取元素（slice） 10. 查到数组中的元素 indexOf() inCludes() 11. 遍历数组 forEach ...
JavaScript--数组类型详解
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-10 2310
1. 数组类型详解 数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如： 数组的元素可以通过索引来访问。请注意，索引的起始值为 0 ： 1.1 数组长度 1.2 修改数组元素的值 1.2.1 修改所有元素 1.2.2 ...
Js算法数组类练习
2201_75667318的博客
02-03 336
javascript算法类练习
JS中数组小案例
LiuYQing的博客
08-30 1130
案例一：删除指定数组元素 要求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的0去掉后，形成一个不包含0的新数组 案例分析： 1.需要一个新数组用于存放筛选之后的数据 2.遍历原来的数组，把不是0的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据) 3.新数组里面的个数，用length不断累加 代码实现： 案例二：翻转数组 要求：将数组['red', 'green', 'blue', 'pink'...
JavaScript求数组中的最大值和数组中的最小值
m0_59878114的博客
07-21 493
<script> //定义一个数组 letarr=[2,6,1,77,52,25,7] //定义一个变量，目的就是为了获取这个数组的最大值 letmax=arr[0] for(leti=1;i<arr.length;i++){ //如果arr[i]大于max，就把arr[i]赋值给max，让max成为这两个数的最大值 ...
js基本语法05
最新发布
rcj15651130122的博客
05-27 249
js基本语法05

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值