1. join (原数组不受影响)
该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串
const arr=[1,3,4,2,5]console.log(arr.join('-');//1-3-4-2-5
2. push
该方法可以在数组的最后面,添加一个或者多个元素
结构: arr.push(值)
返回值:返回的是添加元素后数组的长度.
const arr=[1,2,3,4,5]console.log(arr.push(8));
控制台打印
![](https://img-blog.csdnimg.cn/img_convert/615f5300dc7ef820708402864e6edee4.png)
3. pop
该方法可以在数组的最后面,删除一个元素
结构: arr.pop()
返回值:返回的是删除的元素.
const arr=[1,2,3,4,5]console.log(arr.pop());
![](https://img-blog.csdnimg.cn/img_convert/87a6a1808282195632bcb42d970cfbbc.png)
4. unshift
该方法可以在数组的最前面,添加一个或者几个元素
结构: arr.unshift(值)
返回值: 返回的是添加元素后数组的长度
const arr=[1,2,3,4,5]console.log(arr.unshift(9));
![](https://img-blog.csdnimg.cn/img_convert/38a7bd4f40509a70b7bc1055f017459f.png)
5. shift
该方法可以在数组的最前面,删除一个元素
结构: arr.shift()
返回值: 返回的是刚才删除的元素.
![](https://img-blog.csdnimg.cn/img_convert/fc4a039fced2154c90a8f5a8febb4156.png)
6. reverse 翻转数组
const arr=[1,2,3,4,5]console.log(arr.reverse());
![](https://img-blog.csdnimg.cn/img_convert/229a6d46bec2a4a27dfdb3add33d954b.png)
8. sort
该方法可以对数组进行排序.
const arr=[1,2,3,4,5]const newArr = arr.sort(function(a,b){// return a-b;//从小到大排序 12345return b-a;//从大到小排序 54321
})
console.log(newArr);
大->小
![](https://img-blog.csdnimg.cn/img_convert/d4eaffc1cc9065db86520f59898d3a02.png)
小到大
![](https://img-blog.csdnimg.cn/img_convert/869797010aee2980cd5b75cba95c60e4.png)
8. concat
该方法可以把两个数组里的元素拼接成一个新的数组
返回值: 返回拼接后的新数组
const arr=[1,2,3,4,5]const newArr = [6,7,8,9,10]
console.log(arr.concat(newArr));
![](https://img-blog.csdnimg.cn/img_convert/358260605ac7522fa530804610e8afb5.png)
9. slice 截取 出来
该方法可以从数组中截取指定的字段,返回出来
返回值:返回截取出来的字段,放到新的数组中,不改变原数组
(1)arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];
(2)arr.slice(start) ;从start下标开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2,3,4,5,6,7];
(3)arr.slice( ) ;全部截取
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [0,1,2,3,4,5,6,7];
10. splice
数组。splice(下标,删除的个数),返回的是删除后的新数组
const arr=[1,2,3,4,5]console.log(arr.splice(1,2));
![](https://img-blog.csdnimg.cn/img_convert/5fcea888a929477e625c3d50d3bddb6b.png)
//查找元素在数组中的位置
12. indexOf
判断数组在元素中的位置,找到了返回该元素的下标,否则返回-1
const arr=[1,2,3,4,5]console.log(arr.indexOf(3));
特殊用法:
(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置
用来判断元素是否存在于数组中!
if (arr.indexOf(ele) === -1){//说明元素不存在!!console.log('元素不存在!)
} else {console.log(' 元素存在! ')
}
13. includes
判断数组中是否存在某个元素,在的话就返回true,否则false
const arr=[1,2,3,4,5]console.log(arr.includes(3));
![](https://img-blog.csdnimg.cn/img_convert/d312574eb4d89cf7bfea3524aa840df4.png)
13. lastIndexOf
该方法用来查找元素最后一次在数组中出现的位置,返回的是最后一次出现的下标
const arr=[1,2,3,4,5,3,4,6,6,7,8]console.log(arr.lastIndexOf(6));
![](https://img-blog.csdnimg.cn/img_convert/c68c20ef0cf3484254bc963490939a9b.png)
ES5新增的遍历数组方法
1. forEach( )
该方法等同于for循环,没有返回值
arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})
2.map( )
映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
3. filter( )
filter方法: 有返回值, 过滤出符合条件的元素
const arr=[1,2,3,4,5,3,4,6,6,7,8]
const newArr = arr.filter((item,index)=>{return item>5
})
console.log(newArr);
![](https://img-blog.csdnimg.cn/img_convert/d8269635f00bf04c1b75adc9f3154394.png)
4. some
判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false
let arr3 = [{ name: "zs", age: 18, done: "notYet" },{ name: "ls", age: 20, done: true },{ name: "ww", age: 22, done: true }
];
let res5 = arr3.some(function(item) {return item.done;
});
console.log(res5);
5. every
判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
let res6 = arr3.every(function(item) {return item.done;
});
console.log(res6);
6. find
找到符合条件的项,并且返回第一项
let arr4 = [{ id: 3, name: "ls", done: false },{ id: 1, name: "zs", done: true },{ id: 2, name: "ww", done: true }
];
// var res7 = arr4.find(function(item) {
// return item.done;
// });
// console.log(res7);
7. findIndex
找到符合条件的项的下标,并且返回满足条件第一个下标
const arr=[1,2,3,4,5,3,4,6,6,7,8]
const newArr = arr.findIndex((item,index)=>{return item>5
})
console.log(newArr);
8.reduce
(1)求和计算
var arr1 = [1,2,3,4,5] ;var new1 = arr1.reduce(function(pre,next,index){return pre+next ;//pre+next=10+5=15})console.log(new1);
(2)扁平化数组
var arr2 = [[1,2,3],[4,5],[6,7]] ;var new2 = arr2.reduce(function(pre,next,index){return pre.concat(next); //前数组拼接后数组 .concat()})console.log(new2);
(3)对象数组叠加计算
var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];var new3 = arr3.reduce(function(pre,next,index){return pre+next.price*next.count;},0) //在原数组第一项添加为0,不改变原数组,则可不操作第一项console.log(new3);