JavaScript寒假系统学习之数组(一)
- 一、数组
- 1.1 什么是数组
- 1.2 数组创建的2种方式
- 1.2.1 利用new创建数组
- 1.2.2 利用数组字面量创建数组
- 1.3 访问数组元素
- 1.4 遍历数组
- 1.5 数组实战训练
- 1.5.1 计算数组的和以及平均值
- 1.5.2 求数组中的最大值
- 1.5.3 数组转化为字符串
- 1.5.4 数组新增元素
- 1.5.5 数组存放1-10个值
- 1.5.6 筛选数组方法
- 1.5.7 删除数组指定元素
- 1.5.8 翻转数组
- 1.5.9 冒泡排序
一、数组
1.1 什么是数组
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的优雅方式。
1.2 数组创建的2种方式
1.2.1 利用new创建数组
格式:
var 数组名 = new Array();
const 数组名 = new Array();
let 数组名 = new Array();
// 例子
var studentArr = new Array(); // 创建一个空数组studentArr
1.2.2 利用数组字面量创建数组
格式:
var 数组名 = [ ];
const 数组名 = [ ];
let 数组名 = [ ];
// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English
// 注意: 数组内部的类型无限制
var demoArr = [1, true, 'Amy']; // 这样创建是被JS允许的
1.3 访问数组元素
格式:
数组名[索引号]
// 例子
// 刚刚创建的数组courseArr, 里面的元素有Chinese、Math、English,其索引号(即下标)分别是0,1,2
var courseArr = ['Chinese', 'Math', 'English'];
console.log(courseArr[0]); // 访问数组元素Chinese
console.log(courseArr[1]); // 访问数组元素Math
console.log(courseArr[2]); // 访问数组元素English
1.4 遍历数组
格式:
for循环
// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English
for(var i = 0; i < courseArr.length; i++) {
console.log(courseArr[i]); // 依次打印出Chinese、Math、English
}
1.5 数组实战训练
1.5.1 计算数组的和以及平均值
var arr = [10, 34, 22, 54, 93];
var sum = 0; // 总和
var average = 0; // 平均值
for(var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log('sum = ' + sum); // 213
average = sum / arr.length;
console.log('average = ' + average); // 42.6
1.5.2 求数组中的最大值
var arr = [34, 6, 55, 49, 82];
var max = arr[0]; // 初步定义一个最大值
for (var i = 0; i < arr.length ; i++) {
if(arr[i] > max) { // 在遍历中拿arr中每个元素与max进行比较
max = arr[i];
}
}
console.log('max = ' + max); // 82
1.5.3 数组转化为字符串
var arr = ['Nice', 'to', 'meet', 'you'];
var str = '';
for(var i = 0; i < arr.length; i++) {
str += arr[i] + ' ';
}
console.log('str = ' + str); // Nice to meet you
1.5.4 数组新增元素
var arr = ['apple'];
// 方式一:
arr[arr.length] = 'peach';
console.log('arr = ' + arr); // apple,peach
// 方式二:数组名.push(新元素) 将新增元素添加到数组尾部
arr.push('watermelon');
console.log('arr = ' + arr); // apple,peach,watermelon
// 方式三:数组名.unshift(新元素) 将新增元素添加到数组头部
arr.unshift('strawberry');
console.log('arr = ' + arr); // strawberry,apple,peach,watermelon
// 方式三: 数组名.splice(索引号, 数量, 新增元素) 可删除从 索引号 处开始的零个或多个元素(即数量),并且用参数列表中声明的一个或多个值(即新增元素)来替换那些被删除的元素。
arr.splice(1, 0, 'orange', 'pear'); // 从arr[1]开始,删除原数组0个元素,插入新增元素orange、pear
console.log('arr = ' + arr); // strawberry,orange,pear,apple,peach,watermelon
详细请参考:JS数组添加元素的三种方法 js数组反转的几种方法
1.5.5 数组存放1-10个值
var arr = [];
for(var i = 0; i < 10; i++) {
// 法一:
// arr[i] = i + 1;
// 法二:
arr[arr.length] = i + 1; // 每次完成 i + 1之后,arr.length就会自动增加1
}
console.log('arr = ' + arr);
1.5.6 筛选数组方法
// 筛选数组中大于10的元素
var arr = [5, 23, 14, 2];
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] > 10) {
newArr[newArr.length] = arr[i]; // newArr存储arr数组中>10的元素
}
}
console.log('newArr = ' + newArr); // 23,14
// 如果需要改动的是原数组,那么执行下一步
arr = newArr; // arr原内容全被newArr的内容覆盖
console.log('arr = ' + arr); // 23,14
1.5.7 删除数组指定元素
var arr = ['apple', 'pear', 'apple', 'watermelon'];
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] !== 'apple') {
newArr[newArr.length] = arr[i]; // newArr存储arr数组中非apple的元素
}
}
arr = newArr; // arr原内容全被newArr的内容覆盖
console.log('arr = ' + arr); // pear,watermelon
1.5.8 翻转数组
// 翻转数组
var arr = [1, 2, 3, 4, 5];
var newArr = [];
// 法一: arr.reverse()方法直接翻转
arr = arr.reverse();
console.log('arr = ' + arr); // 5,4,3,2,1
// 法二:遍历 + unshift()
arr.forEach((element) => {
newArr.unshift(element); // 具体的.unshift()可参考上面的【1.5.4 数组新增元素】
})
console.log('newArr = ' + newArr); // 5,4,3,2,1
// 法三:遍历 + 翻转
for(var i = 0; i < arr.length; i++) {
var j = arr.length - i - 1;
if(i < j) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
console.log('arr = ' + arr); // 5,4,3,2,1
参考资料:js数组反转的几种方法
1.5.9 冒泡排序
var arr = [23, 14, 33, 52, 6];
for(var i = 0; i < arr.length; i++) {
for(var j = 0; j < arr.length - i; j++) {
if(arr[j] < arr[j + 1]) { // 表示后面大的元素与前面小的元素互换,即整个数组从大到小进行排序。如果是>,则相反的排序结果。
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log('arr = ' + arr); // 52,33,23,14,6