如何保存一个班级的所有学生的相关信息,如姓名、学号、年龄?
数组是存储一系列值的变量集合。
数组构成:数组由一个或多个数组元素组成的,各元素之间使用逗号“,”分割。
数组元素:每个数组元素由“下标”和“值”构成。
数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。
一维数组:就是指数组的“值”是非数组类型的数据,如上图。
二维数组:是指数组元素的“值”是一个一维数组,如下图。
多维数组:当一个数组的值又是一个数组时,就可以形成多维数组。它通常用于描述一些信息。
保存一个班级学生信息,每个数组元素都代表一个学生,而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息,这样通过一个变量即可有规律的保存一个班级的所有学生信息,方便开发时进行处理。
数组在 JavaScript 中的创建方式:
实例化 Array 对象的方式创建数组,是通过 new 关键字实现的。
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();
var arr2 = new Array;
直接法 “[]” 与 Array() 对象的使用方式类似,只需将 new Array() 替换为 [] 即可。
var weather = ['wind', 'fine',]; // 相当于:new Array('wind', 'fine',)
var empty = []; // 相当于:new Array
// 控制台输出 mood:(5) ["sad", empty × 3, "happy"]
var mood = ['sad', , , ,'happy'];
var arr = [10]; //创建一个第一个值为10的数组
var arr1 = new Array(10); //创建一个长度为10的数组
console.log(arr);
console.log(arr1);
Array 对象提供的 length 属性可以获取数组的长度,其值为数组元素最大下标加1。
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 输出结果为:3
console.log(arr2.length); // 输出结果为:6
数组的 length 属性不仅可以用于获取数组长度,还可以修改数组长度。
在利用 length 属性指定数组长度时,有以下是三种情况:
var arr1 = [];
arr1.length = 5;
console.log(arr1); // 输出结果:(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2); // 输出结果:(4) [1, 2, 3, empty]
var arr3 = ['a', 'b'];
arr3.length = 2;
console.log(arr3); // 输出结果:(2) ["a", "b"]
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3;
console.log(arr4); // 输出结果:(3) ["hehe", "xixi", "gugu"]
除此之外,在利用 Array 对象方式创建数组时,也可以指定数组的长度。
var arr = new Array(3);
console.log(arr); // 输出结果:(3) [empty × 3]
注意:JavaScript 中不论何种方式指定数组长度后,并不影响继续为数组添加元素,同时数组的 length 属性值会发生相应的改变。
数组元素访问方式:“数组名[下标]”。
var fruit = ['苹果', '香蕉', '橘子'];
console.log(fruit[0]);
console.log(fruit[1]);
console.log(fruit[2]);
console.log(fruit[3]);
当访问数组中不存在的数据时,会返回 undefined 而不是报错
所谓遍历数组就是依次访问数组中所有元素的操作。
for (variable in object) {...}
var arr = [12, 59, 66]; // 待求和的二维数组
var sum = 0;
for (var j in arr) { // 遍历数组arr的元素
sum += arr[j]; // 二维数组元素累计相加
}
在 ES6 中,新增了一种 for…of 语法,可以更方便地对数组进行遍历。
var arr = [1, 2, 3];
for (var value of arr) {
console.log(value);
}
语法:
Array.forEach(function(value, index, arr){ ... });
var arr = [2, 3, 4, 5, 6, 7];
arr.forEach(function(item, index, arr){
//三个参数分别代表 item 当前遍历到的元素 index 当前遍历到的下标 arr 数组本身
})
元素的添加与修改元素的方式:“数组名[下标]”。与访问数组中的元素的方式相同。
var height = [];
height[5] = 183;
height[0] = 175;
height[3] = 150;
console.log(height);
var arr = ['Asa','Taylor'];
arr[2] = 'Tom';
arr[3] = 'Jack';
console.log(arr);
修改元素与添加元素的使用相同,区别在于修改元素是为已含有值的元素重新赋值。
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
console.log(arr);
在创建数组后,有时也需要根据实际情况,删除数组中的某个元素值。
例如,一个保存全班学生信息的多维数组,若这个班级中有一个学生转学了,那么在这个保存学生信息的数组中就需要删除此学生。
此时,可以利用 delete 关键字删除该数组元素的值。
delete 关键字只能删除数组中指定下标的元素值,删除后该元素依然会占用一个空的存储位置。
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // 输出结果:(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1]; // 删除数组中第2个元素
console.log(stu); // 输出结果:(3) ["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];
var arr = [1, 2, 3];
[a, b] = arr;
// 输出结果:1 - 2
console.log(a + ' - ' + b);
var n1 = 4, n2 = 8;
[n1, n2] = [n2, n1];
// 输出结果:8 - 4
console.log(n1 + ' - ' + n2);
了解一维数组如何创建后,二维数组的创建就非常的简单了,只需将数组元素设置为数组即可。
// 使用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 = [[], []]; // 空二维数组
在创建完二维数组后,如何遍历二维数组中的元素,对其进行操作呢?
在 Web 项目开发中,还经常通过多维空数组添加元素的方式来创建多维数组。
var arr = []; // 创建一维空数组
for(var i = 0 ; i< 3; ++i){
arr[i] = []; // 将当前元素设置为数组
arr[i][0] = i; // 为二维数组元素赋值
}
注意:
如arr[i][0]
)赋值,首先要保证添加的元素(如arr[i])已经被创建为数组,否则程序会报“Uncaught TypeError……”错误。二维数组转置
二维数组的转置指的是将二维数组横向元素保存为纵向元素。
res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] = arr[2][0]
。
res[i][j] = arr[j][i]
。
res数组长度=arr元素(如arr[0])的长度。
res元素(如res[0])的长度=arr数组的长度。
冒泡排序:是计算机科学领域中较简单的排序算法。
实现原理:在冒泡排序的过程中,按照要求从小到大排序或从大到小排序,不断比较数组中相邻两个元素的值,较小或较大的元素前移。
比较相邻的元素。如果第一个比第二个大,就交换他们两个。
对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤,除了最后一个。
持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比比较
比较的轮数 = 数组长度 - 1;
每轮比较的次数 = 数组长度 - 当前的轮数
// 编写方法,实现冒泡
var arr = [98, 31, 5, 27, 2, 78];
//外层循环,控制趟数,每一次找到一个最大值
for (var i = 0; i < arr.length - 1; i++) {
// 内层循环,控制比较的次数,并且判断两个数的大小
for (var j = 0; 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);
插入排序:也是冒泡排序的优化,是一种直观的简单排序算法。
实现原理:通过构建有序数组元素的存储,对于未排序的数组元素,在已排序的数组中从最后一个元素向第一个元素遍历,找到相应位置并插入。其中,待排序数组的第1个元素会被看作是一个有序的数组,从第2个至最后一个元素会被看作是一个无序数组。
let arr = [98, 7, 65, 54, 12, 6];
let len = arr.length;
let preIndex, current;
for (let i = 1; i < len; i++) {
preIndex = i - 1;
current = arr[i];
while (preIndex >= 0 && current < arr[preIndex]) {
arr[preIndex + 1] = arr[preIndex];
preIndex--;
}
arr[preIndex + 1] = current;
}
return arr;
例如:按从小到大排序。插入排序比较的次数与无序数组的长度相等。
JavaScript 中,除了前面讲解的添加与删除数组元素的方式外,还可以利用 Array 对象提供的方法,模拟栈和队列的操作。
方法名称 | 功能描述 | 格式 |
---|---|---|
push() | 将一个或多个元素添加到数组的末尾,并返回数组的新长度。 | Array.push(参数1, 参数2…); |
unshift() | 将一个或多个元素添加到数组的开头,并返回数组的新长度。 | Array.unshift(参数1, 参数2…); |
pop() | 从数组的末尾移出并返回一个元素,若是空数组则返回undefined。 | Array.pop(); |
shift() | 从数组的开头移出并返回一个元素,若是空数组则返回undefined。 | Array.shift(); |
在开发中,若要检测给定的值是否是数组,或是查找指定的元素在数组中的位置。
方法名称 | 功能描述 | 格式 |
---|---|---|
includes() | 用于确定数组中是否含有某个元素,含有返回true,否则返回false。 | Array.includes(searchvalue, start); |
Array.isArray() | 用于确定传递的值是否是一个 Array,是返回true,不是返回false。 | |
indexOf() | 返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1 | Array.indexOf(searchvalue,start); |
lastIndexOf() | 返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1 | Array.indexOf(searchvalue,start); |
表中除了 Array.isArray() 方法外,其余方法默认都是从指定数组索引的位置开始检索,且检索方式与运算符“===”相同,即只有全等时才会返回比较成功的结果。
var data = ['peach', 'pear', 26, '26', 'grape'];
// 从数组下标为3的位置开始检索数字26
console.log(data.includes(26, 3)); // 输出结果:false
// 从数组下标为data.length - 3 的位置查找数字26
console.log(data.includes(26, -3)); // 输出结果:true
// 判断变量data是否为数组
console.log(Array.isArray(data)); // 输出结果:true
indexOf() 用于在数组中从指定下标位置,检索到的第一个给定值,存在则返回对应的元素下标,否则返回-1。
indexOf() 方法的第2个参数用于指定开始查找的下标:
var fruits = ["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
Array 对象提供的 lastIndexOf() 方法,用于在数组中从指定下标位置检索到的最后一个给定值的下标。与indexOf() 检索方式不同的是,lastIndexOf() 方法默认逆向检索,即从数组的末尾向数组的开头检索。
lastIndexOf() 方法的第2个参数用于指定查找的下标,且由于其采用逆向的方式检索:
var fruits = ["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4);
开发中若需要将数组转换为字符串时,则可以利用 JavaScript 提供的方法实现。
方法名称 | 功能描述 | 格式 |
---|---|---|
join() | 将数组的所有元素连接到一个字符串中。 | Array.join(字符串); |
toString() | 返回一个字符串,表示指定的数组及其元素。 | Array.toString(); |
var arr = ['a','b','c'];
console.log(arr.join()); // 输出结果:a,b,c
console.log(arr.join('-')); // 输出结果:a-b-c
console.log(arr.toString()); // 输出结果:a,b,c
join() 和 toString() 方法的相同点:
join() 和 toString() 方法的不同点:
除了前面讲解的几种常用方法外,JavaScript 还提供了很多其他常用的数组方法。
例如,合并数组、数组浅拷贝、颠倒数组元素的顺序等。
方法名称 | 功能描述 | 格式 |
---|---|---|
sort() | 对数组的元素进行排序,并返回数组。 | array.sort([回调函数]); |
fill() | 用一个固定值填充数组中指定下标范围内的全部元素 | array.fill(value, start, end); |
reverse() | 颠倒数组中元素的位置 | array.reverse(); |
splice() | 对一个数组在指定下标范围内删除或添加元素 | array.splice(start, number[,元素1, 元素2…]); |
slice() | 从一个数组的指定下标范围内拷贝数组元素到一个新数组中 | array.slice(start, end); |
concat() | 返回一个合并两个或多个数组后的新数组 | array.concat(任意数据类型[,任意数据类型…]); |
/* array.sort([回调函数]);
** 给数组中的元素排序,默认以 unicode 编码顺序排列,因此直接对数组中的数字排序会产生预料外的结果
** 可以传递一个回调函数作为sort的参数,回调函数中有两个形参分别表示数组中一前一后的两个元素,具体是哪两个元素需要根据循环确认
** 函数的返回值决定是否交换这个两个元素
** -- 当返回值大于0时交换
** -- 小于0时不交换
** -- 等于0时认为两个值相等不交换
** 会直接修改原数组的元素,与方法的返回值相同
*/
var arr = [1, 10, 20, 15, 25, 5];
arr.sort(function(a, b){
return a-b;
});
/* arr.reverse();
** 第一个参数是截取开始的索引,返回数组会包括开始索引的元素
** 第二个参数是截取结束的索引,返回数组不会包括结束索引的元素
** 参数可以是负值,如果为负就是从后往前计数
*/
var arr = [1,2,3,4];
var result = arr.reverse()
console.log(result); // 4,3,2,1
console.log(arr); // 4,3,2,1
/* array.slice(start, end);
** 第一个参数是截取开始的索引,返回数组会包括开始索引的元素
** 第二个参数是截取结束的索引,返回数组不会包括结束索引的元素
** 参数可以是负值,如果为负就是从后往前计数
*/
var arr = [0,1,2,3,4,5];
var arr1 = arr.slice(0,4);
console.log(arr1);
var arr2 = arr.slice(-3,-1);
console.log(arr2);
/* array.splice(start, number[,元素1, 元素2...]);
** 第一个参数为从哪个索引开始删除元素
** 第二个参数为删除几个元素
** 从第三个参数开始的参数都是是在第一个参数的索引之前添加这些元素
*/
var arr = [0,1,2,3,4,5];
arr.splice(0,1,7,8,9);
console.log(arr);
/* array.concat(任意数据类型[,任意数据类型...]);
** 可以将两个或者多个数组连接成一个数组,不会改变原数组
** 拷贝原数组,生成原数组
*/
var arr = [1,2,3,4];
var result = arr.concat([5,6,7,8],1,"a", false, null, undefined, {});
console.log(result);
采用冒泡排序,从大到小排序,数组是 70,35,67,49,20,59,98,100
求字符串数组中每一项的长度
输出任意一个二维数组中数据的个数
将字符串数组用|或其他符号分割
数组去重
有一个从小到大排好序的数组。现输入一个数,要求按原来的规律将它插入数组中
猴子选大王
要求一群猴子排成一圈,按“1,2,……,n”依次编号。然后从第1只开始数,数到第m只,把它踢出圈,其后的猴子再从1开始数,数到第m只,再把它踢出去……,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就是我们要找的大王。
假设n(猴子总数):8、m(踢出圈的):3
第一圈:踢出的猴子编号为3、6,位置编号为3、6。
第二圈:踢出的猴子编号为1、5,位置编号为9、12。
第三圈:踢出的猴子编号为2、8,位置编号为15、18。
第四圈:无。
第五圈:踢出的猴子编号为4,位置编号为21。
得出猴王编号:7。
通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子。
利用数组保存所有猴子的编号(1~n)。
设置一个变量i,记录每次参与游戏(报数)的猴子位置。
通过while循环,只要猴子数组内元素个数大于1,就继续循环。
在循环中判断当前猴子的位置i与m求余是否为0,若为零,删除该数组元素。
省份城市的三级联动
如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就是我们要找的大王。
- 假设n(猴子总数):8、m(踢出圈的):3
- 第一圈:踢出的猴子编号为3、6,位置编号为3、6。
- 第二圈:踢出的猴子编号为1、5,位置编号为9、12。
- 第三圈:踢出的猴子编号为2、8,位置编号为15、18。
- 第四圈:无。
- 第五圈:踢出的猴子编号为4,位置编号为21。
- 得出猴王编号:7。
- 通过prompt()接收用户传递的猴子总数n和踢出的第m只猴子。
利用数组保存所有猴子的编号(1~n)。
设置一个变量i,记录每次参与游戏(报数)的猴子位置。
通过while循环,只要猴子数组内元素个数大于1,就继续循环。
在循环中判断当前猴子的位置i与m求余是否为0,若为零,删除该数组元素。
省份城市的三级联动