JS数组的方法众多,平时在使用的时候,容易忘记某些不常用的数组方法,而且时长把两个差不多的方法搞混。而且ES6在ES5的基础上又新增了一些方法,为了方便记忆,就写篇博客方便记忆,没事的时候拿出来看看。
数组方法:
方法 | 用法 | 是否改变原有数组 |
push | 在最后一位新增一个或多个数据,返回数组的长度 | y |
pop | 删除最后一位,并返回删除的数据 | y |
unshift | 在第一位新增一个或多个数据,返回数组的长度 | y |
shift | 删除第一位,并返回删除的数据 | y |
join | 使用分隔符,将数组转为字符串并返回 | n |
toString | 直接转为字符串,并返回 | n |
slice | 摘取指定位置的数组,并返回截取的数组。 | n |
spclice | 删除指定位置项,并替换,返回删除的数据 | y |
sort | 排序(字符规则),返回结果 | y |
reverse | 反转数组 | y |
valueOf | 返回对象数组的原始值 | n |
indexOf | 查询并返回数组的索引 | n |
lastIndexOf | 从尾部开始查询并返回数据的索引 | n |
forEach | 参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self。无返回值 | n |
map | 同forEach,同时回电函数返回布尔值,组成新数组由map返回 | n |
filter | 同forEach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回 | n |
every | 同forEach,同时回调函数返回布尔值,全部为true,由every返回true | n |
some | 同forEach,同时回调函数返回布尔值,只要由一个为true,由some返回true | n |
reduce | 归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduce返回 | n |
reduceRight | 反向归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduceRight返回 | n |
1.push()
用法:在数组的最后一位添加数据,同时返回插入后的数组长度。
var arr = [9,2,3,4,5];
var a = arr.push(8);
// 返回数组长度
console.log(a);
console.log(arr);
结果为: 6
9 2 3 4 5 8
2.pop
用法:删除最后一位,并返回删除的数据
var arr = [9,2,3,4,5];
var a1 = arr.pop();
// 返回数组最后一个数
console.log(a1)
console.log(arr)
结果为: 5
9 2 3 4
3.unshift
用法:在第一位新增数据,返回操作后的数组长度
var arr = [9,2,3,4,5];
var c = arr.unshift(3);
// 返回数组的长度
console.log(c)
console.log(arr);
结果为:6
6 9 2 3 4 5
4.shift
用法:删除第一位,并返回删除的数据
var arr = [9,2,3,4,5];
var b = arr.shift();
// 返回数组的第一个数
console.log(b);
console.log(arr)
5.join
用法:使用分隔符,将数组转为字符串并返回
var arr = [9,2,3,4,5];
var str = arr.join( " ," );
console.log(str);
console.log(arr);
结果:9,2,3,4,5
9 2 3 4 5
6.toString
用法:
var arr = [9,2,3,4,5];
document.write(arr.toString());
结果为:9,2,3,4,5
7.slice
var arr = [9,2,3,4,5];
8.splice
用法:删除指定位置,并替换,返回删除的数据
var arr = [9,2,3,4,5];
var d = arr.splice(2,2,10,24);
// splice() 方法返回一个包含已删除项的数组:
console.log(d);
console.log(arr);
结果为:3,4
9,2,10,24,5
9.sort
用法:对数组中的元素进行排序,默认是升序,按照字符顺序进行排序。
var arr = [9,2,3,4,5];
console.log(arr.sort());
console.log(arr);
结果为 [2,3,4,5,9 ]
[2,3,4,5,9 ]
但是在排序前,会先调用数组的toString方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。
var arr = [91,23,43,54,115];
console.log(arr.sort());
console.log(arr);
结果为:[115,23,43,54,91]
[115,23,43,54,91]
如果需要按照数值排序,需要传参.
var arr = [91,23,43,54,115];
console.log(arr.sort(fn));
console.log(arr);
function fn(a,b){
return a-b //如果为b-a,则按降序进行排序。
}
结果为:[ 23,43,54,91,115 ]
[ 23,43,54,91,115 ]
10.reverse
用法:反转数组
var arr = [9,2,3,4,5];
console.log(arr.reverse());
结果为:[5,4,3,2,9]
11.valueOf
用法:返回数组对象的原始值
valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。
12.indexOf
用法:查询并返回数据的索引
var arr = [9,2,3,4,5];
console.log(arr.indexOf(4));
结果为:3
13.lastindexOf
用法:反向查询并返回数据的索引
var arr = [9,2,3,4,5];
console.log(arr.lastIndextOf(3));
结果为:2
14.forEach
用法:参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self;forEach没有返回值
var arr = [9,2,3,4,5];
var a= arr.forEach(function(value,index,self){
console.log(value +“,”+ index+“,” + self);
})
结果为:9,0, 9,2,3,4,5
2,1, 9,2,3,4,5
3,2, 9,2,3,4,5
4,3, 9,2,3,4,5
5,4, 9,2,3,4,5
15.map
用法:同forEach,同forEach,同时回调函数返回数据,组成新数组由map返回
var arr = [9,2,3,4,5];
var a = arr.map(function( value,index,self ){
return 2 + value;
})
console.log(a)
结果为: 11
4
5
6
7
16.filter
用法:同forEach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回
var arr = [9,2,3,4,5];
var a = arr.filter(function(value,index,0){
return value>4;
})
console.log(a);
结果为:[ 9,5 ]
17.some
用法:同forEach(),判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
var arr = [9,2,3,4,5];
var a = arr.some(function(value,index,self){
return value>4
})
console.log(a)
结果为:[9,2,3,4,5]
18.every
用法:同forEach(),判断数组中是否存在满足条件的项,只有所有项满足条件,才会返回true。
var arr = [9,2,3,4,5];
var a = arr.some(function(value,index,self){
return value>4
})
console.log(a)
结果为:[]
19.reduce
用法: 从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。接受四个参数,分别为 total, currentValue, currentIndex, arr。reduce() 对于空数组是不会执行回调函数的。
var numbers = [15.5, 2.3, 1.1, 4.7]; function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
结果为:24
20.reduceRight
用法:同reduce。但索引方向与reduce相反。
var numbers = [2, 45, 30, 100];
function getSum(total, num) {
return total - num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
结果为:23