ES5新增 数组操纵forEach()、map()、filter()、some()、every()

1. 媒介

ES5中新增的一些处置惩罚数组(Array)的要领, 关于用JavaScript处置惩罚数据异常有效。我总结了一下,给这些要领分了类,大致以下:

2个索引要领:indexOf() 和 lastIndexOf();

5个迭代要领:forEach()、map()、filter()、some()、every();

2个合并要领:reduce()、reduceRight();

下面我们来细致看一看这些要领怎样用吧!

2、索引要领

索引要领包括indexOf()和lastIndexOf()两个要领,这两个要领都吸收两个参数,第一个参数是要查找的项,第二个参数是查找出发点位置的索引,该参数可选,假如缺省或是花样不正确,那末默以为0。两个要领都返回查找项在数组中的位置,假如没有找到,那末返回-1。区分就是一个夙昔今后找,一个从后往前找。

让我们来看一个细致列子吧,起首定义一个数组:

var dataArray = [1, 7, 5, 7, 1, 3];
 

indexOf():该要领从数组的开首最先向后查找。

console.log(dataArray.indexOf(7));              // 1     缺省, 从第一项最先查找

lastIndexOf(): 该要领从数组的末端最先向前查找。

console.log(dataArray.lastIndexOf (7));       // 3     缺省, 从末端第一项最先查找

值得注重的是,在比较第一个参数与数组中的每一项时,会运用全等操纵符, 请求必需完整相称,不然返回-1。

console.log(dataArray .lastIndexOf ('7'));   // -1,由于这里是字符串,并非数值范例

三、迭代要领

迭代要领包括some()、every()、filter()、map()和forEach()五个要领,这些要领都吸收两个参数,第一个参数是一个函数,他吸收三个参数,数组当前项的值、当前项在数组中的索引、数组对象自身。第二个参数是实行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值。注重,这几种要领都不会转变原数组。

every()和 some() 要领有些相似,我们放在一同比较。

every(): 该要领对数组中的每一项运转给定函数,假如该函数对每一项都返回 true,则返回true。

some(): 该要领对数组中的每一项运转给定函数,假如该函数对任何一项返回 true,则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ];  
  
    console.log( arr.some( function( item, index, array ){  
        console.log( 'item=' + item + ',index='+index+',array='+array );  
        return item > 3;  
    }));  
  
    console.log( arr.every( function( item, index, array ){  
        console.log( 'item=' + item + ',index='+index+',array='+array );  
        return item > 3;  
    }));  

能够看到,some要领是遇到一个返回true的值时刻就返回了,并没有继承往下运转,而every也一样,第一个值就是一个false,所以背面也没有举行下去的必要了,就直接返回效果了

filter() : 该要领对数组中的每一项运转给定函数,返回该函数会返回 true 的项构成的数组。运用这个要领可对数组元素举行过滤挑选。

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 5},
];
   
var newArr = arr.filter(function(item){
  return item.name === "orange";
});
 
 
console.log("Filter results:",newArr);

[{"name":"orange", "count": 5},{"name":"orange", "count": 5}]

grep(array, function[, invert])要领,另有一个特征,当invert缺省或是为false,和filter要领一样,平常我用filter

map(): 对数组的每一个元素举行肯定操纵(映照)后,会返回一个新的数组

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
 
function getNewArr(){
     
  return oldArr.map(function(item,index){
    item.full_name = [item.first_name,item.last_name].join(" ");
    return item;
  });
   
}
 
console.log(getNewArr());

-------------
 {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
 {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
 {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"} 

forEach(): 该要领对数组中的每一项运转给定函数。这个要领没有返回值。这个要领实在就是遍历轮回,和for轮回没有太大差异。jquery()也供应了响应的要领each()要领。

var arr = [1,2,3,4,5,6,7,8];
 
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
 
console.log("========================");
 
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

四、合并要领

合并要领包括reduce()和reduceRight()两个要领,这两个要领都邑迭代数组中的一切项,然后天生一个终究返回值。他们都吸收两个参数,第一个参数是每一项挪用的函数,函数接收是个参数分别是初始值,当前值,索引值,和当前数组,函数须要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,假如缺省,初始值为数组第一项,从数组第一个项最先叠加,缺省参数要比平常传值少一次运算。

reduce():该要领从数组的第一项最先,逐一遍历到末了一项。

用for轮回来写
var arr = ["apple","orange","apple","orange","pear","orange"];
 
function getWordCnt(){
  var obj = {};
   
  for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
  }
   
  return obj;
}
 
console.log(getWordCnt());

运用reduce

    var arr = ["apple","orange","apple","orange","pear","orange"];
     
    function getWordCnt(){
      return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
      },{});
    }
console.log(getWordCnt());

reduce 传入。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假定函数它有个传入参数,prev和next,index和array。prev和next你是必须要相识的。

平常来说prev是从数组中第一个元素最先的,next是第二个元素。然则当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。

var arr = ["apple","orange"];
 
function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
     
    return prev + " " +next;
  });
}
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
     
    prev[next] = 1;
    return prev;
  },{});
}
 
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

望文生义,reduceRight()就是末了一名往前面算,就不细致说了。

五、兼容性问题

ES5里这些处置惩罚数组的新要领,在IE6-IE8浏览器还未获得支撑,所以我们须要在IE这些低版本浏览器中引入这个es5-shim补丁,如许我们就能够运用它了。

补丁地点:https://github.com/es-shims/e…

    原文作者:木子喵
    原文地址: https://segmentfault.com/a/1190000009122152
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