5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

在ES5中，一共有9个Array方法 : Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.reduceRight

1. indexOf

  indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

输入：

var arr = ['apple','orange','pear'];console.log("found:", arr.indexOf("orange") );

输出：

found: 1

2. filter

  该filter()方法创建一个新的匹配过滤条件的数组。

输入：

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

输出：

Filter results: [{"name":"orange","count":5},{"name":"orange","count":16}]

3. forEach

  forEach为每个元素执行对应的方法。

输入：

var arr = [1,2,3,4,5,6,7,8];arr.forEach(function(item,index){console.log("item:"+item+",index:"+index);});

输出：

item:1,index:0item:2,index:1item:3,index:2item:4,index:3item:5,index:4item:6,index:5item:7,index:6item:8,index:7

4. map()

  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"}]

5. reduce()

  reduce()可以实现一个累加器的功能，将数组的每个值（从左到右）将其降低到一个值。。

输入：

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

输出：

prev:{},next:appleprev:{"apple":1},next:orangeprev:{"apple":1,"orange":1},next:appleprev:{"apple":2,"orange":1},next:orangeprev:{"apple":2,"orange":2},next:pearprev:{"apple":2,"orange":2,"pear":1},next:orangeVM401:11 {"apple":2,"orange":3,"pear":1}