第十三节:JavaScript 基础语法
3.2.5 数组
数组是储存一系列值的变量集合,它是由一个或多个数组元素组成的。各元素之间用 " , " 隔开。
每个数组元素的构成:
- 下标:也称为 索引
- 以数字表示,默认情况下从0开始依次递增,用于识别元素
- 值:
- 元素的内容,客户会议是任意类型的数据
**数组的划分:**数组可以划分为 一维数组、二维数组、三维数组 等多维数组
- 一维数组:数组的 “值” 是非数组类型的数据
- 多维数组:数组的值又是一个数组(数组的嵌套)
- 例如:一个班有很多学生,每个学生都有 姓名、年龄、学号 等信息
- 通过一个变量即可有规律的保存一个班级的所有学生信息
- 例如:一个班有很多学生,每个学生都有 姓名、年龄、学号 等信息
创建数组
创建数组的两种方法为:实例化 Array() 对象的方式 和 直接使用 " [ ]" 的方式
两者的区别在于:直接使用 “[ ]” 创建数组:可以包含有空存储位置的数组,而 Array() 对象的方式不行
-
使用 Array 对象的方式创建数组 是通过 new 关键字实现的
// 元素类型单一型 var area = new Array('henan', 'beijing', 'shanghai'); var score = new Array(56, 36, 31, 87); // 元素类型为混合型 var mix = new Array(123, 'abc', null, true, undefined); // 空数组 var arr1 = new Array(); 或 var arr2 = new Array;
-
直接使用 " [ ]" 的方式(实际开发常用)
var weather = ['wind', 'fine']; // 相当于:new Array(56, 36, 31, 87); var empty = []; // 相当于:new Array // 包含三个空值 var mood = ['sad', , , , 'happy'];
获取数组长度
Array 对象提供的 length 属性可以获取数组的长度,其值为数组元素最大下标加 1
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 3
console.log(arr2.length); // 6
数组的访问与遍历
访问数组元素
可以通过访问下标的方式访问元素,获取该元素的值
var arr = ['hello', 'javascript', 22.46, true];
console.log(arr[0]); // hello
console.log(arr[2]); // 22.46
console.log(arr); // ['hello', 'javascript', 22.46, true]
遍历数组元素
利用下标进行遍历数组可以使用 for 或 for…in 语句
语法格式:
for (variable in object) {}
variable:数组下标
object:数组的变量名称
// object 还是一个对象,所以 for…in 还可以用于对象的遍历
// 遍历导航栏
var navlist = ['首页', '免费资源', '课程中心', 'IT学院', '技术社区'];
var str = '<ul>';
for (var i in navlist) {
str += '<li><a>' + navlist[i] + '</a></li>';
}
str += '</ul>';
document.getElementById('navlist').innerHTML = str;
ES6 新增语法
var arr = [1, 2, 3];
for (var value of arr) {
console.log(value);
}
// value: 每次遍历数组时对应的数组元素值
// arr: 待遍历的数组
元素的增删改
添加元素
通过自定义数组元素下标的方式添加元素
为数组添加元素时,允许下标不按照数字顺序连续添加,其中未设置具体值的元素会以空存储位置的形式存在(empty)
-
为空数组添加元素
var height = []; height[5] = 12; height[0] = 1; height[3] = 43; console.log(height); // [1, empty, empty, 43, empty, 12]
-
为非空数组添加元素
var arr = ['Asa', 'Taylor']; arr[2] = 'Tom'; arr[3] = 'Jack'; console.log(arr); // ['Asa', 'Taylor', 'Tom', 'Jack']
-
使用数组的长度,动态新增数据
var arr = []; arr[arr.length] = '红楼梦'; arr[arr.length] = '西游记'; arr[arr.length] = '水浒传'; arr[arr.length] = '三国演义'; console.log(arr); // ['红楼梦', '西游记', '水浒传', '三国演义'];
修改元素
修改元素与添加元素的方式相同,不同的是修改元素是为已含有值的元素重新赋值
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
console.log(arr); // ['a', 'b', '123', '456']
删除元素
删除元素后,会变为 empty,意为:空,值为:undefined
删除数组中某个元素值,可以利用 delete 关键字删除元素的值
- 例如:一个保存全班学生信息的多维数组,若有一个学生转学了,那么就要删除关于此学生的个人信息
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // ['Tom', 'Jimmy', 'Lucy']
delete stu[1];
console.log(stu); // ['Tom', empty, 'Lucy']
arr.length = 10; // 删除末位数据
通过 delect 删除指定数据:
一个保存了全班学生信息的多维数组,若有一个学生转学了,那么就要删除关于此学生的个人信息
var stu = ['Tom', 'Jim', 'Lucy'];
console.log(stu); // ['Tom', 'Jim', 'Lucy']
delect stu[1];
console.log(stu); // ['Tom', empty, 'Lucy']
解构赋值
ES6 新增一种方式——解构赋值
例如:把数组 [1, 2, 3] 中的元素分别赋值给 a、b 和 c,传统的做法是单独声明变量和赋值
// 传统方式
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
// 解构赋值
[a, b, c] = [1, 2, 3];
使用解构赋值时,会将 “=” 右侧 “[]” 中的元素依次赋值给左侧 “[]” 中的变量
-
当左侧变量的数量小于右侧元素个数时,则忽略多余的元素
[a, b] = [1, 2, 3]; // [1, 2]
-
当左侧变量的数量大于右侧元素个数时,则多余的变量会被初始化为 undefined
[a, b, c, d] = [1, 2, 3]; // [1, 2s, 3, undefined]
解构赋值 右侧的内容还可以是一个变量名,或是通过解构赋值完成两个变量数值的交换
var arr = [1, 2, 3];
[a, b] = arr; // [1, 2]: 左边值少,舍弃 3
console.log(a + '-' + b); // 1-2
var n1 = 4, n2 = 8;
[n1, n2] = [n2, n1]; //可以是变量
console.log(n1 + '-' + n2); // 8-4
案例:查找最大值与最小值
获取数组中的最大值和最小值
var arr = [100, 90, 80, 70]; // 创建数组
var min = max = arr[0]; // 假设第一个元素为最大值和最小值
for (var i=1; i <arr.length; i++) {
// 获取最大值
if (arr[i] > max) {
max = arr[i]; // 如果当前数大于最大值,则修改最大值
}
// 获取最小值
if (arr[i] < min) {
min = arr[i]; // 如果当前数小于最小值,则修改最小值
}
}
console.log('要查找的数组:' + arr);
console.log('最小值:' + min);
console.log('最大值:' + max);
二维数组
创建二维数组
// 使用 Array() 对象创建数组
var info = new Array( new Array('Tom', 13, 155), new Array('Lucy', 11, 152) );
var arr = new Array(new Array, new Array); //空二维数组
// 使用 "[ ]" 创建数组 (实际开发常用)
var num = [
[1,3],
[2,4]
];
var empty = [[], []]; //空二维数组
遍历二维数组
JavaScript 中没有限制数组的维数,但实际开发中,为了方便代码阅读、调试和维护,推荐使用三维及以下的数组保存数据
// 创建数组
var arr = [
["学号", "姓名", "年龄", "班级", "手机号"],
["arr[i]", '张杰', 18, '全栈', 10020030040],
["arr[i]", '刘亦菲', 17, '全栈', 11122233345],
["arr[i]", 'Tom', 20, '全栈', 22233344456],
["arr[i]", '汪峰', 20, '全栈', 33344455567],
["arr[i]", '小娜', 17, '全栈', 44455566678]
];
// 创建表格格式
var str = '<table>';
// 遍历数组(行)
for (i in arr) {
// 创建 tr格式
str += '<tr>';
// 遍历二维数组(单元格/列)
for (j in arr[i]) {
str += '<td>' + arr[i][j] + '</td>';
}
// 补齐 tr格式
str += '</tr>';
}
// 补齐表格格式
str += '</table>';
// 打印二维数组
document.getElementById("arr").innerHTML = str;
案例:二维数组转置
// 1.创建初始数组
var arr = [ [a, b, c], [d, e, f], [g, h, i], [j, k, l] ];
// 2.创建二维数组
var res = [];
// 遍历 res中所有元素
for (var i=0; i<arr.length; ++i) {
res[i] = []; // 为二维数组添加空值,用于完成二维数组的创建,以防为二维数组添加元素时报错
// 遍历 res元素中的所有元素
for (var j=0; j<arr.length; ++j) {
res[i][j] = arr[j][i];
}
}
// 打印转置前后的二维数组
console.log('转置前:');
console.log(arr);
console.groupEnd(); // 该方法用来结束一个分组信息
console.log('转置后:');
console.log(res);
数组排序
冒泡排序
var arr = [97, 68, 72, 29, 51];
// 每一轮
for (var i=0; i < arr.length-1; i++) {
// 每一次
for (var j=0; j < arr.length-i; j++) {
// 比较当前数和下一个数
if (arr[j] > arr[j+1]) {
// 打的进行交换
var he = arr[j] + arr[j+1];
arr[j] = he - arr[j];
arr[j+1] = he - arr[j];
}
}
}
// 打印新数组
alert(arr);
数组方法
数组的增删改
添加数据
/* .unshift */
// 从数组前面添加数据,返回值是数组最新的长度
var r = 数组名.unshift('张三', 600);
/* .puch */
// 从数组后面添加数据,返回值是数组最新的长度
/ 特点:可以同时添加多条数据
arr.puch(数据);
var r = 数组名.puch('刘亦菲');
删除数据
/* .shift */
// 删除数组的第一项数据,返回值是删除的数据
var r = 数组名.shift();
/* .pop */
// 删除数组的最后一项,返回值是删除的数据
var r = 数组名.pop();
.splice 的增删改
新增数据
参数1:从数组 下标0 开始操作数据
参数2:0 表示不删除参数3:表示新增的数据
语法格式:
var r 数组名.splice(参数1, 参数2, 数据);
var r = arr.splice(0, 0, '新增的数据');
删除数据
参数1:从数组 下标1 开始操作数据
参数2:大于0,表示删除几个元素
返回值是 删除的数据
语法格式:
var r 数组名.splice(参数1, 参数2);
var r = arr.splice(1, 1);
修改数据
参数1:从数组 下标1 开始操作数据
参数2:大于0,表示修改几个元素参数3:表示修改的数据
返回值是 被替换的数据
语法格式:
var r = arr.splice(1, 1, 参数3);
var arr = ['张三', '李四', '王五'];
var r = arr.splice(1, 1, '修改的数据');
字符串截取
共同作用:截取字符串,不会修改原始值
区别:
- substring (start, end) 和 slice (start, end) 包头不包尾
- substr (start, length) 从 start 开始,往后截取 length 个数据
.slice();
查询开始下标到结束下标的数据,只写有一个值表示从第一个值到数组最后一个值
和(a = b;)赋值不一样,只 copy 数据,不 copy 指针
语法格式:
数组名.slice[start, end);
var arr = [1, 2, 3, 4, 5];
var r1 = arr.slice(1); // 查询数组从下标1开始到数组结束 => [2, 3, 4, 5]
var r2 = arr.slice(1, 3); // 查询从下标1 到 下标3 的数据 => [2, 3, 4]
.substring();
概述:[2, 4)
参数1:表示从第几个下标开始
参数2:表示到第几项结束
语法格式:
数组名.substring[start, end);
var str = '这是一段文字';
var r = str.substring(4,6); // 文字
.substr();
参数1:表示从第几个下标开始
参数2:代表往后截取多少项,不填写代表截取到最后一项
var str = '这是一段文字';
var r = str.substr(2); // 一段文字
var r = str.substr(2,2); // 一段
字符串转大小写
var str = 'day';
var = 'DAY';
str.toUpperCase(); // 转大写
str.toLowerCase(); // 转小写
字符串去除空格
去掉字符串前后空格,中间空格无法去掉
语法格式:
trim();
var str = ' 参 数';
var r = str.trim(str); // 参 数
字符串替换
语法格式:
replace();
// 用参数 2 替换参数 1
var str.replace(参数1, 参数2);
实现查找
indexOf();
作用:
- 从前往后 查找数组某项数据在数组中的下标
- 判断数组中是否存在该数据,查找不到 值 -1
// 参数2 表示:从下标几开始查
// 如果参数2 不填写,则返回第一个匹配值的下标
var arr = [200, 100, 200, 300, 200];
arr.indexOf(200); // 0
arr.indexOf(200, 1); // 2
lastindexOf
作用:从后往前找
var arr = [200, 100, 200, 300, 200];
arr.lastindexOf(200); // 4
includes
ES7 语法:判断数组中是否包含该数据,包含则返回 true,否则返回 false,说明数组中不包含该数据
var arr = [200, 100, 200, 300, 200];
arr.includes(200); // true