数组【非常重点】
1.数组基本介绍
数组(Array):
- 数组也是一个对象
- 它和我们普通对象功能类似,也是用来存储一些值的
- 不同的是普通对象是使用字符串作为属性名的,而数组是使用数字作为索引操作元素
- 索引:
- 从
0
开始的整数就是索引- 数组存储性能比普通对象高,在开发中我们经常使用数组来存储一些数据
2.数组基本操作
A.创建数组对象
B.添加元素
C.查询指定索引元素值
D.修改指定索引值
E.数组中length
属性
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组入门</title>
</head>
<body>
<script type="text/javascript">
/**
* 1.数组对象的创建
*/
var arr = new Array();
// 使用typeof检查一个数组时,会返回Object
console.log(typeof arr);
/**
* 2.向数组中添加元素
* 语法是:数组[索引] = 值;
*/
arr[0] = "海康";
arr[1] = "南宁";
arr[2] = "西安";
/**
* 3.查询指定索引的值
* 语法:arr[索引值]
*/
console.log(arr[1]);
/**
* 4.修改指定索引的值
* 语法:arr[索引值] = 值;
*/
arr[2] = "杭州";
/**
* 5.数组对象中length属性
* length属性可以获取一个数组长度
* 可以设置一个数组长度
*/
console.log(arr.length);
</script>
</body>
</html>
3.使用字面量创建数组
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>创建数组方式</title>
</head>
<body>
<script type="text/javascript">
// 1.创建数组方式一:
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
// 2.创建数组方式二:使用字面量方式【一般使用这种方式】
var arr2 = [1,2,3,5,6];
// 3.创建数组方式三:了解【也可以同时添加元素,将要添加的元素作文构造函数的参数传递】
var arr3 = new Array(1,2,3,5);
// 注意是:可以使用 `new Array(10);`的方式创建数组,只传入一个值时,表示创建一个数组长度为`10`的数组
// 注意是:数组可以存放任意的数据类型
</script>
</body>
</html>
数组常用方法:
4.数组的四个方法
方法 | 描述 |
---|---|
push() | 向数组的未尾添加一个或多个元素,并返回新的数组长度 |
pop() | 删除并返回数组的最后一个元素 |
unshift() | 向数组的开头添加一个或多个元素,并返回新的数组长度 |
shift() | 删除并返回数组的第一个元素 |
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组四个增删方法</title>
</head>
<body>
<script type="text/javascript">
var arr = ["海康","湛江"];
// 第一个方法:push()
// 向数组的未尾添加一个或多个元素,并返回数组最新的长度
result1 = arr.push("1");// 返回最新的长度是:3
result2 = arr.push("2","3");// 返回最新的长度是:5
console.log(result1);
console.log(result2);
// 第二个方法:pop()
// 删除数组中的最后一个元素,并返回删除的元素
var pop1 = arr.pop();// 返回是:3
var pop2 = arr.pop();// 返回是:2
console.log(pop1)
console.log(pop2)
// 第三个方法:unshift()
// 向数组开头添加一个或多个元素,并返回数组的最新长度
var unshift1 = arr.unshift("VUE");// 返回是:数组最新长度 4
var unshift2 = arr.unshift("SpringBoot","StringCloud");// 返回是:数组最新长度 6
console.log(unshift1)
console.log(unshift2)
// 第四个方法:shift()
// 删除数组开头的第一个元素,并返回删除的元素
var shift = arr.shift();// 返回是:SpringBoot
console.log(shift)
</script>
</body>
</html>
5.数组的遍历【重点】
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组遍历</title>
</head>
<body>
<script type="text/javascript">
/**
* 数组的遍历
*/
var arr = ["海康","湛江","南宁","西安","西藏"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
</body>
</html>
6.数组遍历练习
/*
* 创建一个函数,可以将perArr中的满18岁的Person提取出来,
* 然后封装到一个新的数组中并返回
* arr
* 形参,要提取信息的数组
*/
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组遍历练习</title>
</head>
<body>
<script type="text/javascript">
/*
* 创建一个函数,可以将perArr中的满18岁的Person提取出来,
* 然后封装到一个新的数组中并返回
* arr
* 形参,要提取信息的数组
*/
// 第一步:定义Person构造函数
function Person(name,age,sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 第二步:创建Person对象
var per1 = new Person("海康",21,"男");
var per2 = new Person("南宁",21,"女");
var per3 = new Person("西安",16,"男");
var per4 = new Person("西藏",21,"女");
// 第三步:创建数组,并且向数组中添加Person对象
var arr = [per1,per2,per3,per4];
// 第四步:遍历数组,将满18岁Person对象封装到新的数组中
var perArr = new Array();
for (let i = 0; i < arr.length; i++) {
if (arr[i].age>=18){
perArr[i] = arr[i];
}
}
// 第五步:打印新的数组
console.log(perArr);
</script>
</body>
</html>
7.数组中forEach()
方法
forEach()
- 这个方法只支持
IE8
以上的浏览器,所以需要使用该方法时,还需要考虑浏览器的兼容性问题
forEach(vaule , index , array)
方法的语法:
- 该方法需要一个函数作为参数,这种函数不需要我们调用,被称为回调函数
- 该方法有三个参数:
- 第一个参数,就是当前正在遍历的元素
- 第二个参数,就是当前正在遍历的元素的索引
- 第三个参数,就是正在遍历的数组对象
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组中的forEach方法</title>
</head>
<body>
<script type="text/javascript">
// 第一步:定义一个数组
var arr = ["海康","湛江","南宁","西安","西藏"];
// 第二步:调用数组中的`forEach`方法,该方法需要传入一个回调函数
/**
* 该方法的回调函数中有三个参数:
* value:遍历数组的元素
* index:遍历数组的元素的索引
* array:遍历数组的对象
*/
arr.forEach(function (value, index, array) {
console.log(value);
})
</script>
</body>
</html>
8.数组slice()
和splice()
方法
slice()
方法
- 可以用来从数组提取指定元素
- 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
- 参数:
- 截取开始的位置的索引,包含开始索引
- 截取结束的位置的索引,不包含结束索引
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
- 倒数第一个
- 倒数第二个
/**
* slice()方法
*/
var arr = ["海康","湛江","南宁","西安","西藏"];
var result = arr.slice(0,3);//包含开始的索引,不包含结束的索引
console.log("result = "+result);
splice()
方法、
- 可以用于删除数组中的指定元素
- 使用
splice()
会影响到原数组,会将指定元素从原数组中删除,并将删除的元素作为返回值返回- 参数:
- 第一个:表示开始位置的索引
- 第二个:表示删除的数量
- 第三个:可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
/**
* splice()方法
*/
var arr = ["海康","湛江","南宁","西安","西藏"];
var result2 = arr.splice(4,2);// 第一个参数是:表示是索引位置,第二个参数是:删除元素的个数
var result3 = arr.splice(4,2,"66","68","168","88");//第三个参数及后面的参数表示是,删除前面的元素后,并且将第三个参数及第三个参数的元素添加到数组中并返回
console.log(arr);
console.log(result2)
console.log(result3)
9.数组中concat()
方法
concat()
方法是用于连接两个或多个数组,或者将传入的元素进行连接,并将新的数组返回
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组concat方法</title>
</head>
<body>
<script type="text/javascript">
var arr1 = ["汇康","海康","湛江"];
var arr2 = ["西藏","南宁","西京"];
var result = arr1.concat(arr2,"北京","杭州");
console.log(result);
</script>
</body>
</html>
10.数组中join()
方法
join()
该方法可以将数组转换为一个字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回,join()
还可以传入连接符,在默认情况下是使用,
作为连接符
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组中join方法</title>
</head>
<body>
<script type="text/javascript">
var arr = ["海康","湛江","南宁","西安","西藏"];
// 使用join将数组转换成字符串
var result = arr.join("-");//还可以在join方法中,传入一个连接符
console.log(result);
</script>
</body>
</html>
11.数组中sort()
方法
sort()
方法
- 可以用来对数组中元素进行排序
- 也会影响原数组,默认会使用
Unicode
编码进行排序注意是:比较是数字的数组,使用
sort()
方法进行排序时,也会按照Unicode
编码排序,所以对数字进行排序时,可以会得到错误的结果。所以在对于纯数字的数组进行排序时,需要在
sort()
方法中传入一个回调函数,指定排序的规则
- 如果在回调函数中,返回一个大于
0
的值时,则元素会交换位置- 如果在回调函数中,返回一个小于
0
的值时,则元素不会交换位置- 如果在回调函数中,返回两个值相等时,也不会交换位置
结果:如果需要升序排序,则返回
a-b
如果需要降序排序,则返回
b-a
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>数组中sort()方法</title>
</head>
<body>
<script type="text/javascript">
var arr = [2,12,35,33,168,88,98,23,45,67,66,86,26,168,16888];
/**
* 使用sort()方法,并且指定排序规则
*/
arr.sort(function (a, b){
// if (a>b){
// return 1;
// }else if (a<b){
// return -1;
// }else {
// return 0;
// }
// 上述可以简写成:
// 升序
return a-b;
// 降序
// return b-a;
})
console.log(arr);
</script>
</body>
</html>
12.函数对象的call()
和apply()
方法
call()
和apply()
方法
- 这两个方法都是函数对的方法,需要通过函数对象来调用
- 当对函数调用
call()
和apply()
都会调用函数执行- 在调用
call()
和apply()
可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
call()
方法可以将实参在对象之后依次传递apply()
方法需要将实参封装到一个数组中统一传递
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>函数对象中call和apply方法</title>
</head>
<body>
<script type="text/javascript">
// 定义一个函数
function fun(a,b) {
alert("a+b=" + (a+b));
}
function f() {
alert("f");
}
//
var obj = {
name:"海康",
sayName:function () {
alert(this.name);
}
}
// 使用call方式调用fun()函数
fun.call(obj,1,2);// 当在call方法中传入obj时,this代表就是obj
fun.apply(obj,[1,2]);// 而在apply方法中,第一个参数传入是obj,第二个参数是一个数组
</script>
</body>
</html>
this
在函数对象中的情况:
- 以函数形式调用时,
this
永远都是window
- 以方法的形式调用时,
this
是调用方法的对象- 以构造函数形式调用时,
this
是新创建的那个对象- 使用
call
和apply
调用时,this
是指定的那个对象
13.函数对象中arguments
参数
在调用函数时,浏览器每次都会传递进两个隐含的参数:
- 函数的上下文对象
this
- 封装实参的对象
arguments
arguments
是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度- 在调用函数时,我们所传递的实参都会在
arguments
中保存arguments.length
可以用来获取实参长度- 我们即使不定义形参,也可以通过
arguments
来使用实参- 注意是:在
arguments
对象中有一个callee
属性
- 这个属性对应一个函数对象,就是当前在指向的函数对象
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>arguments</title>
</head>
<body>
<script type="text/javascript">
function fun(a,b) {
console.log(arguments.length);// 返回值是:2,因为传入两个参数
console.log(arguments[0]);
console.log(arguments[1]);
}
fun(1,2);
</script>
</body>
</html>