码迷,mamicode.com
首页 > 其他好文 > 详细

ES5新增Array方法总结

时间:2017-06-17 16:02:41      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:concat   res   else   filter   span   字符   each   val   回调   

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 === ‘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 === ‘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方法总结

标签:concat   res   else   filter   span   字符   each   val   回调   

原文地址:http://www.cnblogs.com/sifang/p/7030153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!