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不会在该元素上被调用
如果园友觉得我的总结还不是很直观,有个在线测试页面(来自微软官方),希望对大家有所帮助! :)
