【JavaScript】(七) 数组

🌈 数组的概念

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

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

🌈 创建数组

1、数组的创建方式

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

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

2、利用 new 创建数组

var 数组名 =newArray() ；
var arr =newArray();// 创建一个新的空数组

注意 Array () ，A 要大写

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

//1. 使用数组字面量方式创建空的数组var 数组名 =[]；
//2. 使用数组字面量方式创建带初始值的数组var 数组名 =[1,2,3,4,5];

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

4、数组元素的类型

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

var arrStus =['JJ',22,true,28.8];

🌈 获取数组元素

1、数组的索引

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var arr =['苹果','香蕉','榴莲','橙子'];
        console.log(arr);</script></head><body></body></html>

结果展示：
数组1

➢ 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。（这里的访问就是获取得到的意思）

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 循环索引遍历数组中的每一项

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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”可以访问数组元素的数量（数组长度）。

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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] 里面所有元素的和以及平均值。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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] 中的最大值。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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];// 将数组的第一位元素赋值给maxfor(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’

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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）数组转换为分割字符串

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 属性是可读写的

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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、通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

➢ 追加数组元素：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

结果展示：
数组追加
➢ 替换数组元素：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

结果展示：
数组原有元素被覆盖
➢ 千万不要直接给数组名赋值，不然数组里的元素都没有了，对数组元素进行追加或者替换要记得要带上索引号

错误例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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]

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 的元素选出来，放入新数组。

方法一：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

方法二

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 的新数组。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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’]

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

结果展示：
冒泡排序

标签： javascript 前端

本文转载自: https://blog.csdn.net/weixin_48650082/article/details/124756726
版权归原作者 香蕉卟NaNa 所有，如有侵权，请联系我们删除。