首页 > 代码库 > ES5新增Array方法总结
ES5新增Array方法总结
ES5定义了9个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组。
概述：大多数方法的第一个参数接收一个函数，并且对数组的每个元素调用一次该还是，如果是稀疏数组，对不存在的数组元素不调用传递的函数。在大多数情况下，调用提供的函数使用3个参数：数组元素、元素的索引和数组本身。通常，都只需要第一个参数值。
浏览器支持：
- Opera 11+
- Firefox 3.6+
- Safari 5+
- Chrome 8+
- Internet Explorer 9+
如果需要IE6-IE8页支持该方法，可以通过将Array的原型扩展，例如：
if(typeof Array.prototype.forEach != ‘function‘){
Array.prototype.forEach = function(){
//实现代码
}
}
方法列表：
1、forEach()
forEach()方法从头至尾遍历数组，为每个数组元素调用指定的函数(等同于for循环)。将调用的函数作为forEach()方法的第一个参数。
将[1,2,3,4,5].forEach(console.log);在控制台输出，发现分别打印出数组元素、元素的索引和数组本身，如图所示：
所以，该方法使用3个参数，分别为：数组元素、元素的索引和数组本身。
使用范例：
var arr = [1,2,3,4,5], arr2 = [1,2,,5], sum = 0;
arr.forEach(function(val){ sum += sum + val; });//sum为数组之和 =>15
arr.forEach(function(val,i,a){ a[i] = v +1; });//每个数组元素的值都加1 =>[2,3,4,5,6]
arr2.forEach(function(val,i,a){ console.log(‘a[‘+i+‘]=‘val); }); //对不存在的数组元素不调用传递的函数 =>a[0]=1 a[1]=2 a[3]=3
接下来，forEach()方法除了第一个回调函数作为必要的参数，还有一个可选的上下文参数作为第二个参数（改变第一个回调函数里面的this指向）
例如
var obj = {
users: [‘lily‘,‘jhon‘,‘jack‘],
finduser: function(user){
if(this.isvalidUser(user)){
console.log(‘yes,‘+user);
}else{
console.log(‘no,‘+user);
}
},
isvalidUser: function(user){
return /^j/.test(user);
}
};
obj.users.forEach(
obj.finduser,
obj
);
这里的this如果不指定，则使用全局对象代替(浏览器中为window)，严格模式下为underfined
根据上面的全部说明，我们将IE6-IE8进行兼容性处理
if(typeof Array.prototype.forEach != ‘function‘){
Array.prototype.forEach = function(fn,context){
for(var k=0,length=this.length; k<length; k++){
if(typeof fn === ‘function‘ && Array.prototype.hasOwnProperty.call(this,k)){
fn.call(context,this[k],this);
}
}
}
}
2、map()方法
这里的map知道是“映射”，map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。
例如：
a = [1,2,3];
b = a.map(function(x){ return x*x; }); //b=[1,4,9]
map()方法不会改变原来的数组，而是返回一个新的数组，且回调函数最好返回值return 。
在实际使用的时候，我们可以利用map方法获取对象数组中的指定属性值。
例如：
var users = [
{name: ‘lily‘, ‘email‘: ‘lily@email.com‘},
{name: ‘jhon‘, ‘email‘: ‘jhon@email.com‘},
{name: ‘jack‘, ‘email‘: ‘jack@email.com‘}
];
var emails = users.map(function(user){
return user.email;
});
console.log(emails.join(‘,‘,‘‘));
IE6-IE8兼容性处理
if(typeof Array.prototype.map != ‘function‘){
Array.prototype.map =function(fn,context){
var arr = [];
if (typeof fn === ‘function‘){
for(var k=0,length= this.length;k<length;k++){
arr.push(fn.call(context,this[k],this));
}
}
return arr;
}
}
3、filter()方法
filter()方法返回过滤后的新数组。该回调函数要返回true或者false
例如：
var a = [1,2,3,4,5];
smallvalues = a.filter(function(v){ return v < 3; }); //[1,2]
兼容IE6-IE8
if(typeof Array.prototype.filter!= ‘function‘){
Array.prototype.filter=function(fn,context){
var arr = [];
if (typeof fn === ‘function‘){
for(var k=0,length= this.length;k<length;k++){
fn.call(context,this[k],k,this) && arr.push(this[k]);
}
}
return arr;
}
}
4、some()方法
some()方法找出数组中是否某些项符合条件，和every()方法相对应。
例如：
var arr = [2,5,8,9];
var c = 6;
if(arr.some(function(v){ return v > c; }){
console.log(‘及格了！‘);
}//至少一个返回true，则为true
兼容IE6-IE8
if(typeof Array.prototype.some!= ‘function‘){
Array.prototype.some=function(fn,context){
var passed = false;
if (typeof fn === ‘function‘){
for(var k=0,length= this.length;k<length;k++){
if(passed === true) break;
passed = !!fn.call(context,this[k],k,this) ;
}
}
return passed;
}
}
5、every()方法
every()方法同样返回boolean值，需要数组中所有元素都满足回调函数才返回true
例如：
var arr = [1,2,3,4,5];
a.every(function(v){ return v<6; }); //返回true
兼容IE6-IE8
if(typeof Array.prototype.some!= ‘function‘){
Array.prototype.some=function(fn,context){
var passed = true;
if (typeof fn === ‘function‘){
for(var k=0,length= this.length;k<length;k++){
if(passed === false) break;
passed = !!fn.call(context,this[k],k,this) ;
}
}
return passed;
}
}
6、reduce()方法
reduce()方法通过指定的回调函数将数组元素进行组合，生成单个值并返回，可以称为“注入”和“折叠”。reduce是减少的意思，这里应该是代表减少为单个值吧
这里的回调函数接受四个参数：之前的值，当前值，索引值和数组本身，reduce()方法的第二个参数为可选值，表示初始值，如果指定，则为最初的之前的值，如果缺省，则为数组的第一个元素，同时当前值是初始值的下一个。
例如：
var sum = [1,2,3,4].reduce(function( prev,curr,index,arr){ return prev+curr; });
console.log(sum);//10
有了reduce方法，可以轻松实现二维数组的扁平化，例如：
var matrix = [[1,2],[3,4],[5,6]];
//二维数组扁平化
var flatten = matrix.reduce(function(prev,curr){ return prev.concat(curr);//连接2个数组 });
console.log(flatten); //[1,2,3,4,5,6]
IE6-IE8兼容性兼容
if(typeof Array.prototype.reduce != ‘function‘){
Array.prototype.reduce = function(callback,initvalue){
var prev = initvalue, k = 0, length = this.length;
if(typeof initvalue =http://www.mamicode.com/== ‘undefined‘){
prev = this[0];
k = 1;
}
if(typeof callback === ‘function‘){
for(k; k<length; k++){
this.hasOwnProperty(k) && (prev = callback(prev,this[k],k,this));
}
}
return prev;
}
}
7、reduceRight()方法
reduceRight()方法和reduce方法类似，差异就在于reduceRight方法是从数组的末尾开始实现的。
例如：
var arr = [1,2,3,4];
var spec = arr.reduceRight(function(prev,curr,index){
if(index == 0){
return prev + curr ;
}
return prev - current;
});
console.log(spec);//0
IE6-IE8兼容性处理
if(typeof Array.protorype.resuceRight != ‘function‘){
Array.prototype.reduceRight = function(callback,initvalue){
var length = this.length, k = length -1, prev = initvalue;
if(typeof initvalue =http://www.mamicode.com/== ‘undefined‘){
prev = this[length-1];
k--;
}
if(typeof callback === ‘function‘){
for(k; k>-1; k-=1){
this.hasOwnProperty(k) && (prev = callback(prev,this[k],k,this));
}
}
return prev;
}
}
8、indexOf()方法
indexOf()方法找出数组中是否给定值的元素，并且返回找到的第一个元素的索引值，如果没有则返回-1.字符串中也有indexOf方法（string.indexOf(searchString,position)），与之相似。array.indexOf(searchElement,fromIndex)，fromIndex默认为0
例如：
var arr = [5,2,6,1,8,2];
console.log(arr.indexOf(2,‘a‘)); //1（下标为1，x被忽略）
console.log(arr.indexOf(2,3)); //5 (从下标为3开始搜索)
console.log(arr.indexOf(9)); //-1(没有找到)
IE6-IE8兼容性处理
if(typeof Array.prototype.indexOf != ‘function‘){
Array.prototype.indexOf = function(searchElement,fromIndex){
var index = -1;
formIndex = fromIndex * 1 || 0;
for(var k = 0,length = this.length; k<length; k++){
if(k >= fromIndex && this[k] === searchElement){
index = k;
break;
}
}
return index;
}
}
9、lastIndexOf()方法
lastIndexOf方法和indexOf类似，只是lastIndexOf方法是从数组的最后一个元素开始查找，而且fromIndex的默认值为array.length - 1 ;
例如：
var arr = [6,3,5,1,3,7];
console.log(arr.lastIndexOf(3)); //4(从最后的元素开始搜索)
console.log(arr.indexOf(3,2)); //1 (从后往前，下标为小于2开始搜索)
console.log(arr.indexOf(9)); //-1(没有找到)
IE6-IE8兼容性处理
if(typeof Array.prototype.lastIndexOf != ‘function‘){
Array.prototype.lastIndexOf = function(searchElement,fromIndex){
var index = -1;
formIndex = fromIndex * 1 || length-1;
for(var k = length-1; k>-1; k-=1){
if(k <= fromIndex && this[k] === searchElement){
index = k;
break;
}
}
return index;
}
}
ES5新增Array方法总结