在javascript中,数组的使用很重要。数组中的方法有很多,返回的值也不尽相同,我这里做了些
简单的分类及其应用。
按照原数组的变化,我分了两大类:
一.原数组变化的
1.push 尾部添加元素
可以添加一个或多个元素,添加数组后,不以元素添加
var arr=[1,2,3]; var arr1=arr.push(4,5,6);
var arr2=arr.push([7,8]) console.log(arr,arr1) // [1,2,3,4,5,6] 6
console.log(arr,arr2) // [1,2,3,[7,8]] 4
//返回数组的新长度
2.unshift 头部添加元素
可以添加一个或多个元素,添加数组后,不以元素添加 (和push的应用一样)
3.pop 尾部删除元素
删除尾部一个元素
var arr=[1,2,3]; var arr1=arr.pop(); console.log(arr,arr1) // [1,2] 3
//返回删除的元素
4.shift 头部删除元素
删除头部一个元素 (和pop的应用一样)
5.splice 添加,删除,替换,清空
可以添加,删除一个或者多个元素,如果添加的是数组,和push一样,都是以数组形式存入,而不是元素。
var arr=[1,2,3]; var arr1=arr.splice(0,2,4,5); //头部添加 var arr2=arr.splice(-1,0,4,5) //尾部添加 var arr3=arr.splice(1,2) //删除 var arr4=arr.splice(0) //清空 一直向后删除 var arr5=arr.splice(1,1,5) //替换
// 返回被删除元素组成的新数组,不删除就返回空数组
6.reverse 变换元素顺序
前后顺序变换
var arr=[1,2,3]; var arr1=arr.reverse(); console.log(arr,arr1) //[3,2,1] [3,2,1]
//返回新数组(排序后)
7.sort 排序
从小到大: a-b>0 ->arr[i]-arr[i+1]>0-->arr[i]>arr[i+1];
从大到小:b-a>0 ->arr[i+1]-arr[i]>0--->arr[i]<arr[i+1];
var arr = [1, 5, 3, 2, 7, 4, 7, 15, 6, , 2, 8, 10, 9]; var arr1=arr.sort(function(a,b){ return a-b; }); var arr2=arr.sort(function(a,b){ return b-a; })
//返回新数组(排序后)
二.原数组不变化的
1.concat 拼接,复制
将当前数组与多个元素或者多个数组连接形成新的数组
3)forEach只能遍历数组,不能返回
var arr=[1,2,3,4]; var arr1=arr.concat(5,6,7); var arr2=arr.concat([5,6,7]); var arr3=arr.concat([5,6,7],[8,9,10]); var arr4=arr.concat(5,6,7.[8,9,10]); console.log(arr,arr1,arr2,arr3,arr4) //[1,2,3,4,5,6,7,8,9,10]
//返回新数组
var arr5=arr.concat(); //复制原数组
2.join 连接数组元素
以某个符号连接数组的元素,形成字符串
var arr=[1,2,3,4,5]; var str=arr.join("#");//以#符号连接数组的元素,形成字符串 1#2#3#4#5 var str=arr.join();//默认使用逗号连接数组元素,形成字符串 1,2,3,4,5 var str=arr.join("");//使用空字符连接将会形成元素紧密连接的字符串 12345
//返回元素连接成的字符串
3.indexOf 查询元素
查找某个元素的下标
var arr=[1,2,3,4,5,6]; var index=arr.indexOf(4); var index=arr.indexOf(7); console.log(index); //如果是-1就是没有找到,正数就是下标
//返回的是下标
if(arr.indexOf(3)>-1){ //大于-1就是找到了,=-1和<-1都是没找到
console.log("找到了")
}
4.forEach 遍历数组(不返回)
1)遍历数组,回调函数中有三个参数,每个元素,下标,原数组 ,forEach本身就是函数
2)遍历一个元素,就执行该函数一次
var arr=[1,2,3]; arr.forEach(function(item,index,array){ console.log(item,index,array) })
//什么也不返回 非要打印返回,会打印undefined出来
5.map 遍历数组(必须返回)
1)遍历数组,并且使用return返回新元素到新数组中
2)新数组的长度与原数组的长度相同,如果没有使用return,就会返回默认的undefined
var arr=[2,3,,4,5,6]; var arr1=arr.map(function(item,index,array){ console.log(item,index,array); // [3,4,5,6,7] return item+1; });
//返回新数组(不管return什么,都是以数组的形式返回)
6.some 遍历和筛选
判断元素中是否有满足回调函数中的条件,如果有就返回true,否则返回false
var arr=[1,2,3,4,5,6]; var arr1=arr.some(function(item,index,array){ console.log(index,item) //遍历 return item>4; }) console.log(arr,arr1) //返回了boolean
//如果满足条件,返回true,不满足false
7.filter 筛选
var arr=[1,2,3,4,5,6]; var arr1=arr.filter(function(item,index,array){ return item%2===0; }) console.log(arr,arr1) //[1,2,3,4,5,6] [2,4,6]
//返回满足条件的元素组成的数组
8.reduce 归并
1)arr.reduce(回调函数(归并值,数组元素,索引值,数组),归并初始值)
2)如果没有给归并初始值,value归并值就是数组的第0项,然后从第一项开始遍历
3)如果给了归并初始值,value就是这个归并初始值,然后从第0项开始遍历
var arr=[1,2,3,4,5,6]; var s=arr.reduce(function(value,item,index,array){ console.log(value,item) return value+item; //可以理解为 value=value+item }) //value没有给初始值,所以数组第0项是value,item从第一项开始
console.log(s) // 21
//返回return出去的数值
9.slice 截取
var arr=[1,2,3,4,5,6];
var arr1=arr.slice(1,3); //截取下标1和2, 包括开头,但不包括结尾 var arr1=arr.slice();//如果没有任何参数就会从头截取到尾部 var arr1=arr.slice(1);//如果第二个参数没有,就会从开始截取到尾部 var arr1=arr.slice(-3,-1);//如果是负数就会从后向前数,然后再截取 将参数转换为正向数值时,前面的必须小于后面 var arr1=arr.slice(-3,5); console.log(arr1,arr);
//返回新数组
这篇随笔只是写了些简单的应用,后面会分享这些方法的封装,以及遍历和去重。