Javascript的内置对象——Array类型二

上一篇我们讲了数组的创建、索引和检测数组，今天我们来看看ECMAScript给我们提供的数组方法。根据数组方法的特性和它们各自的作用，可以将他们分为栈方法、队列方法、排序方法、操作方法、位置方法、迭代方法、归并方法。 下面我们针对每种类型的方法来逐一看看。

栈方法

栈是什么？栈的定义是限定仅在表头进行插入和删除操作的线性表，栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表，它按照先进后出的原则存储数据。ECMAScript为数组专门提供了push()和pop()方法，来实现类似栈的行为。

arr.push(ele1,ele2,...eleN)：可以将一个或多个元素添加至数组的末尾，返回新数组的长度。

var names = ['lucy','Bob','wannianqing'];
console.log(names.push('nacy','moby'));		//返回push之后的数组长度	
console.log(names)			//["lucy", "Bob", "wannianqing", "nacy", "moby"]

通常我们使用push是将一个元素或多个元素追加到一个数组的末尾，除此之外我们可以将push和apply组合起来使用，这样做的结果可以将两个数组合并成一个数组，当然这种合并方式跟concat()方法还是有区别的（concat方法合并会得到一个全新的数组）。下面我们用代码来看下

var arr1 = [1,2,3];
var arr2 = [4,5,6];

//使用concat合并的结果
var arr3 = arr1.concat(arr2);
console.log(arr1);		//[1,2,3]	
console.log(arr2);		//[4,5,6]
console.log(arr3);		//[1,2,3,4,5,6]
//使用push加apply合并的结果  没有新的数组
Array.prototype.push.apply(arr1,arr2);
console.log(arr1)		//[1,2,3,4,5,6]
console.log(arr2)		//[4,5,6]

arr.pop()：从指定数组中删除最后一个元素并返回删除的元素，该方法会改变原数组

var names = ['wan','nian','qing'];

console.log(names.pop())	//qing
console.log(names)		//['wan','nian']

下面我们来试试自己写个函数实现pop的功能，我们利用数组的length属性，通过将数组的length减1，可以删掉数组的最后一个元素。代码如下：

var names = ['wan','nian','qing'];

function mPop(arr){
	var popVal = arr[arr.length-1]
	if(arr.length != 0){
		arr.length = arr.length-1;
	}
	return popVal;
}
console.log(mPop(names))
console.log(names)

队列方法

上面我们看了栈方法，栈方法遵循先进后出的原则。那么自然有与其对用的先进先出的队列方法。ECMAScript给我们提供了shift()方法。

shift()：从指定数组中移除第一个元素，并返回该元素。该方法会改变原数组

var names = ['wan','nian','qing'];

console.log(names.shift());		//wan
console.log(names)			//['nian','qing']

unshift(ele1,ele2,..elen)：从指定数组头部开始添加元素，返回改变后的数组长度

var names = ['wan','nian','qing'];

console.log(names.unshift('wo','shi'))	//数组长度 5
console.log(names)	//["wo", "shi", "wan", "nian", "qing"]

排序方法

数组中存在两个重排序的方法：reverse() 和sort()。

arr.reverse()：将数组的元素的位置颠倒，第一个元素变为最后一个元素，最后一个元素变为第一个元素。

var names = ['wan','nian','qing'];
names.reverse();
console.log(names)  //['qing','nian','wan'];

arr.sort(compareFun)：对数组元素进行排序，compareFun为可选参数，不传参则以默认的字符串Unicode排序。传入排序规则则按照规则排序。

var age = [1,3,5,2,6,8,9,11]


age.sort(function(a,b){
	return a-b;
});
console.log(age)    //由小到大排列

操作方法

在实际开发中，有时候需要我们先对数组进行一些操作后再去使用它。ECMAScript中给我们提供了很多用于操作数组的方法：concat()、slice()、splice()  

slice(begin,end)：从原数组中begin开始到end位置结束（包含begin，不包含end）拷贝，返回一个新数组。该方法不会改变原数组。

var str = ['wo','shi','wan','nian','qing'];
var sliceStr = str.slice(2,5);
console.log(str);		//原数组不变
console.log(sliceStr);	//['wan','nian','qing']

slice还可以将一个类数组对象或者集合转换成一个新数组，使用Array.prototype.slice转换宿主对象

function demo(){
	var similarArr = Array.prototype.slice.call(arguments);
	console.log(similarArr);	// ["wan", "nian", "qing"]
}

demo('wan','nian','qing')

splice(start,deleCount,itemN)：该方法可以删除数组中现有元素或添加新元素至数组中。

参数start代表 要从原数组哪个位置开始

参数deleCount代表 要修改原数组元素的个数

参数itemN代表 新添加元素，可以有是多个元素

var arr =['wan','nian','qing','wo','shi'];
//只给定一个参数 下面表示将从下标为1的位置开始到数组最后一位的元素都删除
console.log(arr.splice(1))    //输出["nian", "qing", "wo", "shi"]
console.log(arr)    //输出["wan"]

var arr =['wan','nian','qing','wo','shi'];
//给定两个参数 下面表示将从下标为1的位置开始到下标为2的位置结束的元素删除
console.log(arr.splice(1,2))		//["nian", "qing"]
console.log(arr)    //["wan", "wo", "shi"]

var arr =['wan','nian','qing','wo','shi'];
//给定多个参数 下面表示将下位为1到下标为2的元素替换成后面添加的元素
console.log(arr.splice(1,2,'qian','duan','kai','fa'))		//返回被修改的元素
console.log(arr)

 

位置方法

indexOf(searchElement,fromIndex)：返回给定元素在数组中第一次出现的位置，如果不存在则返回-1。fromIndex是一个数字类型，为可选参数，代表要从哪个下标开始查找。

lastIndexOf(searchElement,fromIndex)：返回给定元素在数组中最后一次出现的位置，不存在返回-1

迭代方法

every()：该方法返回布尔值，只有当数组中素有元素都通过了指定函数的测试才返回true，数组中有一项元素不符合测试函数则立即返回false。IE9以前浏览器不支持该方法

var arr =[1,3,5,7,9,2,4,6,8];

console.log(arr.every(function(item){
	return item>0
}))

filter()：遍历数组，数组中每一项运行给定函数，返回符合给定函数的项组成的数组。不改变原数组。IE9以前浏览器不支持该方法

var arr =[1,3,5,7,9,2,4,6,8];

console.log(arr.filter(function(item){
	return item>7
}))		//返回大于7的项组成的数组

console.log(arr)	//原数组不变

forEach()：遍历数组，对数组的每个元素执行一次提供的函数。IE9以前浏览器不支持该方法

var arr =[1,3,5,7,9,2,4,6,8];

arr.forEach(function(item,index,array){
	console.log(item,index)
})
//item代表每一项元素  index是每一项的下标位置

some()：对数组中每一项执行给定函数，数组中任意一项返回true，则返回true    

var arr =[1,3,5,7,9,2,4,6,8];

console.log(arr.some(function(item){
	return item>2
}))
//只要有一项大于2 就立即返回true

数组有关的方法暂时列举到这里，下一篇我们详细看下ES6 数组的扩展

参考资料 MDN web技术文档