一、数组(Array)
- 数组也是一个对象
- 它和普通对象的功能类似,也是用来存储一些值。
- 不同的是普通对象是使用字符串来作为属性名的,而数组是使用数字来作为索引操作元素。
- 索引:从0开始的整数
- 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据。
二、创建数组对象
- 使用typeof检查一个数组时,返回object
var arr=new Array();
7. 向数组中添加元素
语法:数组[索引] =值
var arr=new Array();
arr[0]=10;
8. 读取数组中的元素
语法: 数组[索引]
如果读取不存在的索引,返回undefined
9. 获取数组的长度,length
语法:数组.length
(1)对于连续的数组,使用length可以获取数组的长度(元素的个数);
(2) 对于非连续的数组,使用length会获取到数组的最大的索引+1
(3)尽量不要创建非连续的数组
10. 修改length
(1)如果修改length大于原长度,则多出部分会空出来
(2)如果小于原长度,则多出的元素就会被删除。所以可以通过修改length来删除一些元素。
11.向数组的最后一个位置加元素
语法:数组[数组.length]=值
三、数组字面量
1. 使用字面量来创建数组
语法:var arr =[]
2.使用字面量创建数组时,可以在创建时就指定数组中的元素。
var arr=[1,2,3,4,5]//索引为1的值是1....
2. 使用构造函数创建数组时
也可以同时添加元素,将要添加的元素作为构造函数的参数传递,元素之间用逗号隔开。
var arr2=new Array(10,20,30)
3. 创建一个数组,数组中只有一个元素10
var arr=[10]
4. 创建一个长度为10的数组
arr2=new Array(10)
5.数组中的元素可以是任意的数据类型
可以是一个对象
var arr=[10,20]
var obj={name:"小per"};
arr[arr.length]=obj;
console.log(arr);
//输出结果:10,20,{name:"小per"}
console.log(arr[2].name);//小per
也可以是一个函数
arr=[function(){alert(1)}];
数组中也可以放数组,二维数组
arr=[[1,2],[2,3]]
四、数组的方法
1. push()方法
(1)该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度,可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾。
语法:数组.push(“值”,“值”);
(2)该方法会将数组新的长度作为返回值返回。
2. pop()方法
(1)该方法可以删除该数组的最后一个元素,并将删除的元素作为返回值返回。
语法:数组.pop()
3. unshift()方法
(1)向数组的开头添加一个或多个元素,并返回新的数组长度
语法:数组.unshift(“值”)
(2)向前边加入元素之后,其他元素的索引会依次调整
4.shift()方法
(1)可以删除数组的第一个元素,并将被删除的元素作为返回值返回
语法:数组.shift()
5.slice()方法
(1)可以从数组中提取指定元素
(2)该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回。
(3)参数:
1.截取开始的位置的索引,包含开头索引
2.截取结束的位置的索引,不包括结束索引
3.第二个参数可以不写,此时会截取从开始索引往后的所有元素
var arr=["孙悟空","猪八戒","沙和尚","唐僧","白龙马"];
arr.slice(0,2);//截取索引0-2的元素
(4)索引可以传递一个负值,如果传递一个负值,则从后往前计算,-1倒数第一个,-2倒数第二个
6.splice()方法
(1)可以用来删除数组中的指定元素
(2)使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
(3)参数:splice(第一个参数,第二个参数,添加的元素1,添加的元素2)
1.截取开始的位置的索引,包含开头索引
2.删除的数量
第三及以后:可以传递一些新的元素,这些元素将会自动插入到删除开始位置索引的前边
7.concat()方法
(1)concat()可以连接两个或多个数组,并将新的数组返回。还可以传元素
(2)语法:数组1.concat(数组2);
(3)该方法不会对原数组产生影响,是返回的结果是连接起来的数组。
8.join()方法
(1)该方法可以将数组转换成一个字符串
(2)该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回。返回结果的类型是字符串型
(3)在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符。不写则默认连接符的是逗号。
9.reverse()方法
(1)该方法用来反转数组(前边的去后边,后边的去前边)
(2)该方法会直接修改原数组
10.sort()方法
(1)可以对数组的元素进行排序
(2)会影响原数组,默认按照Unicode编码排序。
(3)即使对于纯数字的数组,使用sort()排序时,也会按照unicode编码来排序。所以对数字进行排序时,可能会得到错误的结果。
(4)可以自己指定排序的规则,我们可以在sort()添加一个回调函数,来指定排序规则。
回调函数需要定义两个形参,浏览器会分别使用数组中的元素作为实参去调用回调函数。
使用哪个元素调用不确定,但是肯定是在数组中a一定在b前边
(5)浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于0的值,则元素会交换位置。如果返回小于0的值,则元素位置不变。如果返回一个0,则认为两个元素相等,也不交换位置
(6)如果需要升序排列,则返回a-b,需要降序排列,则返回b-a。
arr[5,4];
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;
})
五、数组的遍历
- 所谓遍历数组,就是将数组中的元素都取出来
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
六、例题
function Person(name,age){
this.name=name;
this.age=age;
}
var per=new Person("孙悟空",18);
var per2=new Person("猪八戒",28);
var per3=new Person("红孩儿",8);
var per4=new Person("蜘蛛精",17);
var per5=new Person("沙和尚",38);
var perArr=[per,per2,per3,per4,per5];
function fun(arr){
//创建一个新数组
var newArr=[];
for(var i=0;i<arr.length;i++){
//判断Person的年龄是否大于等于18
if(arr[i].age>=18){
//将对象放入到新数组中
newArr.push(arr[i]);
}
}
//将新的数组返回
return newArr;
}
var result=fun(perArr);
console.log(result);
var arr=[1,2,3,2,1,3,4,2,5]
//去除数组中重复的数字
for(var i=0;i<arr.length;i++){
//获取当前元素后的所有元素
for(var j=i+1;j<arr.length;j++){
//判断两个元素是否相等
if(arr[i]==arr[j]){
//如果相等则证明出现了重复的元素,则删除j对应的元素
arr.splice(j,1);
//当删除了当前j所在的元素以后,后边的会自动补位
//此时将不会在比较这个元素,需要再比较一次j所在位置的元素
j--;
}
}
}
七、forEach()方法
- 一般我们都是使用for循环去遍历数组,JS中还为我们提供了一个方法,用来遍历数组forEach(),这个方法只支持IE8以上的浏览器。IE8及以下浏览器不支持该方法。
- forEach()方法需要一个函数作为参数。像这种函数,由我们创建但是不由我们调用的,我们称为回调函数。
- 数组中有几个元素就会执行几次,每次执行时,浏览器就会将遍历到的元素以实参的形式传递进来,我们可以定义形参,来读取这些内容。
- 浏览器会在回调函数中传递三个参数:
(1)第一个参数:当前正在遍历的元素value
(2)第二个参数:就是当前正在遍历元素的索引index
(3)第三个参数:正在遍历的数组obj
arr.forEach(function(value,index,obj){
});
八、call和apply方法
1.这两个方法都是函数对象的方法,需要通过函数对象来调用。
2.当对函数调用call()和apply()都会调用函数执行。
3.在调用call和apply可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this。
function(){
alert(this);
}
var obj={};
fun.apply(obj);//{}
var obj={
name:"孙悟空",
sayName:function(){
alert(this.name);
}
};
var obj2={
name:"obj2",
};
obj.sayName.apply(obj2);//参数是谁谁,this就是谁
- call()方法可以将实参在对象之后一次传递。apply()方法需要将实参封装到一个数组中统一传递。
function fun(a,b){
console.log("a="+a);
console.log("b="+b);
}
var obj={
name:"孙悟空",
sayName:function(){
alert(this.name);
}
};
var obj2={
name:"obj2",
};
fun.call(obj,2,3);
fun.call(obj,[2,3]);
九、arguments
- 在调用函数时,浏览器每次都会传递进两个隐含的参数。
函数的上下文对象 this
封装实参的对象 arguments - arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度,在调用函数时,我们所传递的实参都会封装到arguments中保存。
- 检查·arguments是否是一个数组
arguments instanceof Array;//检查arguments是否是Array类的实例
Array.isArray(arguments);
- arguments的length可以用来获取实参的长度。有几个实参,长度就是几
- 即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦。
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参 - arguments有一个callee属性,这个属性对应的是一个当前正在执行的函数对象。