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
 
我将挑选5种方法,我个人认为是最有用的,很多开发者都会碰到。
 

1) indexOf

 
indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。
 
不使用indexOf时
 
var arr = ['apple','orange','pear'],
found = false;
 
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}
 
console.log("found:",found);
 
使用后
 
var arr = ['apple','orange','pear'];
 
console.log("found:", arr.indexOf("orange") != -1);
 

2) filter

 
该filter()方法创建一个新的匹配过滤条件的数组。
 
不用 filter() 时
 
var arr = [
    {"name":"apple", "count": 2},
    {"name":"orange", "count": 5},
    {"name":"pear", "count": 3},
    {"name":"orange", "count": 16},
];
    
var newArr = [];
 
for(var i= 0, l = arr.length; i< l; i++){
    if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}
 
console.log("Filter results:",newArr);
 
 
用了 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);
 
 

3) forEach()

 
forEach为每个元素执行对应的方法
 
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);
});
 
forEach是用来替换for循环的
 
 

4) map()

 
map()对数组的每个元素进行一定操作(映射)后,会返回一个新的数组,
 
不使用map
 
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
 
function getNewArr(){
    
    var newArr = [];
    
    for(var i= 0, l = oldArr.length; i< l; i++){
        var item = oldArr[i];
        item.full_name = [item.first_name,item.last_name].join(" ");
        newArr[i] = item;
    }
    
    return newArr;
}
 
console.log(getNewArr());
 
使用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());
 
 
map()是处理服务器返回数据时是一个非常实用的函数。
 
 

5) reduce()

 
reduce()可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值。
 
说实话刚开始理解这句话有点难度,它太抽象了。
 
场景: 统计一个数组中有多少个不重复的单词
 
不使用reduce时
 
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将是数组中的第一个元素。
 
比如:
 
/*
* 二者的区别,在console中运行一下即可知晓
*/
 
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());

JS Array常用方法indexOf/filter/forEach/map/reduce详解的更多相关文章

  1. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解(转)

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器.     ...

  2. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  3. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  4. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  5. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  6. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  7. GoLang基础数据类型--->字典(map)详解

    GoLang基础数据类型--->字典(map)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   可能大家刚刚接触Golang的小伙伴都会跟我一样,这个map是干嘛的,是 ...

  8. C++中的STL中map用法详解(转)

    原文地址: https://www.cnblogs.com/fnlingnzb-learner/p/5833051.html C++中的STL中map用法详解   Map是STL的一个关联容器,它提供 ...

  9. map接口详解

    1.Map接口详解(1)映射(map)是一个存储键.键值对的对象,给定一个键,可以查询得到它的值,键和值都可以是对象(2)键必须是唯一的,值可以重复(Map接口映射唯一的键到值)(3)有些映射可以接收 ...

随机推荐

  1. Delphi美化界面 转载

    手头的项目做的差不多了,交给客户,结果给出的结论是界面太难看了,至少要做成像QQ类似的界面.(目前是QQ2009界面确实还是不错的,本人也非常喜欢). 1.透明问题. 要重新调整界面确实很麻烦,以前用 ...

  2. POJ 1845 Sumdiv (求某个数的所有正因子的和)

    题意: 求A^B的所有正因子的和,最后模9901的结果. 思路: 若对一个数n进行素数分解,n=p1^a1*p2^a2*p3^a3*...*pk^ak那么n的所有正因子之和sum=(1+p1+...+ ...

  3. 【BZOJ1878】[SDOI2009]HH的项链 离线BIT

    1878: [SDOI2009]HH的项链 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义 ...

  4. 更改cmd代码页,修正语言显示

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 rem 英文 chcp 437   rem 日文 chcp 932   rem 简体中文 chcp 936   re ...

  5. JS中基本类型与包装类型的关系

    对于JS中一些类型的转化的东西,自己测试并得出的结论,有错误的地方请大大们留言. 不多废话,直接贴代码,测试请直接拷贝全部代码: <!DOCTYPE html> <html> ...

  6. 【poj3243-Clever Y】高次同余方程-拓展BabyStepGiantStep

    http://poj.org/problem?id=3243 题意:给定X,Z,K,求一个最小的Y满足XY mod Z = K. 关于拓展BSGS的详细解释我写了一篇博文:http://www.cnb ...

  7. MongoDB (四) MongoDB 数据模型

    在 MongoDB 中的数据有灵活的模式.在相同集合中文档并不需要有相同的一组字段或结构的公共字段的集合,文档可容纳不同类型的数据. MongoDB设计模式的一些考虑 可根据用户要求设计架构. 合并对 ...

  8. OSVERSIONINFO的用法及实例

    OSVERSIONINFO 快速信息 Windows NT   支持 Windows 95    支持 Win32s           支持 引入程序库    - 头文件           win ...

  9. 一个简单的ObjC和JavaScript交互工具

    https://github.com/changjianfeishui/XBWebBridge ObjectiveC与Js交互是常见的需求,可对于新手或者所谓的高手而言,其实并不是那么简单明了.这里只 ...

  10. # 图解TCP/IP读书笔记(五)

    第五章.IP协议相关技术 IP旨在让最终目标主机收到数据包,但是在这一过程中仅仅有IP是无法实现通信的,因此还有需要作为为IP的辅助的各种协议支持. 协议 作用 特点 DNS(Domain Name ...