一、什么是JavaScript数组
JavaScript数组是值的有序集合,每个值叫做一个元素或者元,而每个元素在数组中有一个位置,以数字表示,称为索引或者下标。js的数组是无类型的,数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组,可以如何顺序也可以重复。数组元素的索引不一定要连续,可以有空隙。每个数组都具有一个lengrh属性,length属性就是数组元素的个数。
二、JavaScript数组的创建方式
1、字面量创建
var arr=[1,3,8,6,9];
var arr2=["a","b","c"];
2、构造函数创建
var arr=new Array(4,5,3,6,2,,1);
var arr1=new Array(2,1,3,8,5,4,6);
注意: 如果通过数组的构造函数创建数组,参数仅有1个,且这个参数是正整数,则表示新建 一个具备该正整数长度的空数组,里面有这个长度的若干空元素; 如果是负数或者小数时,报错 ;如果输入的不是数值,是其他类型时,这个数据就会作为该数组的第0个元素,长度为1
var arr1=new Array(5);
console.log(arr1); // 长度为5的空数组
var arr2=new Array(3.5);
console.log(arr2); //报错
var arr3=new Array(“a”);
console.log(arr3[0]); //“a”
补充: 其中长度就是元素的个数, 数组的最大下标(索引)是数组的长度-1(元素个数-1);
var arr1=[3,5,2,3,5,2];
var arr2=[3,5,2,3,5,2];
console.log(arr1[1]); //5
console.log(arr1.length);//8就是数组的长度,也是元素的个数
arr1[4]=2;
arr2[arr.length-1]=2;
arr2[arr.length]=20;//在数组的最尾部添加一个元素20
console.log(arr2); //[3,5,2,3,5,2,20]
var arr=[1,2,3,4,5];
arr2.length=3;//数组的长度是可以被修改
console.log(arr2); // [1,2,3] 即数组变为3个元素
arr1.length–; // 数组长度减一
console.log(arr1); //[3,5,2,3,5] 即数组长度减少了一个
arr1.length=0;// 清空整个数组
console.log(arr1); //[] 清空元素,成为空数组
三、数组的基本方法
1、push()方法
push() 在数组尾部添加一个或者多个元素,并且返回数组的新长度
var arr=[1,2,3,4,5,6,7,8,9,10,11];
用法:arr.push(“a”,“b”);
arr.push(11);//在数组的尾部插入一个新元素
arr.push(11,12,25);//在数组的尾部插入多个新元素
var a=arr.push(6,7,8);//通过添加到尾部元素后返回数组的新长度
console.log(arr); //[1,2,3,4,5,6,7,8,9,10,11,11,11,12,25,6,7,8] 18
2、pop()方法
pop() 删除数组尾部的最后一个元素,并且将这个被删除的元素返回
用法: arr.pop();//pop中没有参数,删除数组的最尾部一个元素
var a=arr.pop();//pop删除数组的最尾部一个元素,并且将被删除的元素返回
var arr=[1,2,3,4,5,6,7,8,9,10,11];
var a=arr.pop();
console.log(arr,a); //[1,2,3,4,5,6,7,8,9,10] 11
补充:
// arr.length–; //等同 速度更快,但是不会返回被删除的元素
// arr.pop(); //速度慢,但是会返回被删除的元素
3、toString()方法
toString()将数组转化为字符串:
var arr = [1, 2, 3, 4, 5];
var str = arr.toString()
console.log(str)// 1,2,3,4,5
4、join()方法
join()也是将数组的每个元素以指定的字符连接形成新字符串返回
将数组合并为字符串返回,默认使用,连接
用法: var str=arr.join()
在这里join的参数是字符串的连接符
// var str=arr.join("|");
““作为连接符,会将数组元素首尾相连成为字符串
var arr=[1,2,3,4,5];
var str=arr.join(”|”)
console.log(str); // 1|2|3|4|5
var str1=arr.join("");
console.log(str1); //12345
5、shift()方法
shift() 删除数组的第一个元素,并且返回被删除的元素
用法:arr.shift();//将数组的第一个元素删除
var arr=[1,2,3,4,5];
var a=arr.shift();//将数组的第一个元素删除,并且返回这个被删除的元素
console.log(arr,a); //[2,3,4,5] 1
6、unshift()方法
unshift()在数组头部添加一个或者多个元素,并且返回数组的新长度
用法: arr.unshift(0);//在数组的头部插入一个新元素
//arr.unshift(-3);//在数组的头部插入一个元素
// arr.unshift(-3,-2,-1,0);//在数组的头部插入多个新元素
var arr=[1,2,3,4,5];
var a=arr.unshift(-3,-2);
console.log(arr,a);//[-3,-2,1,2,3,4,5] 7
7、concat()方法
concat() 数组的合并,合并后会返回一个新数组,原来的两个数组不会变化
用法:
1) 合并两个数组
var arr2=arr.concat(arr1);
2) 数组除了可以合并数组,也可以合并元素,将多个元素与原数组合并,返回新数组
var arr3=arr.concat(1,2,3);
3) concat既可以合并元素,也可以合并数组
var arr4=arr.concat(0,arr1,[“A”,“B”,“C”]);
4) 如果直接使用concat,就可以完成数组的复制功能
var arr5=arr.concat();
var arr=[1,2,3,4,5];
var arr1=[3,4,5];
var arr2=arr.concat(arr1);
console.log(arr2); //[1,2,3,4,5,3,4,5]
var arr3=arr.concat(1,2,3);
console.log(arr3); //[1,2,3,4,5,1,2,3]
var arr4=arr.concat(0,arr1,[“A”,“B”,“C”]);
console.log(arr4); //[1,2,3,4,5,3,4,5,0,“A”,“B”,“C”]
8、sort()方法
sort()用于对数组的元素进行排序
在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort()方法比较的也是字符串,因此会出现以下的这种情况:
var arr = [“a”, “d”, “c”, “b”];
console.log(arr.sort()); // [“a”, “b”, “c”, “d”]
arr1 = [10, 15, 51, 9];
arr1.sort()
console.log(arr1); //[10, 15, 51, 9]
从上面可以看出代码没有按照数值的大小对数字进行排序,是按照字符编码的顺序进行排序,要实现这一点,就必须使用一个排序函数:
var arr=[1,2,6,3,8,4,5];
arr.sort(function(后一项,前一项){})
arr.sort(function(a,b){
// return a-b 从小到大
// return b-a 从大到小
return a-b; //从小到大
})
console.log(arr); //[1,2,3,4,5,6,8]
此方法仅用于数值
当元素为字符串时:
var arr=[“d”,“e”,“b”,“a”,“c”,“h”,“j”,“i”,“k”];
// arr.sort();
arr.sort(function(a,b){
// return a.charCodeAt(0)-b.charCodeAt(0);//从小到大
return b.charCodeAt(0)-a.charCodeAt(0); //从大到小
})
console.log(arr); //[“k”, “j”, “i”, “h”, “e”, “d”, “c”, “b”, “a”]
9、slice()方法
slice() 按指定位置截取复制数组的内容,原数组不会发生改变
用法: arr.slice(从什么位置(下标)开始,到什么位置之前结束)
注意:只能从前向后截取,第二个参数不写,默认截取到尾部,当两个参数都为空或者有一个数字为0时复制数组,两个参数都为0时复制一个空数组,只有一个数值时表示从此数值下截取复制到尾部,数值为负数时表示从倒数位置开始截取
var arr=[1,2,3,4,5,6,7];
var arr1=arr.slice(1,4);
console.log(arr1);//[2,3,4]
// var arr2=arr.slice();//复制数组
//var arr2=arr.slice(0); //复制数组
//var arr2=arr.slice(0,0); //复制一个空数组
var arr3=arr.slice(3);//从第三位截取到尾部复制
console.log(arr3) //[4,5,6,7]
var arr4=arr.slice(-2);//从倒数第二位开始截取到尾部复制
console.log(arr4) //[6.7]
var arr5=arr.slice(-3,-1);//从倒数第三位到倒数第一位复制
console.log(arr5); //[5,6]
10、splice()方法
splice()这个方法可以从指定的位置删除给定数量的元素,并且在这个位置插入需要的元素,并且返回被删除的元素组成的新数组
用法:arr.splice(从什么位置开始,删除多少个元素,要插入的元素);
注意:
1)没有任何参数时,返回一个空数组
2)第一个参数是0,表示从第0位开始,第二个参数删除多少个没有填,意味着删除到尾部,即将所有数据转移到新数组,达到复制数组的功能。
3)从第几位开始可以是负数,从后向前数(倒数),因为没有给要删除的数量,因此删除到尾部
4)从数组的第0位开始,删除1个元素,并且在这个位置插入一个元素 -1,替换
5)将数组中第二位开始替换为多个元素
6)在数组的第二位插入一个元素 -1
var arr=[1,2,3,4,5];
var arr1=arr.splice(); // 无如何参数
console.log(arr1); //返回空数组
var arr2=arr.splice(0);//将所有数据转移到新数组,复制数组
console.log(arr2); //[1,2,3,4,5]
var arr3=arr.splice(0,3);//从第0位开始删除3个元素,返回到新数组
console.log(arr3); //[1,2,3]
var arr4=arr4.splice(-2);//从第几位开始可以是负数,从后向前数(倒数),因为没有给要删除的数量,因此删除到尾部
console.log(arr4);//[4,5]
var arr5=arr.splice(0,1,-1); //从数组的第0位开始,删除1个元素,并且在这个位置插入一个元素 -1,替换
console.log(arr5);//[1]
arr.splice(-1,1,0);//数组的最后一位替换位0
console.log(arr);//[1, 2, 3, 4, 0]
arr.splice(2,2,1,2);//将数组中第二位开始两位元素替换为1,2
console.log(arr);//[1, 2, 1, 2, 5]
arr.splice(2,0,-1,-2,-3,-4); // 在数组的第二位插入一个元素 -1,-2,-3,-4
console.log(arr);//[1, 2, -1, -2, -3, -4, 3, 4, 5]
11、indexOf()方法
indexOf()从数组的开头(位置 0)开始向后查找。
用法:indexOf(要查询得元素,从什么位置开始查询) 位置就是下标
v
var arr=[1,2,3,4,5,6]
var index=arr.indexOf(4); //在数组中从前往后查找元素4,如果查找到,返回该元素所在的下标,如果没有查找到,则返回-1
console.log(index);// 返回下标3
var index1=arr.indexOf(9);
console.log(index1); //-1
注意:当数组中的元素为对象时,地址不同,不能查找
12、 lastIndexOf()方法
lastIndexOf() 从数组的后面开始向前查找
用法: lastIndexOf(查找得元素,从什么位置开始查找)
var arr=[1,3,1,2,3,5,2,3,4,6];
var index=arr.lastIndexOf(3);//在数组中从后往前查找元素3,如果查找到,返回该元素所在的下标,如果没有查找到,则返回-1
console.log(index);//返回下标7
var index1=arr.lastIndexOf(100);
console.log(index1); //-1
13、forEach()方法
forEach()对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。
用法:
arr.forEach(function(数组中的元素,每个元素对应的下标,数组自身){
})
求和:
var arr=[1,2,3,5,6,7,8,9];
var sum=0;
arr.forEach(function(item){ // item表示元素
sum+=item;
})
console.log(sum); //41
注意: 使用forEach可以跳过空元素
//打印元素下标,不包括空元素
var arr=[1,2,3,5,6,7,8,9];
arr.forEach(function(item,index){ //item,index表示元素和下标
console.log(item,index); // 即打印元素和下标 ,不打印空元素
})
//复制数组,不包括空因素
var arr=[2,4,6,8,3,2];
var arr1=[];
arr.forEach(function(item,index){
arr1[index]=item;
})
console.log(arr1); //[2,4,6,8,3,2]
14、map()方法
map()对数组进行遍历循环,这个方法有返回值,会返回一个与原数组长度相等的新数组
用法:
arr.map(function(数组中的元素,每个元素对应的下标,数组自身){
})
返回一个新数组
var arr=[3,5,7,9,1,2,4];
var arr2=arr.map(function(item){ //item表示元素
// 在map中使用return 就是在对应的下标中添加对应的数据
return item+10; //返回item的值
});
console.log(arr2); //[13,1,17,19,11,12,14]
15、some()方法
some()查找数组中是否有满足条件的元素,如果有就返回true,如果没有就返回false
同时遍历数组,如果有一个满足条件的元素,都会直接返回true,不继续向后遍历
用法:
arr.some(function(数组中的元素,每个元素对应的下标,数组自身){
})
var arr=[1,4,6,9,0];
var bool=arr.some(function(item,index,arr){
return item>5;
});
console.log(bool); //true
16、every()方法
every() 判断数组中是否每一个都满足条件,如果有一个不满足条件,直接跳出,否则的话所有都满足时返回为ture
用法:arr.every(function(数组中的元素,每个元素对应的下标,数组自身){
})
var arr=[1,1,4,6,2,7];
var bool=arr.every(function(item,index,arr){
return item>2;
});
console.log(bool); //false
17、filter()方法
filter()是将所有元素进行判断,将满足条件的元素作为一个新的数组返回
用法:arr.filter(function(数组中的元素,每个元素对应的下标,数组自身){
返回 条件
});
案例: 要求是将数组中大于5的返回到一个新数组
首先想到map,但是map只能实现原数组和新数组长度相同
筛选数组中满足条件的结果
var arr=[1,1,4,6,2,7];
var arr1=arr.filter(function(item,index,arr){
return item>5;
});
console.log(arr1); //[67]
18、reduce()方法
reduce()是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:从数组的第1位开始遍历,第0位没有遍历,下标从1开始。其中:刚开始value是数组的第0项,后面每次value都是undefined,如果在函数中使用return 就会将返回值在下次数组的遍历中赋予value
数组.reduce(回调函数(累积值,元素,下标,数组){},初始值)
1)、如果reduce没有设置初始值,累计值是数组的第0位元素,遍历从下标1开始
2)、如果reduce设置了初始值,累积值就是从这个初始值开始,遍历从下标0开始
用法:
arr.reduce(function(数组中的元素,每个元素对应的下标,数组自身){
})
累积相加数组元素求和
//注意: reduce返回的是一个值,就是遍历到最后一次return出来的值
var arr=[10,3,4,7,3,5,8,9];
var sum=arr.reduce(function(value,item){
return value+item;
});
console.log(sum); //49
求和,在基数100的前提下,100就是初始值
var arr=[10,3,4,7,3,5,8,9];
var sum=arr.reduce(function(value,item){
return value+item;
},100);
console.log(sum); //149
19、Array.isArray()方法
Array.isArray() 判断一个对象是不是数组,返回的是布尔值,如果是数组返回true否则返回false
var arr=[1,2,3,4];
var obj={a:1};
var a=1;
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
console.log(Array.isArray(a)); //false