一起来用一遍常用的数组方法

前言

数组是js基本语法里重要的一环，是一种特殊的对象类型，由于它结构的特殊(使用数字来作为索引来操作元素),我们在编程中会经常用到它，它跟其他语言的数组不同的是它的每一项可以保存任何类型的数据，而且大小是可以动态调整的。当然他也有很多便捷用户操作的方法，让用户可以更简便的处理数组，这里带大家体验下常用的数组方法！

push和pop，unshift和shirt

首先是push和pop，基本是使用率最高的方法(个人觉得)了，它们的作用是什么呢？

1).push

可以向数组的末尾添加一个或多个元素，并返回数组的新的长度.来个例子你们就都清楚了，如下:

var arr=['a','b']
arr.push('c')//添加一个数据
console.log(arr)
var length=arr.push('d','e')//添加多个数据,再用length接受方法的返回值
console.log(arr,length)

结果如我们所料，添加的数据都在数组末尾，可以添加一个及以上，且返回值为数组目前的长度。

2).pop

可以删除数组的最后一个元素 ,并将被删除的元素作为返回值返回,后面的元素会依次补上位置。有在末尾增加的自然也就有在末尾删除的，pop正是满足我们的要求，让我们看下例子理解下：

var arr=['a','b','c']
var lastItem=arr.pop()//利用pop删除数据,lastItem接受返回值
console.log(arr)
console.log("lastItem的值是:"+lastItem)

结果也如我们所料，删除的是最后一个值，且返回值为删除的那个值。 有了push和pop操作数组末尾的数据，自然而然也应该有方法操作数组开头的元素unshift和shift正是用来满足这个要求

3).unshirt

向数组开头添加一个或多个元素，并返回新的数组长度。只有操作的位置不同，其他的特点和push类似，来个例子熟悉下：

var arr=['a','b']
arr.unshift('c')//添加一个数据
console.log(arr)
var length=arr.unshift('d','e')//添加多个数据,并用length接受返回值
console.log(arr,length)

从例子可以看出添加的数据c,d,e都在数组arr开头，可以添加一个及以上，且返回值为数组目前的长度

4).shirt

可以删除数组的第一个元素，并将被删除的元素作为返回值返回,后面的元素会依次补上位置。也是只有操作的位置不同，在数组的开头，其他特点和pop一致，见如下例子：

var arr=['a','b','c']
var deleteItem=arr.shift()//利用pop删除数据,deleteItem接受返回值
console.log(arr)
console.log("deleteItem的值是:"+deleteItem)

结果也如我们所料，删除的是数组第一个值，且返回值为删除的那个值

遍历数组的常用方法for,forEach以及for...of循环

1).for循环

一种常见的循环语句，而循环语句由循环体及循环的判定条件两部分组成，其表达式为：for（单次表达式;条件表达式;末尾循环体）{中间循环体；}。最为常用的数组遍历方法，借助数组的length属性就可以确定循环次数，如下:

var arr=['a',1,true]
for(var i=0;i<arr.length;i++){
    console.log(arr[i])
}

如控制台打印结果，很便捷的打印出数组元素

2).forEach循环

forEach()方法需要一个回调函数作为参数，回调函数中传递三个参数: 第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组

var arr=['a',1,true]
arr.forEach((item,index,arr)=>{
    console.log("第一个参数:"+item,"第二个参数:"+index,"第三个参数:"+arr)
})

很明显的看出三个参数是我们前文给出的结果分别为当前元素，当前索引，当前数组

3).for...of 循环

ES6创造了一种新的遍历命令for... of循环，原生具备iterator接口的数据可用for of 遍历，很显然数组是满足的。

var arr=['a',1,true]
for(var item of arr){
    console.log(item)
}

这里可以看出for(var item of arr)循环里item是键值。

截取数组的方法splice,slice

我们经常要对数组里的元素进行删改，splice和slice这两个方法可以帮助我们减轻负担

1).splice方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，并且注意会改变原数组。可以接受两个以上的参数：

