唯品秀博客
首页 > 前端开发 > Javascript > JS中some(),every(),forEach(),map(),filter()区别

JS中some(),every(),forEach(),map(),filter()区别

2018年05月05日 唯品秀 1417次浏览

JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了(你是否还以为是铯新增的呢)。

刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深影响。我主要从两个角度来理解和记忆吧,一个是API的使用,一个是内部实现。

函数简述

  1. map():返回一个新的Array,每个元素为调用func的结果
  2. filter():返回一个符合func条件的元素数组
  3. some():返回一个boolean,判断是否有元素是否符合func条件
  4. every():返回一个boolean,判断每个元素是否符合func条件
  5. forEach():没有返回值,只是针对每个元素调用func

API的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//数组操作之迭代器方法(这些方法可以对数组中的每一个元素运用某个方法)
//一、不生成新数组的迭代器方法
    //1、forEach方法(接收一个函数作为参数)
    function square(num){
        alert(num * num) ;
    }
    var nums = [1,2,3,4,5];
    console.log(nums.forEach(square));

    //2、every方法(接收一个返回值为布尔值的函数,对数组中的每一个元素使用该函数)
    function isEven (num) {
        return num % 2==0;
    }
    var evens=[2,4,6,8,10];
    var isAllEven = evens.every(isEven);  //当且仅当数组中的所有的元素返回为真,every函数才会返回为真
    if(isAllEven){
        alert("all is even");
    }else{
        alert("not all is even");
    }

    //3、some方法(只要数组中有一个元素使用方法返回为真,some函数就会返回真)
        var nums = [1,2,3,5,7,9];
        function isEven (num) {
        return num % 2==0;
        }
        alert(nums.some(isEven));   //true
    //4.reduce方法
        //用法一:为数组中的元素求和
            function add (currentTotal,currentValue) {
                //alert(currentValue);
                //alert(currentTotal);
                return currentTotal+currentValue;
            }
            var nums = [1,2,3,4,5,6,7];
            alert(nums.reduce(add));
        //用法二:将数组中的元素连接成一个长的字符串
            function linkStr (foreStr,currentStr) {
                return foreStr + currentStr;
            }
            var strings = ["nolan","is","studying","javascript"];
            alert(strings.reduce(linkStr));
//二、生成新数组的迭代器方法
    //1.map方法(类似于不生成新数组中的forEach方法)
        //用法一:取数组中每个单词的第一个字母
        function firstAlpha (word) {
            return word[0].toUpperCase();
        }
        var words = ["nolan","is","studying","javascript"];
        var firstAlphas = words.map(firstAlpha);
        alert(firstAlphas.join(""));   //使用join可以去掉连接数组元素的逗号
    //2.filter方法(类似于every方法)
        //用法一:筛选出符合条件(即返回值为true)的元素
        function isEven (num) {
            return num % 2==0;
        }
        var nums=[1,2,4,6,8,10];            
        var evens = nums.filter(isEven);
        alert(evens);
        //案例:随机生成一些成绩,挑选出大于六十分的成绩
        function pass (grade) {
            if(grade>60){
                return true;
            }else{
                return false;
            }
        }
        var grades = [];
        for(var i=0;i<20;i++){
            grades[i]=Math.floor(Math.random()*101);
        }
        alert(grades);
        var passedGrades=grades.filter(pass);
        alert(passedGrades);

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 1 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - JS中some(),every(),forEach(),map(),filter()区别

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 190 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 873 条
  • 链接总数: 13 个
  • 标签总数: 371 个
  • 建站时间: 886 天
  • 注册用户: 690 人
  • 访问总量: 8673003 次
  • 最近更新: 2019年5月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线