【前端-初阶】JS数组

我自闭了？

已于 2023-03-22 21:52:23 修改

阅读量507

点赞数

文章标签： javascript 前端开发语言

于 2023-03-19 16:09:34 首次发布

本文链接：https://blog.csdn.net/qq_48234463/article/details/129647791

版权

1.数组的概念

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

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

问：什么是数组？

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

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

2.创建数组

2.1 数组的创建方式

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

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

2.2 利用new创建数组

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

这种方式暂且了解，等学完对象再看
注意Array()，A要大写

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

 1.使用数组字面量方式创建空的数组
 var 数组名=[];
 2.使用数组字面量方式创建带初始值的数组
 var 数组名=['小白','小黑','大黄','瑞奇'];
 3.利用数组字面量创建数组[]
 var arr=[];//创建了一个空的数组
 var arr1=[1,2,'pink老师',true];
 4.我们数组里面的数据一定用逗号分隔
 5.数组里面的数据 比如1,2,true等 我们称之为数组元素

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

2.4 数组元素的类型

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

 var arrStus=['小白'，12，true，28.9];

3.获取数组元素

3.1 数组的索引

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

var arr=['小白','小黑','大黄','瑞奇'];

索引号： 0 1 2 3

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

这里的访问就是获取得到的意思

var arr=[1,2,'pink老师',true];

 //获取数组元素 格式：数组名[索引号]
 console.log(arr);
 console.log(arr[2]);//pink老师
 console.log(arr[3]);//true

//定义数组
 var arr2 = ['迪丽热巴', '古力娜扎', '热依扎'];
 //获取数组中的元素
 console.log(arr2[0]);//迪丽热巴
 console.log(arr2[1]);//古力娜扎
 console.log(arr2[2]);//热依扎
 console.log(arr2[3]);//undefined

课堂练习：数组练习

定义一个数组，里面存放星期一、星期二......直到星期日（共七天），在控制台输出：星期日，请同学们自己动手完成。

 <script>
     var arr2 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
     console.log(arr2[6] + ',请同学们自己动手完成。');
 </script>

4.遍历数组

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

答：可以通过“数组名[索引号]”的方式一项项的取出来。

问：怎么把数组里的元素全部取出来？

规律：

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

答案就是循环

遍历：就是把数组中的每个元素从头到尾都访问一遍（类似我们每天早上学生的点名）。

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

课堂案例1：遍历数组

<script>
    /* var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维'];
    for (var i = 0; i < 7; i++) {
        console.log(arr[i]);
    } */
    //数组长度 数组名.length
    var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维','pink'];
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    //1.数组的长度是元素个数 不要跟索引号混淆
    //2.arr.length动态监测数组元素的个数
</script>

通过for循环遍历数组元素
for里面的i是计数器，当索引号使用，arr[i]是数组元素第i个数组元素
获取数组长度：数组名.length
数组索引号从0开始，数组长度是元素个数

课堂案例2：数组求和及平均值

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

<script>
    var arr = [2, 6, 1, 7, 4];
    var sum = 0;
    var average = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];

    }
    average = sum / arr.length;
    console.log(sum,average);//想要输出多个变量，用逗号隔开
</script>

课堂案例3：数组最大值

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

<script>
    var arr = [2, 6, 1, 77, 52, 25, 7];
    var max = arr[0];
    for (i = 1; i < arr.length; i++) {
        if (max <= arr[i]) {
            var max = arr[i];
        }
    } console.log('数组里的最大值是' + max);
</script>

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

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

输出：'red|green|blue|pink'

<script>
    var arr = ['red', 'green', 'blue', 'pink'];
    var color = '';
    for (i = 0; i < arr.length; i++) {
        color += arr[i] + '|';
    } console.log(color);
</script>

5.数组中的新增元素

可以通过修改length长度以及索引号增加数组元素

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

可以通过修改length长度来实现数组扩容的目的
length属性是可读的

<script>
    var arr = ['red', 'green', 'blue', 'pink'];
    arr.length = 7;
    console.log(arr);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
</script>

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

新增数组元素：追加索引号

<script>
//新增数组元素 修改索引号 追加数组元素
    var arr = ['red', 'green', 'blue', 'pink'];
    arr[4] = 'pink';
    console.log(arr);
    arr[5] = 'hotpink';
    console.log(arr);
    arr[0] = 'yellow';//这里是替换原来的数组元素
    console.log(arr);
    arr='有点意思';
    console.log(arr);//有点意思   不要给数组名直接赋值，否则里面的数组元素会被全部替换
</script>

新增数组元素修改索引号追加数组元素
不要给数组名直接赋值，否则里面的数组元素会被全部替换

课堂案例：数组新增元素

新建一个数组，里面存放10个整数（1-10）

<script>
    // var arr = new Array();
    var arr = [];
    for (var i = 0; i < 10; i++) {
        arr[i] = i + 1;

    } console.log(arr);
</script>

课堂案例：筛选数组

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

<script>
//方法1
    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);
//方法2 so smart
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    var arr1=[];//刚开始arr1.length就是0
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
        //新数组索引号应该从0开始 依次递增 填入一个数组元素后 就增加1
            arr1[arr1.length] = arr[i];
        }
    } console.log(arr1);
</script>

6.数组案例

课堂案例1：删除指定数组元素

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

<script>
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
    var arr1 = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] != 0) {
            arr1[arr1.length] = arr[i];
        }
    } console.log(arr1);
</script>

课堂案例2：翻转数组

要求将数组['red', 'green', 'blue', 'pink','purple']的内容反过来存放。

输出：['purple','pink','blue', 'green', 'red']

<script>
    var arr = ['red', 'green', 'blue', 'pink', 'purple'];
    var arr1 = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        arr1[arr1.length] = arr[i];
    } console.log(arr1);
</script>

课堂案例3：数组排序（冒泡排序）

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

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

<script>
    var arr = [5, 4, 3, 2, 1];
    for (var i = 0; i <= arr.length - 1; i++) {//外层控制交换趟数 5个数字排好需要4趟
        for (var j = 0; j <= arr.length - (i + 1); j++) {
        //内层控制每一趟比较的次数 5从4比到1走了4次，4从3比到1走了3次，以此类推
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];//temp是引入的空位置，用来交换
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }

    } console.log(arr);
</script>