1. 数组（重点）
思考：如何保存一个班级的所有学生的姓名？ 回答：一种方法利用前面学习过的知识，则每一条信息都需要一个变量去保存，缺点是这样做很麻烦，而且容易出错，又不合理；另一种方法就是利用数组。 概念：数组是存储一系列值的变量集合，可以存储多个值。
1.1 语法
数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。 数组元素：每个数组元素由“索引下标”和“值”构成。
索引下标：简称下标，以数字表示，默认从0开始依次递增，用于识别元素。 值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。
1.2 创建数组
两种方式创建数组：直接使用“[]”的方式和实例化Array对象的方式
使用数组直接量是创建数组最简单、最直观的方法，在方括号中将数组元素用逗号隔开即可
例如：
var empty = []; // 没有元素的空数组
var num = [1, 3, 5, 7, 9]; // 有 5 个数值的数组
var mix = ['Bob', 20, true]; // 3 种不同元素的数组
调用构造函数 Array() 是创建数组的另一种方法。
// 元素值类型为字符串
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; //等同于数组直接量 [ ]
// 指定长度的数组
var len = new Array(5); //这种方式用来创建指定长度的数组。当预先知道所需元素个数时，这种方式可以用来预先分配一个数组空间。注意，数组中没有存储值，不能认为它是包含 5个值为 undefined 元素的数组
//含有3个空储存位置
var emptyPlace1 = ['abc', , , ,'123'];
//会报语法错误
var emptyPlace2 = new Array(56, 68, , , ,98);
注意：
1.在创建数组时，最后一个元素后的逗号可以省略，也可以存在。 2.直接法“[]”与Array()对象在创建数组时的区别在于，前者可以创建含有空存储位置的数组，而后者不可以。
1.3 访问和修改数组元素
数组创建完成后，我们可以 [ ] 操作符访问数组中的元素，数组的引用位于方括号左边。 方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素，又可以修改数组中的元素。
var letters = ['a', 'b', 'c', 'd'];
console.log(letters[0]); // 访问索引为 0 的元素 'a'
console.log(letters[4 - 2]); // 访问索引为 2 的元素 'c'
letters[1] = 1; // 修改索引为 1 的元素 ['a', 1, 'c', 'd']
letters[1 + 2] = 3; // 修改索引为 3 的元素 ['a', 1, 'c', 3]-
根据下标添加和修改
var arr = ['Asa','Taylor'];
arr[2] = 'Tom';
arr[3] = 'Jack';
console.log(arr); -
delete关键字只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // 输出结果：(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1]; // 删除数组中第2个元素
console.log(stu); // 输出结果：(3) ["Tom", empty, "Lucy"]1.4 数组长度
每个数组都有一个 length 属性，length 属性值代表数组中元素的个数。
var empty = []; // 数组没有元素
var letters = ['a', 'b', 'c', 'd']; // 数组有 5 个元素
var arr = ['a', , , , 'b', 'c'];
console.log(empty.length); // 0
console.log(letters.length); // 5
console.log(arr.length); // 6
-
修改数组长度
-
大于数组长度
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 arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3;
console.log(arr4); // 输出结果：(3) ["hehe", "xixi", "gugu"]1.5 数组遍历数组
在创建完数组后，如何遍历数组中的元素，对其进行操作呢？ 一维数组可以利用for、forEach、for…of进行遍历,目前先介绍for,之后我们再学习其他.
-
使用 for 循环遍历数组
var heroes = ['刘邦', '张良', '韩信', '萧何','刘备']; var len = heroes.length; for (var i = 0; i < len; i++) { console.log(heroes[i]) }
1.6 二维数组
-
数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。
-
解决开始提出的问题：保存一个班级学生信息，每个数组元素都代表一个学生，而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息，这样通过一个变量即可有规律的保存一个班级的所有学生信息，方便开发时进行处理。 二维数组：是指数组元素的“值”是一个一维数组，如下图。
-
创建
// 使用“[]”创建数组
var num = [[1, 3], [2, 4]];
var empty = [[], []]; // 空二维数组
// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr = new Array(new Array, new Array);// 空二维数组
-
二维数组遍历
二维数组只需在遍历数组后，再次遍历数组的元素即可。
var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9, 0]]; // 遍历外层 for (var i = 0; i < arr.length; i++) { // console.log(arr[i]); // 遍历里层 for (var j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } }
1.7 数组排序(重点)
1.7.1 最大值和最小值
if (arr[i] > max) { // 当前元素比最大值max大，则修改最大值
max = arr[i];
}
if (arr[i] < min) { // 当前元素比最小值min小，则修改最小值
min = arr[i];
}
1.7.2 冒泡排序
实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，将值大的元素或最小的元素交换至右端。
1. 算法步骤
比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
2. 动图演示
var arr = [10, 2, 5, 27, 98, 31];
console.log('待排序数组：' + arr);
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]) { // 比较相邻的两个元素
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];//解构交换
}
}
}
console.log('排序后的数组：' + arr);
//两个变量值的交换---》面试题
var temp=null; //定义一个第三方的变量
temp=num1 //temp=10
num1=num2 //num1=100
num2=temp //num2=10
1.7.3 选择排序
1. 算法步骤
首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。
再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
重复第二步，直到所有元素均排序完毕。
2. 动图演示
//选择排序
var arr= [10, 2, 5, 27, 98, 31];
var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
minIndex = i;
for (var j = i + 1; j < len; j++) {
if (arr[j] < arr[minIndex]) { // 寻找最小的数
minIndex = j; // 将最小数的索引保存
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
console.log('排序后的数组:'+arr);
2.数组操作方法(重点)
学习数组的方法要关注以下3个重点:
-
方法参数
-
返回值
-
改变不改变原数组
2.1 栈方法和队列方法
2.1.1 push()
| push() | |
|---|---|
| 功能描述 | 将一个或多个元素添加到数组的末尾。 |
| 语法 | arr.push(element1, ..., elementN) |
| 参数 | 被添加到数组末尾的元素。 |
| 返回值 | 返回数组的新长度。 |
| 改不改变原数组 | 改变原数组 |
2.1.2 pop()
| pop() | |
|---|---|
| 功能描述 | 从数组的末尾删除一个元素。 |
| 语法 | arr.pop() |
| 参数 | 无 |
| 返回值 | 返回数组中删除的元素,若是空数组则返回undefined。 |
| 改不改变原数组 | 改变原数组 |
2.1.3 unshift()
| unshift() | |
|---|---|
| 功能描述 | 将一个或多个元素添加到数组的开头。 |
| 语法 | arr.unshift(element1, ..., elementN) |
| 参数 | 要添加到数组开头的元素或多个元素。 |
| 返回值 | 返回数组的新长度。 |
| 改不改变原数组 | 改变原数组 |
2.1.4 shift()
| shift() | |
|---|---|
| 功能描述 | 从数组的开头删除一个元素。 |
| 语法 | arr.shift() |
| 参数 | 无 |
| 返回值 | 返回数组中删除的元素,若是空数组则返回undefined。 |
| 改不改变原数组 | 改变原数组 |
-
栈结构特点:先进后出 push(),pop();
-
队列结构特点:先进先出 unshift(),shift();
2.2 检索方法
2.2.1 includes()
| includes() | |
|---|---|
| 功能描述 | 用于确定数组中是否含有某个元素。 |
| 语法 | array.includes(item, [start]) |
| 参数 | item是查找的元素,start可选，规定在数组中开始检索的位置（包含本身的位置）。 |
| 返回值 | true或false。 |
| 改不改变原数组 | 不改变原数组 |
不同参数情况分析:
-
如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。
-
如果 array.length + start为负值，则整个数组都会被搜索。
-
如果start大于等于数组长度 ，则返回 false 。该数组不会被搜索。
2.2.2 indexOf()
| indexOf() | |
|---|---|
| 功能描述 | 检测当前值在数组中第一次出现的位置索引。 |
| 语法 | indexOf(item,[start]) |
| 参数 | item是查找的元素,start可选，规定在数组中开始检索的位置（包含本身的位置）。 |
| 返回值 | 返回值是在数组中可以找到给定值的第一个索引，如果不存在，则返回-1。 |
| 改不改变原数组 | 不改变原数组 |
不同参数情况分析:
-
如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。
-
如果 array.length + start为负值，则整个数组都会被搜索。
-
如果start大于等于数组长度 ，则返回-1 。该数组不会被搜索。
2.2.3 lastIndexOf()
| lastIndexOf() | |
|---|---|
| 功能描述 | 检测当前值在数组中最后一次出现的位置索引，从数组的后面向前查找，从 start处开始。 |
| 语法 | lastIndexOf(item,[start]) |
| 参数 | item是查找的元素,start可选,规定在数组中开始检索的位置（包含本身的位置）。 |
| 返回值 | 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。 |
| 改不改变原数组 | 不改变原数组 |
不同参数情况分析:
-
如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。
-
如果 array.length + start为负值，则该数组不会被搜索,则返回 -1。
-
如果start大于等于数组长度 ，则整个数组都会被搜索。
2.3 数组转字符串
2.3.1 join()
| join() | |
|---|---|
| 功能描述 | 将数组的所有元素连接到一个字符串中。 |
| 语法 | arr.join([separator]) |
| 参数 | 指定一个字符串来分隔数组的每个元素。 如果缺省该值，数组元素用逗号（,）分隔。 如果separator是空字符串 ("")，则所有元素之间都没有任何字符。 |
| 返回值 | 一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串。 |
| 改不改变原数组 | 不改变原数组 |
2.3.2 toString()
| toString() | |
|---|---|
| 功能描述 | 返回包含所有数组值的字符串，以逗号分隔。 |
| 语法 | arr.toString() |
| 参数 | 无 |
| 返回值 | 一个表示指定的数组及其元素的字符串。 |
| 改不改变原数组 | 不改变原数组 |
注意:
-
join()和toString()方法的相同点:
可将多维数组转为字符串，默认情况下使用逗号连接。 当数组元素为undefined、null或空数组时，数组会被转换为空字符串
-
join()和toString()方法的不同点:
join()方法可以指定连接数组元素的符号。
2.4 其他方法
2.4.1 Array.isArray()
| Array.isArray() | |
|---|---|
| 功能描述 | 用于确定传递的值是否是一个数组。 |
| 语法 | Array.isArray(obj) |
| 参数 | 需要检测的值 |
| 返回值 | 如果值是 Array，则为 true；否则为 false。 |
| 改不改变原数组 | 不改变原数组 |
2.4.2 splice()(重点)
| splice() | |
|---|---|
| 功能描述 | 通过删除或者替换(修改)现有元素或者原地添加新的元素来修改数组。 |
| 语法 | array.splice(index[, deleteCount[, item1[, item2[, ...]]]]) |
| 参数 | index:必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 deleteCount:表示要移除的数组元素的个数。 item1, item2, ...:要添加进数组的元素。 |
| 返回值 | 以数组形式返回被修改的内容。 |
| 改不改变原数组 | 改变原数组 |
不同参数情况分析:
对数组进行增删改
-
增加：arr.splice(index, 0, item)
-
从索引index开始， deleteCount(可选):0
-
把item或者更多的内容插入到索引index的前面
-
返回值:返回空数组
-
-
修改： arr.splice(index, x, item)
-
从索引index开始,删除x个元素， item替换删除的部分
-
把原有内容删除掉， 然后用新内容替换掉
-
返回值:修改掉原有内容的数组
-
-
删除：arr.splice(index,x)
-
从索引index开始,删除x个元素
-
（如果第二个参数省略， 则从index删除到末尾）
-
返回值:删除掉原有内容的数组
-
//增加
var ary1 = [33,44,55,66,77,88];
ary1.splice(2,0,'a','b')
console.log(ary1);// [33, 44, "a", "b", 55, 66, 77, 88]
//修改
var ary2 = [33,44,55,66,77,88];
ary2.splice(1,2,'x','y')
console.log(ary2);// [33, "x", "y", 66, 77, 88]
//删除
var ary3 = [33,44,55,66,77,88];
//console.log(ary3.splice(3,2))//[66, 77]
console.log(ary3.splice(3));//[66, 77, 88]
console.log(ary3.splice(0));//[33,44,55,66,77,88]
2.4.3 slice()
| slice() | |
|---|---|
| 功能描述 | 复制原数组的部分内容。 |
| 语法 | array.slice(start, end) |
| 参数 | start:可选。规定从何处开始选取。 如果是负数，那么它规定从数组尾部开始算起的位置。 也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。如果省略 start，则 slice 从索引 0 开始。 end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。(不包含end) |
| 返回值 | 返回一个含有被提取元素的新数组。 |
| 改不改变原数组 | 不改变原数组 |
不同参数情况分析:
array.slice(start, end)，从索引start开始查找到end处（不包含end）
array.slice(start) 第二个参数省略，则一直查找到末尾
array.slice(0)原样输出内容，可以实现数组克隆
array.slice(-start,-end) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项
var ary1 = [1,2,3,4,5,6,7,8,9];
//console.log(ary1.slice(2,8));//从索引2开始查找到索引为8的内容，结果为[3, 4, 5, 6, 7, 8]
//console.log(ary1.slice(0));
console.log(ary1.slice(-2,-1));//[8]
2.4.5 reverse()
| reverse() | |
|---|---|
| 功能描述 | 数组中元素的位置颠倒，并返回该数组。 |
| 语法 | arr.reverse() |
| 参数 | 无 |
| 返回值 | 颠倒后的数组。 |
| 改不改变原数组 | 改变原数组 |
var ary1 = [6,8,10,12];
console.log(ary1.reverse());//[12, 10, 8, 6]
2.4.6 concat()
| concat() | |
|---|---|
| 功能描述 | 用于连接两个或多个数组。 |
| 语法 | concat(value1[, value2[, ...[, valueN]]]) |
| 参数 | value可选,参数可以是具体的值，也可以是数组对象。可以是任意多个 |
| 返回值 | 返回连接后的新数组。 |
| 改不改变原数组 | 不改变原数组 |
var ary1 = ['你'];
var ary2 = ary1.concat('好');
console.log(ary2);//["你", "好"]
2.5 清空数组（内容）
// 方式1 推荐
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
arr.splice(0);
2.6 数组方法总结
| 改变原数组方法 | |
|---|---|
| arr.push() | 将一个或多个元素添加到数组的末尾。 |
| arr.pop() | 从数组的末尾删除一个元素。 |
| arr.unshift() | 将一个或多个元素添加到数组的开头。 |
| arr.shift() | 从数组的开头删除一个元素。 |
| arr.splice() | 通过删除或者替换现有元素或者原地添加新的元素来修改数组。 |
| arr.reverse() | 数组中元素的位置颠倒，并返回该数组。 |
| 不改变原数组方法 | |
|---|---|
| arr.includes() | 用于确定数组中是否含有某个元素。 |
| arr.indexOf() | 检测当前值在数组中第一次出现的位置索引。 |
| arr.lastIndexOf() | 检测当前值在数组中最后一次出现的位置索引，从数组的后面向前查找，从 start处开始。 |
| arr.join() | 将数组的所有元素连接到一个字符串中。 |
| arr.toString() | 返回包含所有数组值的字符串，以逗号分隔。 |
| arr.slice() | 复制原数组的部分内容。 |
| arr.concat() | 用于连接两个或多个数组。 |
*我可以
常用的操作数组的方法有哪些，请分别介绍它的功能。
标签：03,arr,元素,console,log,JavaScript,数组,var From： https://blog.csdn.net/weixin_55702682/article/details/137104213