一、改变原数组;
1、push 数组的最后面,添加一个或者多个元素。返回值:返回的是添加元素后数组的长度。
var arr=[0,1,1,2,7]; var len = arr.push(10); console.log(len) ;//6 console.log(arr) ;//[0,1,1,2,7,10]
var arr=[0,1,1,2,7]; arr.push(1,3,3,9); console.log(arr);//[0,1,1,2,7,1,3,3,9];
var arr=[0,1,1,2,7]; arr.push(undefined); console.log(arr);//[0,1,1,2,7,undefined]; arr.push(null); console.log(arr);//[0,1,1,2,7,undefined,null]; arr.push(NaN); console.log(arr);//[0,1,1,2,7,undefined,null,NaN]; arr.push(); console.log(arr);//[0,1,1,2,7,undefined,null,NaN]; arr.push(‘‘); console.log(arr);//[0,1,1,2,7,undefined,null,NaN,‘‘];
2、pop 删除数组的最后一个元素。返回值:返回的是刚才删除的元素。
var arr=[0,1,1,2,7]; var ele = arr.pop();//传不传值都是删除最后一个元素。 console.log(ele) ;//7 console.log(arr);//[0,1,1,2]
3、unshift 在数组的最前面,添加一个或者几个元素。返回值: 返回的是添加元素后数组的长度。
var arr=[0,1,1,2,7]; var len= arr.unshift(9,3,3,9); console.log(len) ;//9 console.log(arr);//[9,3,3,9,0,1,1,2,7]
4、shift 删除数组的第一个元素。 返回值:返回刚被删除的元素。
var arr=[0,1,1,2,7]; var ele= arr.shift();//传不传值都是删除第一个元素。 console.log(ele) ;//0 console.log(arr);//[1,1,2,7]
5、reverse 翻转数组
var arr=[0,1,1,2,7]; arr.reverse(); console.log(arr);//[ 7, 2, 1, 1, 0 ]
6. sort 数组排序
var arr=[13,11,1,3,9,0,2,7]; arr.sort(); //无参数时按照首字符的先后排序 console.log(arr);//[ 0, 1, 11, 13, 2, 3, 7, 9 ] arr.sort(function(a,b){ return a-b //从小到大排序; // 或 return a>b // 或 return a-b>0 }) console.log(arr) ;//[ 0, 1, 2, 3, 7, 9, 11, 13 ]; arr.sort(function(a,b){ return b-a; //从大到小排序; //或 return a<b //或 return b-a>0; }) console.log(arr);// [ 13, 11, 9, 7, 3, 2, 1, 0 ];
7、splice 可以实现添加,删除,替换功能(无返回值)
arr.splice(start,deletedCount) 纯删除 从start下标开始,删除几个 arr.splice(start,deletedCount,item) 替换 从start下标开始,删除几个,并在该位置添加item arr.splice(start,0,item) 纯添加 从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动
var arr=[13,11,1,3,9,0,2,7]; arr.splice(3,0); console.log(arr);//[ 13, 11, 1, 3, 9, 0, 2, 7 ] arr.splice(3,null); console.log(arr); //[ 13, 11, 1, 3, 9, 0, 2, 7 ] arr.splice(3,undefined); console.log(arr);//[ 13, 11, 1, 3, 9, 0, 2, 7 ] arr.splice(3,NaN); console.log(arr);//[ 13, 11, 1, 3, 9, 0, 2, 7 ]
arr.splice(3,1);
console.log(arr);//[ 13, 11, 1, 9, 0, 2, 7 ]
/*arr.splice(3,10);//deletCount过大时会删除start以及之后的所有元素 console.log(arr); //[ 13, 11, 1 ]*/ arr.splice(3,); console.log(arr); //[ 13, 11, 1 ]
二、不改变原数组。
8、slice 截取出来 。 返回值:返回截取出来的字段,放到新的数组中,不改变原数组。
var arr=[13,11,1,3,9,0,2,7]; //arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end /* var newArr = arr.slice(3,6) console.log(newArr);//[3,9,0]*/ /* var newArr = arr.slice(3,50); console.log(newArr);// [ 3, 9, 0, 2, 7 ]*/ /* var newArr = arr.slice(3,null); console.log(newArr);//[];*/ /* var newArr = arr.slice(3,undefined); console.log(newArr); // [ 3, 9, 0, 2, 7 ]*/ /* var newArr = arr.slice(3,); console.log(newArr); //[ 3, 9, 0, 2, 7 ]*/ /* var newArr = arr.slice(3,0); console.log(newArr);//[];*/ //arr.slice(start) ;从start下标开始截取,一直到最后 /* var newArr = arr.slice(3); console.log(newArr);//[ 3, 9, 0, 2, 7 ]*/ //arr.slice( ) ;全部截取 var newArr = arr.slice(); console.log(newArr);//[ 13, 11, 1, 3, 9, 0, 2, 7 ]
9、concat 把两个数组里的元素拼接成一个新的数组 返回值: 返回拼接后的新数组
var arr1 = [1,3,5]; var arr2 = [2,4,6]; /*var arr = arr1.concat(arr2); console.log(arr); //[ 1, 3, 5, 2, 4, 6 ]*/ /*var arr = arr1.concat(null); console.log(arr) //[ 1, 3, 5, null ]*/ /*var arr = arr1.concat(undefined); console.log(arr) //[ 1, 3, 5, undefined ]*/ var arr = arr1.concat(NaN); console.log(arr) //[ 1, 3, 5, NaN ]
10、join 将数组里的元素,通过指定的分隔符,以字符串的形式连接起来 返回值:返回一个新的字符串
var arr = [1,3,5]; var str = arr.join("-") console.log(str) ;//‘1-3-5‘
11、indexOf() 查找元素在数组中第一次出现的位置,元素不存在返回 -1。
var arr = [1,3,5,7,9,5,2]; /*var index = arr.indexOf(5); console.log(index) ;//2*/ var index = arr.indexOf(8); console.log(index) ;//-1
特殊用法:arr.indexOf(ele,fromIndex) 从fromIndex这个下标开始,元素第一次出现的位置
var arr = [1,3,5,7,9,5,2]; var index = arr.indexOf(5,3); console.log(index) ;//5
12、lastIndexOf() 查找元素最后一次在数组中出现的位置,元素不存在返回 -1。
var arr = [1,3,5,7,9,5,2]; /*var index = arr.lastIndexOf(5); console.log(index) ;//5*/ var index = arr.lastIndexOf(8); console.log(index) ;//-1
三、遍历数组
es5 新增遍历数组方法。
13、forEach(匿名函数) 没有返回值。
用法:arr.forEach(function(item,index,array){
// item表示数组中的元素;index表示元素下标;array表示遍历的数组。
})
var arr = [1,3,5,7,9,5,2]; var newArr = arr.forEach(function(item,index,array){ console.log(item+"-"+index); return item*3; }) console.log(newArr) //undefined
14、map() 映射 遍历数组---修改数组--返回新数组(返回值)。
用法和forEach一样。
var arr = [1,3,5,7,9,5,2]; var newArr = arr.map(function(item,index,array){ console.log(item+"-"+index); return item*2 }) console.log(arr);//[1,3,5,7,9,5,2]; console.log(newArr);//[ 2, 6, 10, 14, 18, 10, 4 ]
15、filter() 有返回值, 过滤出符合条件的元素。
var arr = [1,3,5,7,9,5,2]; var res = arr.filter(function(item,index){ return item*3==9; }) console.log(res) //[3]
//过滤布尔值为true的元素 var arr = [1,"",0,false,9,null,‘ ‘,2,undefined,NaN,11,-2,‘g‘]; var res = arr.filter(function(item,index){ return item }) console.log(res) //[ 1, 9, " ", 2, 11, -2, "g" ]
es6新增数组方法
16、some 判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false.
var arr=[ {name:‘王大锤‘,age:‘18‘,work:"IT"}, {name:‘肖鹿‘,age:‘20‘,work:"postgraduate"}, {name:‘格林尼治‘,age:‘33‘}] var res1 = arr.some(function(item){ return item.work; }) console.log(res1) //true var res2 = arr.some(function(item){ return item.sex; }) console.log(res2)//false
17、every 判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
var arr=[ {name:‘王大锤‘,age:‘18‘,work:"IT"}, {name:‘肖鹿‘,age:‘20‘,work:"postgraduate"}, {name:‘格林尼治‘,age:‘33‘}] var res1 = arr.every(function(item){ return item.work; }) console.log(res1) //false var res2 = arr.every(function(item){ return item.age; }) console.log(res2)//true
18、find 找到符合条件的项的下标,并且返回第一个
var arr=[ {name:‘王大锤‘,age:‘18‘,work:"IT"}, {name:‘肖鹿‘,age:‘20‘,work:"postgraduate"}, {name:‘格林尼治‘,age:‘33‘}] var res1 = arr.find(function(item){ return item.work; }) console.log(res1) //{ name: "王大锤", age: "18", work: "IT" }
19、findIndex 返回第一个符合条件的元素的下标。
var arr=[ {name:‘王大锤‘,age:‘18‘,work:"IT"}, {name:‘肖鹿‘,age:‘20‘,work:"postgraduate"}, {name:‘格林尼治‘,age:‘33‘}] var res1 = arr.findIndex(function(item){ return item.work; }) console.log(res1) //0
20、reduce 求和计算 (https://www.jianshu.com/p/e375ba1cfc47)
语法:arr.reduce(callback,initialValue)
var arr = [1,2,3,4,5];
*第一次:pre–>1 next–>2 index–>1
pre+next=1+2=3
*第二次:pre–>3 next–>3 index–>2
pre+next=3+3=6
*第三次:pre–>6 next–>4 index–>3
pre+next=6+4=10
*第四次:pre–>10 next–>5 index–>4
var arr=[1,2,3,4,5] var sum = arr.reduce(function(pre,next,index){ return pre+next;//1+2+3+4+5=15; })//没有设置初始值 console.log(sum)//15
var arr=[1,2,3,4,5] var sum = arr.reduce(function(pre,next,index){ return pre+next;//9+1+2+3+4+5=24; },9)//初始值设为9 console.log(sum)//24
注意:如果空数组用reduce方法会报错,最好设置个init值为0.
var arr=[] var sum = arr.reduce(function(pre,next,index){ return pre+next; })//无初始值 console.log(sum)//TypeError: reduce of empty array with no initial value
var arr=[] var sum = arr.reduce(function(pre,next,index){ return pre+next; },0)//初始值设为0 console.log(sum)//0;
高级用法:
//计算数组中每个元素出现的次数 var arr=[1,2,11,3,2,1,7,9,3] var nameNum = arr.reduce(function(pre,next){ if(next in pre){ pre[next]++ }else{ pre[next] = 1 } return pre },{}) console.log(nameNum)//{1:2,2:2,3:2,7:1,9:1,11:1}
//数组去重 var arr=[1,2,11,3,2,1,7,9,3] var newArr = arr.reduce(function(pre,next){ if(!pre.includes(next)){ return pre.concat(next) }else{ return pre } },[]) console.log(newArr)//[ 1, 2, 11, 3, 7, 9 ]
//二维数组转一维 var arr=[[1,2],[11,3,2],[1,7,9,3]] var newArr = arr.reduce(function(pre,next){ return pre.concat(next) },[]) console.log(newArr)//[ 1, 2, 11, 3, 2, 1, 7, 9, 3 ]
//多维数组转一维 也可以用es6的flat()方法 https://blog.csdn.net/qq_41993503/article/details/102470692,但是高版本浏览器支持,低版本不支持此方法。 var arr=[[1,2],[11,3],[2,[1,7,9,3]]] var newArr = function(arr){ return arr.reduce((pre,next)=>pre.concat(Array.isArray(next)?newArr(next):next),[]) } console.log(newArr(arr))//[ 1, 2, 11, 3, 2, 1, 7, 9, 3 ]
//对象里的属性求和 var result = [ { subject: ‘math‘, score: 10 }, { subject: ‘Chinese‘, score: 20 }, { subject: ‘English‘, score: 30 } ]; var sum = result.reduce(function(pre,next){ return next.score+pre },0) console.log(sum)//60
原文:https://www.cnblogs.com/summer-xiao/p/11994183.html