数组(Array)
概念：数组是一组数据的集合，其中每一个数据称为数组元素，js的数组可以放任意数据类型的元素，数组是一种将一组数据元素存储在单个变量名下的优雅方式。
示例解释：
//普通变量名只能存一个数据
var num = 10
//数组存储一组数据
var arr = [1,2,3,4,5,'a','b','c']
一、数组的创建
数组的创建方式：
1、通过new关键字创建（不常用）
//注意A要大写
var 数组名 = new Array()
var arr = new Array()//创建一个空数组
var arr = new Array(5)//创建一个长度为5的空数组
2、通过数组字面量创建（常用）
//1、使用数组字面量创建空数组
var 数组名 = []
//2、使用数组字面量创建带初始值的数组
var 数组名 = [元素1，元素2，元素3···]
如：var arr = [1,3,5,'a','c','e',7,9]//数组元素可以是任意数据类型的
小结：
1.数组是一组数据的集合，是将一组数据存放在同一变量的优雅方式
2.数组的字面量：[ ]
3.声明数组并赋值称为数组的初始化
4.数组中元素可以是任意类型的数据
5.注意：数组元素为字符或字符串要加引号,不加的话解释器会认为是变量从而报错
二、数组元素的访问
1.通过数组索引访问
索引(下标)：用来存放数组元素的序号(数组下标从0开始)
我们可以通过索引来访问、设置、修改相应的元素，注意：数组的长度可以不指定，它可以随元素的增加自动扩容,当访问未赋值的元素时，返回undefined。获取方式： 数组名[索引号]
下面通过例子来演示一下：
//定义数组
var arr = [1,3,5,'a','b','c']---->//注意字符串要加引号，不然解释器会认为是变量而报错
console.log(arr)---------------->Array(6)//输出数组长度
console.log(arr[0])------------->1
console.log(arr[2])------------->5
console.log(arr[4])------------->b
console.log(arr[6])---------- -->undefined//索引下标6没有元素，所以返回undefined
注意：数组的下标从0开始哟！！！
2.通过循环遍历
请看下面代码：
var arr = ["red","blue","green"]
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
//输出结果：red blue green
从上面代码观察发现，取出每一个元素只是数组下标改变而已，如果数组元素多的话，一行一行访问速度很慢，为提高效率，我们可以用循环
//1、使用for循环遍历
var arr = ["red","blue","green"]
for(var i = 0;i<arr.length;i++){
//length是数组的属性，即为数组长度，没有()
console.log(arr[i])
}
//输出结果：red blue green
//2、使用for in循环遍历
var arr = ["red","blue","green"]
for(var i in arr){
console.log(arr[i])
}
//输出结果：red blue green
以上访问数组元素的结果是一样的，使用循环可是很便利的
下面做两个小案例来演示下数组的魔力吧！
案例1
使用数组对一组数求和并求平均值，思路：定义2个变量，一个存总和，一个存平均数，通过遍历数组求和，然后除以数组长度求平均数
案例1实现代码
//使用数组对一组数求和并求平均值
var arr = [1,3,5,7,9,2,4,6,8] //声明一个数组并初始化
var sum = 0; //创建一个变量来存取各数字之和
var avg = 0; //创建一个变量来存取平均数
for(i=0;i<arr.length;i++){
sum += arr[i]; //相当于 sum = sum + arr[i]
}
console.log("sum:"+sum) //打印sum的值，即所有数的和
avg = sum/arr.length //求平均值并赋值给avg(arr.lengt是数组的个数)
console.log("avg:"+avg) //打印avg的值，即所有数的平均数
//输出结果：sum:45 avg:5(这里仅是演示，没有对结果为多位小数进行处理)
案例2
使用数组对一组数求最大值，图例思路：把数组第一个元素赋值给max，依次遍历比较，如果有元素大于max，则把此元素赋值给max，遍历后比完max即为最大值
案例2实现
//使用数组对一组数求最大值
var arr = [1,3,5,7,9,2,4,6,8] //声明一个数组并初始化
var max=arr[0]; //创建一个变量来存取最大值,把arr[0],即1赋值给max
for(i=01;i<arr.length;i++){
if(arr[i]>max){
max=arr[i]//判断是否有数组元素大于max，有的话就把大于max的值赋值给max
}
}
console.log("max:"+max) //打印max的值，即数组中最大值
//输出结果：max:9
三、数组的操作
1.数组长度及数组扩容
- 使用length属性获取数组长度
// 注意！length是属性，不是函数，所以不用加()
var arr = [1,2,3,4,5];
console.log(arr.length)
//输出结果：5
通常数组的length属性跟数组遍历一起使用，使用循环遍历数组要注意
数组元素最后一位的索引下标是数组长度-1(arr.length-1)
- 使用length属性实现数组扩容
// 创建数组，通过length属性扩容数组
var arr = ['a','b','c','d'];
console.log(arr.length)//输出结果为4，数组长度为4
console.log(arr[3]) //输出数组最后一位元素的值为d
arr.length=6; //数组长度扩容为6
console.log(arr) //输出结果为6，数组长度为6，第四第五个元素的值为empty
console.log(arr[4]) //未赋值，默认为undefined
console.log(arr[5]) //未赋值，默认为undefined
输出结果入图
3. 通过索引号实现数组扩容
// 创建数组，通过索引号扩容数组
var arr = ['a','b','c','d'];
console.log(arr.length)//输出结果为4，数组长度为4
console.log(arr[3]) //输出数组最后一位元素的值为d
arr[4]='A' //给第五个元素进行赋值,因为第5个元素没被占用，所以会在数组后面追加元素
arr[5]='B' //给第六个元素进行赋值
arr[10] = 'C' //给第11个元素进行赋值
console.log(arr)
console.log(arr[6])
运行结果如图，可以发现，JS数组可以直接通过索引号进行扩容，而未赋值的元素默认为empty,返回结果是undefined，如果元素不存在，则在数组后面追加元素，若已经存在，则替换数组元素–>arr[3]
注意：不要直接给数组名赋值，否则会覆盖原有数组！
// 演示
var arr=[1,2,3,4,5]
console.log(arr)//打印原数组
arr="有点意思！"
console.log(arr)
2.数组的常用方法
1. shift()删除数组中的第一个元素并且返回被删除的元素，
同时其他元素的索引向前移动一位
var fruits = ['banana', 'orange', 'apple', 'mango']
console.log(fruits) //打印原数组
var x = fruits.shift(); //首元素删除
console.log(fruits) //删除后的数组，数组元素向前索引移动一位
console.log(x) //打印被删除元素的值banana
结果如图：
2. pop()删除数组中的最后一个元素并且返回被删除的元素
var fruits = ['banana', 'orange', 'apple', 'mango']
console.log(fruits) //打印原数组
var x = fruits.pop(); //末尾元素删除
console.log(fruits) //删除后的数组
console.log(x) //打印被删除元素的值mango
结果如图：
3. unshift(参数1,参数2···)向数组的开头添加一个或者更多的元素并且返回新的长度，
同时数组元素的索引向后移动
var fruits = ['orange', 'apple', 'mango']
console.log(fruits) //打印原数组
var x = fruits.unshift('banana'); //添加后返回数组长度
console.log(fruits) //添加后的数组
console.log(x) //打印新数组的总长度
结果如图：
4. push()向数组末尾增添一个或者多个数组元素，并且返回数组的长度
var fruits = ['orange', 'apple', 'mango']
console.log(fruits) //打印原数组
var x = fruits.push('banana'); //添加一个数后返回数组长度
console.log(fruits) //添加一个元素后的数组
console.log(x) //打印添加一个数后新数组的总长度
var x = fruits.push('pineapple','strawberry');//添加多个元素后返回数组长度
console.log(fruits) //添加多个元素后的数组
console.log(x) //添加多个元素后的总长度
结果如图
5. reverse()翻转数组
var fruits = ['orange', 'apple', 'mango']
console.log(fruits); //打印原数组
console.log(fruits.reverse()) //打印翻转后的数组
结果如图：
6. sort()数组排序，对字符串排序，比较的是ASCII码的顺序
1>如["a", "A", "1"], 按ASCII码顺序排列后为["1", "A", "a"]（数字>大写字母>小写字母）
2>如["ab", "ac", "abc"], 排序后为["ab", "abc", "ac"]
3>字符串数字：如["10", "5", "18" , "50"], 排序后为["10", "18", "5", "50"]
比较方法：
（第一位相同比较第二位，b>c，因此ab和abc在ac之前；再比较ab与abc, ab没有第三位，因此排在abc之前)!!!
如需要对字符串形式的数字进行排序，可以采用以下两种方式：
1、统一格式，补足位数，如["10", "5", "18" , "50"]中, 将"5"写为"05"
2、转换为数字，使用特殊方法对数字排序
var arr1 = ["a", "A", "1"]
var arr2 = ["ab", "ac", "abc"]
var arr3 = ["10", "5", "18", "50"]
var arr4 = ["10", "05", "18", "50"]
console.log(arr1.sort());
console.log(arr2.sort()); //比较方法：按ASCII码比较排序
console.log(arr3.sort());
console.log("数字排序(5改成'05'):" + arr4.sort());
结果如图：
3.拓展：数字排序
1、匿名函数当做参数使用数组排序(一维数组)
//语法格式：
arr.sort ( function (a, b) { //arr为需要排序的数组名
return a - b //升序
})
根据比较函数返回值正负来决定排列顺序，为正升序，为负降序
使用如下：
function sortby(a, b) {
return a - b //升序
} //降序就改成return b-a
var arr = [10, 5, 8, 50];
arr.sort(sortby)//把排序匿名函数当做参数进行调用
console.log(arr);//输出排序后的结果
//匿名函数的函数名任意
结果如图：
2、匿名函数当做参数使用数组排序(二维数组)
//语法格式：
arr.sort (function (a, b) { //arr为需要排序的数组名
return a[1] - b [1] //升序，降序改为b[1]-a[1]
})
使用如下：
function sortby(a, b) {
return a[1] - b[1] //升序
} //降序就改成return b-a
var arr = [["Alice", "95"], ["Bob", "80"], ["Cart", "100"]]
arr.sort(sortby)//把排序匿名函数当做参数进行调用
console.log(arr);//输出排序后的结果
//匿名函数的函数名任意
结果如图：
3.拓展：数组筛选(巧用length属性)
将数组[2,4,5,6,8,9,12,15,3,7,26,14]中大于10的元素存入新数组
//分析：
1、创建一个数组arr=[2,4,5,6,8,9,12,15,3,7,26,14]
2、创建一个新数组newArr来存放大于10的元素
3、遍历旧数组，找出大于10的元素
4、依次添加到新数组中
// 方法1，通过变量来增加数组长度
var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //创建一个数组
var newArr=[] //创建空的新数组，用于存放大于10的元素
var j =0 ; //定义变量，用于增加新数组的长度
for(var i = 0 ;i<arr.length;i++){
//for循环遍历数组
if(arr[i]>10){
//判断数组元素是否大于10
newArr[j]=arr[i] //如果arr数组元素>10，则存入新数组
j++; //当存入元素，长度+1，即j++
}
}
console.log(newArr)//打印新数组
// 方法2，巧用length属性
var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //创建一个数组
var newArr=[] //创建空的新数组，用于存放大于10的元素
for(var i = 0 ;i<arr.length;i++){
//for循环遍历数组
if(arr[i]>10){
//判断数组元素是否大于10
newArr[newArr.length]=arr[i]//如果arr数组元素>10，则存入新数组
} //巧用length属性，数组索引从0开始增加
}
console.log(newArr)//打印新数组
结果如图：
四、二维数组
概念：二维数组就是一维数组的每个元素是一个一维数组
1.二维数组的创建与访问
// 创建与访问
var fruits = [["1", "Banana"], ["2", "Orange"]];//创建二维数组
var element = ["3", "Apple"];
fruits[2] = element; //给第三个元素赋值
console.log(fruits); //打印二维数组
console.log(fruits[0]); // ["1", "Banana"]//打印第一个元素(数组)
console.log(fruits[0][1]); // "Banana" //打印第一个元素的第2个值
结果如图：
2.遍历二维数组
通过for in循环遍历二维数组
var fruits = [["1", "Banana"], ["2", "Orange"], ["3", "Apple"]];
for (var i in fruits) {
//控制外层数组元素
for (var j in fruits[i]) {
//控制内层数组元素
console.log(fruits[i][j]);//输出数值中每一个元素
}
}
结果如图：
小结：二维数组跟一维数组使用差不多，只是稍微麻烦一点，访问二维数组的具体元素值：arr[外层数组索引][内层数组索引]
遍历二维数组使用双重for循环
3.使用二维数组进行排序(冒泡排序法)
图例解释：
//代码实现如下
var arr = [5,4，3,2,1];
for (var i = 0; i < arr.length - 1; i++) {
//外层循环控制交换趟数，趟数为数组长度-1
for (var j = 0; j < arr.length - 1 - i; j++) {
//内层循环控制每一趟需要交换的次数
if (arr[j] > arr[j + 1]) {
//判断前面一个数是否大于后面一个数，如果是则交换两数
var temp = arr[j];//临时变量，用于交换两数的临时存取
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);//输出排序后的结果
结果如图：
总结
本次笔记主要记录了数组的基本使用，但是数组的妙用远不止这些，需要我们自己去探索。
转载：https://blog.csdn.net/qq_53738230/article/details/115448785
查看评论