牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2016-09-20 投稿人: 浏览次数:5770
在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:0
item:2,index:1
item:3,index:2
item:4,index:3
item:5,index:4
item:6,index:5
item:7,index:6
item: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:apple
prev:{"apple":1},next:orange
prev:{"apple":1,"orange":1},next:apple
prev:{"apple":2,"orange":1},next:orange
prev:{"apple":2,"orange":2},next:pear
prev:{"apple":2,"orange":2,"pear":1},next:orange
VM401:11 {"apple":2,"orange":3,"pear":1}
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。