ECMAScript5 Array新方法小结

ECMAScript5规范给Array引入了不少新的方法,看起来都挺实用,值得熟悉一下,目前在IE9和其他标准浏览器中均以实现,IE8之前的只能用降级了.

有个浏览器对ECMAScript5规范支持情况的总结表格,很不错,感兴趣的朋友可以参考下,点击查看

为了熟悉这几个新方法,我自己也特意总结了下:

"use strict";
		
		function print(s) {
			console.log(s);
		}
		// test array
		var array = [34, 12, 'Andrew', 'Frank', -23, 'American', 54, 'India', 98, 17, 'Jackson'];
		
		// indexOf(searchElement[, startIndex])
		// 通常情况下从数组的第一个元素开始查找
		print( array.indexOf('Andrew') );   // 2
		// 可选参数startIndex，用于指定从数组的第几个索引开始查找
		// startIndex是负值，则是相对于数组末尾的位置
		print( array.indexOf('American', 2) ); // 5
		print( array.indexOf('American', -6) );  // 5
		// 未找到则返回-1
		print( array.indexOf('USA') ); // -1
		
		// lastIndexOf(searchElement[, startIndex])
		// 处理顺序与indexOf相反,从元素的末尾开始查找
		print( array.lastIndexOf('India') );  // 7
		// startIndex指定从某个索引开始往前查找
		print( array.lastIndexOf('Frank', 8) );  // 3
		// startIndex是负值，则是相对于数组末尾的位置
		print( array.lastIndexOf('Frank', -2) );  // 3
		// 未找到则返回-1
		print( array.lastIndexOf('USA') ); // -1
		
		// every(callbackfn[, thisArg])
		// callbackfn: function(value[,index[,array]])
		// 从第一个元素开始,调用callbackfn
		// 只要遇到一次callbackfn调用返回false,那么every方法则返回false.
		// 如果所有callbackfn调用都返回true,那么every方法返回true
		// 如果是空数组返回true
		// 可选参数thisArg用于指定callbackfn中this的值
		var isAllNum = array.every(function(value, index) {
			// normal: window, 'strict mode': undefined
			// print( this ); 
			return typeof value === 'number';
		});
		print( isAllNum ); // false
		
		// some(callbackfn[, thisArg])
		// callbackfn: function(value[,index[,array]])
		// 从第一个元素开始,调用callbackfn
		// 只要遇到一次callbackfn调用返回true,那么every方法则返回true.
		// 如果所有callbackfn调用都返回false,那么every方法返回false
		// 如果是空数组返回false
		// 可选参数thisArg用于指定callbackfn中this的值
		var hasNum = array.some(function(value) {
			return typeof value === 'number';
		});
		print( hasNum ); // true
		
		// forEach(callbackfn[, thisArg])
		// callbackfn: function(value[,index[,array]])
		// 从第一个元素开始,调用callbackfn
		// forEach总是返回undefined,它不会直接修改数组,但是callbackfn可以修改数组内容
		// 可选参数thisArg用于指定callbackfn中this的值
		var collector = {
			numArr: new Array()
		};
		
		array.forEach(function(value, index) {
			if( typeof value === 'number' )
				this.numArr.push(value);
		}, collector);
		
		print(collector.numArr); // all numbers in array
		
		// map(callbackfn[, thisArg])
		// callbackfn: function(value[,index[,array]])
		// map方法通过对每个元素调用callbackfn对数组元素进行转换
		// 并把转换后的值集合起来作为一个新数组返回,新数组长度和原数组一致
		// map方法不会直接修改原数组,但是callbackfn可以修改原数组内容
		// 可选参数thisArg用于指定callbackfn中this的值
		var newArr = array.map(function(value, index, array) {
			var type = typeof value;
			switch(type) {
			    // 改变原数组
				case 'string':
					array[index] = value.toUpperCase();
					break;
				case 'number': 
					array[index] = -value;
			}
			return array[index];
		});
		
		print( array );
		print( newArr );
		
		// filter(callbackfn[, thisArg])
		// callbackfn: function(value[,index[,array]])
		// filter方法总是返回一个包含匹配元素的新数组,
		// 如果没有匹配的元素,那它返回一个空数组
		// 元素是否匹配,取决于调用callbackfn返回true还是false,true表示匹配,false反之
		// filter方法不会直接修改原数组,但是callbackfn可以修改原数组内容
		// 可选参数thisArg用于指定callbackfn中this的值
		var strArr = array.filter(function(value, index) {
			if(typeof value === 'string')
				return value;
		});
		
		print( strArr );
		
		// reduce(callbackfn[, initialValue])
		// callbackfn: function(previousValue, value[,index[,array]])
		// reduce方法实现一个数组元素的累加计算,并返回结果
		// 每次对当前元素的callbackfn调用都将以前一次调用返回的结果作为参数previousValue的值
		// reduce方法不会直接修改原数组,但是callbackfn可以修改原数组内容
		// 可选参数initialValue用于指定首次调用callbackfn时参数previousValue的值
		// 如果未指定initialValue,那么数组的第一个元素将作为previousValue的值,并且callbackfn不会在该元素上被调用
		var sum = array.filter(function(value, index) {  
			if(typeof value === 'number')
				return value;
		}).reduce(function(prev, value) {
			return prev + value;
		}, 0);
		
		print( sum );
		
		// reduceRight(callbackfn[, initialValue])
		// callbackfn: function(previousValue, value[,index[,array]])
		// reduceRight和reduce功能相同,主要处理的顺序不同, reduceRight从数组末尾开始
		// 如果未指定initialValue,那么数组的最后一个元素将作为previousValue的值,并且callbackfn不会在该元素上被调用

 如果园友觉得我的总结还不是很直观,有个在线测试页面(来自微软官方),希望对大家有所帮助! :)

转载于:https://www.cnblogs.com/AndyWithPassion/archive/2011/12/20/ECMAScript5_Array_method.html