数组方法罗列

上次说到数组的方法时没有具体的说下去，因为所涉及到的篇幅较长，故另开一篇来罗列js的数组方法。首先，先上一张近期整理的脑图：

1.转换方法

这个方法很简单明了，就是把数组的每一项用”，”连接起来转为字符串，看下面例子

1 2 3

var colors = [ 'red', 'green', 'blue']; var colString = colors.toString(); console.info(colString);

2.栈方法

用数组模拟栈的结构来操作，栈的特点就是后进先出，顺带说下数组的常用添加方法也是push()，很重要很常用！
另一个方法是pop()，返回数组的最后一项，具体看下面例子

1 2 3 4 5 6

var colors = []; //或者用new Array()之类的创建方法 colors.push( 'red', 'green'); console.info(colors); //['red','green'] var popColors = colors.pop(); //取得最后一项 console.info(popColors); //'green'

3.队列方法

显而易见，这是模仿队列的数据结构，队列的特性是先进先出，严格按照排队的方式，排在前面的先出来。方法有两个：shift()和unshift()，前者返回数组的第一项，unshift()则类似于push()方法，不同的在于它是把数值添加为数组的第一项，具体看例子

1 2 3 4 5 6

var colors = [ 'red', 'green', 'blue']; var col = colors.shift(); console.info(col); //'red' colors.unshift( 'black'); console.info(colors); //['black','green','blue']

4.重排序方法

原生js定义了两个方法，一个是reverse()，通俗易懂，就是反转数组的排列顺序，如下：

1 2 3

var numArray = [ 1, 2, 3, 4, 5]; numArray.reverse(); console.info(numArray); //[5,4,3,2,1]

另一个也是经常需要用的排序方法sort()，原生的sort()方法从小到大排列，但美中不足的是所谓的从小到大其实是按照字符串的从小到大排列，而并不是通常意义上的数字，如下例子

1 2 3

var numArray = [ 0, 1, 5, 10, 15]; numArray.sort(); console.info(numArray); //[0,1,10,15,5]

为了解决以上问题，sotr()可以接收一个比较函数作为参数，来根据我们的需要进行排序，比较函数接收两个参数，若参数一小于参数二，则返回负数，第一个参数应位于第二个参数之前,即从小到大排列，正确的使用方法如下

1 2 3 4 5 6 7 8 9 10 11 12 13

//定义比较函数 function (v1,v2) { if(v1<v2) { return -1; } else if(v1>v2) { return 1; } else { return 0; } } var testArray = [ 0, 1, 5, 15, 10]; testArray.sort(compare); console.info(testArray); //[0,1,5,10,15]

看得很繁琐我知道，so换个方式，可以这样写

1 2 3 4 5 6 7

//从小到大排列 function minToMax(v1,v2) { return v1-v2; } var testArray = [ 0, 5, 1, 15, 10]; testArray.sort(minToMax); console.info(testArray); //[0,1,5,10,15]

5.操作方法

三个方法，concat()、slice()、splice()
a).拷贝方法concat()，可以接收多个参数，参数可以是数值，也可以是数组，返回的值是数组，调用方法不影响原来的数组，具体看下面例子

1 2 3 4

var colors = [ 'red', 'green', 'blue']; var colors_2 = colors.concat( 'yellow',[ 'black', 'write']); console.info(colors); //['red','green','blue'] console.info(colors_2); //['red','green','blue','yellow','black','write']

b).切割方法slice()，接收一个参数的时候，该参数作为切割的起始位置切割数组并返回一个新的数组；接收两个参数的时候，第一个参数作为切割的起始位置，第二个参数作为切割的结束位置，返回一个新数组

1 2 3 4 5

var colors = [ 'red', 'green', 'blue', 'yellow', 'black', 'write']; var colors_1 = colors.slice( 1); console.info(colors_1); //['green','blue','yellow','black','write'] var colors_2 = colors.slice( 1, 4); console.info(colors_2); //['green','blue','yellow']

