第十三节：JavaScript 基础语法（二）

第十三节：JavaScript 基础语法

3.2.5 数组

数组是储存一系列值的变量集合，它是由一个或多个数组元素组成的。各元素之间用 " , " 隔开。

每个数组元素的构成：

• 下标：也称为 索引
  • 以数字表示，默认情况下从0开始依次递增，用于识别元素
• 值：
  • 元素的内容，客户会议是任意类型的数据

**数组的划分：**数组可以划分为 一维数组、二维数组、三维数组 等多维数组

• 一维数组：数组的 “值” 是非数组类型的数据
• 多维数组：数组的值又是一个数组（数组的嵌套）
  • 例如：一个班有很多学生，每个学生都有 姓名、年龄、学号 等信息
    • 通过一个变量即可有规律的保存一个班级的所有学生信息

创建数组

创建数组的两种方法为：实例化 Array() 对象的方式 和 直接使用 " [ ]" 的方式
两者的区别在于：直接使用 “[ ]” 创建数组：可以包含有空存储位置的数组，而 Array() 对象的方式不行

1. 使用 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;
   

2. 直接使用 " [ ]" 的方式（实际开发常用）

   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）

1. 为空数组添加元素

   var height = [];
   height[5] = 12;
   height[0] = 1;
   height[3] = 43;
   console.log(height);	// [1, empty, empty, 43, empty, 12]
   

2. 为非空数组添加元素

   var arr = ['Asa', 'Taylor'];
   arr[2] = 'Tom';
   arr[3] = 'Jack';
   
   console.log(arr);		// ['Asa', 'Taylor', 'Tom', 'Jack']
   

3. 使用数组的长度，动态新增数据

   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