数组方法详解
程序员文章站
2022-08-08 19:22:25
JS数组的方法众多，平时在使用的时候，容易忘记某些不常用的数组方法，而且时长把两个差不多的方法搞混。而且ES6在ES5的基础上又新增了一些方法，为了方便记忆，就写篇博客方便记忆，没事的时候拿出来看看。 数组方法： 1.push（） 用法：在数组的最后一位添加数据，同时返回插入后的数组长度。 var ......
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
}
结果为：[ 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