1.数组的概念

最新推荐文章于 2024-06-22 16:35:45 发布

这一片月

最新推荐文章于 2024-06-22 16:35:45 发布

阅读量285

点赞数

文章标签：算法

本文链接：https://blog.csdn.net/qq_62865634/article/details/132280071

版权

1.1数组概念

问：之前学习的变量，只能存储一个值。如果我们想存储班级中所有学生的姓名，那么该如何存储？

答：可以使用数组（Array）。数组可以把一组相关的数据一起存放，并提供方便的访问（获取）方式。

问：什么是数组嘞？

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

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

2.1数组的创建方法

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

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

2.2利用new创建数组

var  数组名 = new Array（）;
var  arr = new   Array（）;//创建应该新的空数组
这种方式暂且了解，等学完对象再看
注意Array（），A要大写

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

//1、使用数组字面量方式创建空的数组
var 数组名 =[];
//2、使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白'，'小黑'，'大黄'，'瑞奇'];
数组的字面量是方括号[ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的概念</title>
    <script>
        // 1.数组(Array)：就是一组数据的集合  存储在单个变量下的优雅方式
        // 2、利用new 创建数组
        var arr = new Array(); //创建了一个空的数组
        // 3、利用数组字面量创建数组[]
        var arr = []; //创建了一个空的数组
        var arr1 = [1, 2, 'pink老师', true];
        // 4、我们数组里面的数据一定用逗号分隔
        // 5.数组里面的数据  比如1,2 我们称为数组元素
        // 6.获取数组元素
    </script>
</head>

<body>

</body>

</html>

3.获取数组元素

3.1数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从0开始），

var arr = ['小白'，'小黑'，'大黄'，'瑞奇']；

索引号： 0 1 2 3

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过‘数组名[索引]’的形式来获取数组中的元素。

这里的访问就是获取得到的意思
//定义数组
var  arrStus = [1,2,3];
//获取数组中的第2个元素
alert（arrStus[1]）;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的概念</title>
    <script>
        // 1.数组(Array)：就是一组数据的集合  存储在单个变量下的优雅方式
        // 2、利用new 创建数组
        var arr = new Array(); //创建了一个空的数组
        // 3、利用数组字面量创建数组[]
        var arr = []; //创建了一个空的数组
        var arr1 = [1, 2, 'pink老师', true];
        // 4、我们数组里面的数据一定用逗号分隔
        // 5.数组里面的数据  比如1,2 我们称为数组元素
        // 6.获取数组元素  格式  数组名[索引号]
        console.log(arr1);
        console.log(arr1[2]); //pink老师
        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>

案例：

定义一个数组，里面存放星期一、星期二。。。。。直到星期日(共7天)，在控制台输出：星期日

<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-08-15 21:37:23
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-08-15 21:42:15
 * @FilePath: \vscode代码存放\java Script\1、数组的概念\数组练习案例.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
        // 定义一个数组，里面存放星期一、星期二。。。。。直到星期日(共7天)，在控制台输出：星期日
        var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        alert(arr[6]);
        console.log(arr[6]);
    </script>
</head>

<body>

</body>

</html>

4.遍历数组

问：数组中每一项我们怎么取出来？

答：可以通过“数组名[索引号]”的方式一项项的取出来。
 var arr = ['red', 'gree', 'blue'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
问：怎么把数组里面元素全部取出来？

规律：

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

答案就是循环

遍历:就是把数组中的每一个元素从头到尾都访问一次（类似我们每天早上学生的点名）。
 var arr = ['red', 'gree', 'blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }

案例:

请将['关羽','张飞','马超','赵云','黄忠'，''刘备','姜维'];数组里的元素依次打印到控制台。

 for (var i = 0; i < 7; i++) {
            console.log(arr[i]);
        }

<!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>
        // 数组长度  数组名.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]里面所有元素的和以及平均值

声明一个求和变量sum

遍历数组这个数组，把里面每个数组元素加到sum里面

用求和变量sum 除以数组的长度就可以得到数值平局值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组求合</title>
    <script>
        // 1.求数组[2,6,1,7,4]里面所有元素的和以及平均值
        // 声明一个求和变量sum
        // 遍历数组这个数组，把里面每个数组元素加到sum里面
        // 用求和变量sum 除以数组的长度就可以得到数值平局值
        var sum = 0;
        var average = 0;
        // 首先声明两个变量拿来装合和平均值
        var arr = [2, 6, 1, 7, 4];
        // 这个是数组里面装
        for (var i = 0; i < arr.length; i++) {
            // 这里为什么是i<arr.length，是因为数组索引是5（动态）  ，0  1 2 3 4
            sum = sum + arr[i];
            // i就是数组的索引从0开始对应数组就是2
        }
        average = sum / arr.length;
        // 这里为了方便动态除以所有引用啦，arr.length
        console.log(sum, average);
    </script>
</head>

<body>

</body>

</html>

案例：

将数组 ['red','green','blue','pink'] 转换为字符串，并且用| 或者其他符号分割

1、需要一个新变量用于存放转换完的字符串 st

2、遍历原来的数组，分割把里面数据取出来，加到字符串里面

3、同时在后面多加一个分割符

var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        var age = '|';
        // 这里声明一个变量
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + age;
        }
        console.log(str);