• 第一个，表示开始位置的索引。
• 第二个，表示删除的数量。
• 第三个及更多，可以传递一些新的元素， 这些元素将会自动插入到开始位置的索引前边。

这个方法是我编程中用的比较多的，因为他的功能强大，一个方法改变参数就可实现增删改三大操作，不信？给个实例让大家瞧瞧他的厉害：

var arr=['a',1,true]
arr.splice(0,1)//最经常用到的效果，实现在某个位置删除几个元素(这里1个)
console.log(arr)

splice的第一个能力，实现数组里元素的删除。

var arr=['a',1,true]
arr.splice(0,1,false)//前两个参数删除索引0位置一个元素,第三个参数在索引0位置一个元素增加了一个参数，实现替换
console.log(arr)

splice的第二个能力，实现数组里元素的替换，这里是单元素，多元素类似。

var arr=['a',1,true]
arr.splice(0,0,false)//第二个个参数表示不删除元素,第一，三个参数在索引0位置一个元素增加了一个参数，实现增加
console.log(arr)

splice的第三个能力，实现数组里元素的增加，这里是单元素，多元素类似。

2).slice方法

可以用来从数组提取指定元素，注意该方法不会改变元素数组， 而是将截取到的元素封装到一个新数组中返回，可以接受两个参数：

• 截取开始的位置的索引
• 截取结束的位置的索引(不写,则默认到最后一个）

索引可以传递负值，如果传递负值， 则从后往前计算。 splice功能强大，但是他不能从数组里截取一段元素出来，而slice可以轻松达到。如下：

var arr=['a',1,true]
var sarr=arr.slice(0,1)
console.log('数组返回值是:'+sarr,'原数组是:'+arr)

可以看到slice确实不会改变原数组，且截取的索引位置是大于等于参数一小于参数二，类似于[参数一，参数二)。

数组的一些特殊方法

1).concat方法

可以连接两个或多个数组，并将新的数组返回，注意该方法不会对原数组产生影响

var arr=['a',1,true]
var arr2=['b',2]
var conArr=arr.concat(arr2)
console.log(conArr)

可以看出concat简单的把两个数组合并在一起。当然合并数组的简单办法不仅仅只有这个，像es6对象的...扩展运算符也可以轻松达到目标，可以自己尝试下。

2).join方法

该方法可以将数组转换为一个字符串，注意该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回。在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符,默认逗号。

var arr=['a',1,true]
var joinArr=arr.join(' ! ')//如果不指定则默认逗号分隔
console.log(joinArr)
console.log('joinArr的数据类型为:'+typeof joinArr)

可以看到数组元素按着给定字符串拼接成一个新的字符串，十分有趣

3).reverse方法

该方法用来反转数组，注意该方法会对原数组产生影响。

var arr=['a',1,true]
var reverseArr=arr.reverse()
console.log(reverseArr)

经常遇到反转数组顺序的，记住这个方法一行搞定。

4).sort方法

可以用来对数组中的元素进行排序(默认Unicode编码)，注意该方法会对原数组产生影响。但其实我们更多用的是自定义的规则，在sort( )添加一个回调函数，来指定排序规则。浏览器会根据回调函数的返回值来决定元素的顺序：

• 如果返回一个大于0的值，则元素会交换位置
• 如果返回一个小于0的值，则元素位置不变
• 如果返回一个0，则认为两个元素相等，也不交换位置

这个经常被用来实现数组排序，如下：

var arr=[1,6,8,3]
arr.sort((a,b)=>{
    return a-b//如果a大于b，则结果大于0需要调换二者位置 ，最终实现数组从小到大排列，如果要实现从大到小，可以利用b-a
})
console.log(arr)

不同的规则也会实现不同的效果，举一反三即可。

小结

1. 了解push，pop和unshift，shift的异同，联合记忆。
2. 掌握splice的力量(增删改),当然也不能小看slice。
3. 把一些特殊方法掌握会节约很多代码，例如反转数组，数组排序，数组转换成字符串，数组合并。