c).增删改大法splice()，如标题所示，这个方法可以根据传入的参数来进行插入，删除，替换，堪称强大，具体使用方法如下

删除： 传入两个参数，要删除的第一项数组下标和要删除的数量，返回被删除的所有项，使用一个新的数组包括。

1 2 3 4

var values = [ 1, 2, 3, 4, 5]; var remove = values.splice( 1, 2); console.info(values); //[1,4,5] console.info(remove); //[2,3]

插入： 传入三个参数，分别为起始位置、0、要插入的项，如果要插入多项，则可传入第四、第五等任意多个项

1 2 3

var colors = [ 'red', 'green', 'blue']; colors.splice( 1, 0, 'black'); console.info(colors); //['red','black','green','blue']

替换： 传入三个参数，与插入相同，不同的在于第二个参数’0’换为替换的数量

1 2 3

var colors = [ 'red', 'green', 'blue']; colors.splice( 1, 1, 'black'); console.info(colors); //['red','black','blue']

6.位置方法

通常我们会检验一个数是否是在一个数组中，这时候就需要用到indexOf()与lastIndexOf(),两个方法都接收两个参数，要查找的项与表示查找的起点，当然，也可以只传入查找的项。两个方法的区别在于indexOf()是从头开始查找，lastIndexOf()则是从数组的结尾向前查找。两个方法都返回查找项在数组中的第一个下标，如果查询不到则返回-1，看下例子

1 2 3

var values = [ 1, 2, 3, 4, 5, 4, 3, 2, 1]; console.info(values.indexOf( 2)); //1 console.info(values.lastIndexOf( 2)); //7

7.迭代方法

从ES5开始数组有了5个迭代方法，每个方法都可以接收两个参数，分别是在每一项上运行的函数以及运行该函数的作用域对象（非必须），其中传入的函数也接收三个参数：数组项的值、该项在数组中的位置、数组对象本身

every()：对数组中的每一项运行给定一个函数。如果该函数对每一项都返回true则返回true

1 2 3 4 5 6 7 8 9

var values = [ 1, 2, 3, 4, 5]; var test = values.every( function(item,index,array) { return item> 0; }); console.info(test); //true test = values.every( function(item,index,array) { return item> 2; }); console.info(test); //false

filter()：给数组每一项运行给定函数，返回该函数会返回true的项组成的数组

1 2 3 4 5

var values = [ 1, 2, 3, 4, 5]; var test = values.filter( function(item,index,array) { return item> 2; }); console.info(test); //[3,4,5]

forEach()：对数组中的每一项运行给定函数，没有返回值，作用类似于for循环，比如我要把数组中的所有项相加，一般会用for循环，也可以用forEach

1 2 3 4 5 6

var values = [ 1, 2, 3, 4, 5]; var sum = 0; values.forEach( function(item,index,array) { sum = sum + item; }); console.info(sum); //15

map()：对数组中的每一项运行一个给定函数，返回函数每次调用的结果所形成的一个数组

1 2 3 4 5

var values = [ 1, 2, 3, 4, 5]; var test = values.map( function(item,index,array) { return item+ 2; }); console.info(test); //[3,4,5,6,7]

some()：同之前一样传入一个函数，作用跟every类似，很容易混淆。some()的作用是数组中的任一项返回true，则这个方法返回true

1 2 3 4 5

var values = [ 1, 2, 3, 4, 5]; var test = values.some( function(item,index,array) { return item> 2; }); console.info(test); //true

8.归并方法

写到这里感觉自己太啰嗦了，磨磨蹭蹭到了最后一个方法。归并方法是ES5新增的，分别是reduce()和reduceRight()，作用都是将数组的所有项相加，回顾一下forEach()方法中的例子，更简洁的做法是用这两个归并方法。这两个方法之间的区别在于从第一项开始还是最后一项

1 2 3 4 5

var values = [ 1, 2, 3, 4, 5]; var test = values.reduce( function(prev,cur,index,array) { return prev+cur; }); console.info(test); //15

原文:大专栏  数组方法罗列