数组方法详解

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