js的高阶函数( filter()、map()、reduce() )

arr = [20,40,12,232,23,232];
需求1:找出数组中数值低于100的元素,组成新数组并返回
需求2:对返回的数组中的每个元素都乘2
需求3:汇总元素,将每一个元素相加并返回新数组。

一.找出数组中数值低于100的元素,组成新数组并返回

1.for循环遍历

        const arr = [20,40,12,232,23,232];
        const newArr = [];
        for(let i = 0; i < arr.length; i++) {
            if(arr[i] < 100) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
image.png

2.for in
i是arr的下标

        for(let i in arr) {
            if(arr[i] < 100) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);

3.for of
item是循环到当前的arr[i]

        for(let item of arr) {
            if(item < 100) {
                newArr.push(item);
            }
        }
        console.log(newArr);

虽然利用for in、for of对for循环的代码进行改进,但仍然需要手动遍历数组

4.filter(callback(n))

filter()的第一个参数是个函数


image.png

查看参数函数中的参数n是啥

        const newArr = arr.filter(function(n){
            console.log(n);
        })
        console.log(newArr);

n是arr中的每个元素,就和for(item of arr)中的item意义相同


image.png

规则:
1.若函数内返回的是true,就将当前的n添加到隐式的数组中,
2.若函数内返回的是false,就将当前的n过滤掉,系统自动遍历下一个n
最后,用一个常量接收返回的数组。
所以filter函数是根据表达式的布尔值,判断是否要过滤掉该元素

验证:


image.png

因为表达式都为ture,所以数组中的每个一元素都不会被过滤,都被添加到隐式的数组中,最后返回给newArr


image.png

实现第一个需求:

        const newArr = arr.filter(function(n){
            return n < 100;
        })
        console.log(newArr);
image.png

二、对返回的数组中的每个元素都乘2

以1为例,同样通三种for循环引出高阶函数map(),感受高阶函数的便利
1.for

        for(let i = 0; i < newArr.length; i++) {
            newArr[i] = newArr[i] * 2;
        }
        console.log(newArr);
image.png

2.for in

        for(let i in newArr) {
            newArr[i] = newArr[i] * 2;
        }
        console.log(newArr);
image.png

3.for of

        const newArr2 = [];
        for(let item of newArr) {
            item = item * 2;
            newArr2.push(item);
        }
        console.log(newArr2);
image.png
4.map(callback(n))

高阶函数中的参数也是函数


image.png

参数函数中的参数n和filter相同,都是遍历到当前位置的数组的值


image.png
image.png

规则:
给数组中的每一个元素做统一的操作,并把操作后的元素添加到隐式的数组中,最后用一个常量接收。

实现需求2;

        const newArr2 = newArr.map(function(n){
            return n * 2;
        })
        console.log(newArr2);

三、汇总元素,将每一个元素相加并返回新数组。

1.for

        let result = 0;
        for(let i = 0; i < newArr2.length; i++) {
            result += newArr2[i];
        }
        console.log(result);
image.png

2.for in

        for(let i in newArr2) {
            result += newArr2[i]
        }
        console.log(result);
image.png

3.for of

        for(let item of newArr2) {
            result += item;
        }
        console.log(result);
image.png

4.reduce(callback(previousValue,n),value)

        const newArr3 = newArr2.reduce(function(){},0)

reduce()有两个参数,第一个参数是函数,第二个参数是初始值。


image.png
        const newArr3 = newArr2.reduce(function(preValue,n){
            console.log(preValue)
            return 100;
        },0)

数组中有4个元素,一共遍历4次

第一次:
0作为preValue的初始值,第一次的preValue=0;

第二次:
第一次return的100会作为第二次的preVule,第二次的preValue=0;

第三次:
第二次return的100会作为第三次的preVule,第三次的preValue=0;

第四次:
第三次return的100会作为第四次的preVule,第四次的preValue=0;

image.png

所以preVlue存储的就是上一次的返回结果。

实现需求3:

        const newArr3 = newArr2.reduce(function(preValue,n){
            return preValue += n;
        },0)
        console.log(newArr3);

四、利用高阶函数综合实现全部需求

        const arr = [20,40,12,232,23,232];
        const newArr = arr.filter(function(n){
            return n < 100;
        }).map(function(n){
            return n * 2;
        }).reduce(function(preValue,n){
            return preValue += n;
        },0);
        console.log(newArr);
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 224,093评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,870评论 3 402
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 171,133评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,638评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,652评论 6 399
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,173评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,560评论 3 428
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,512评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,048评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,088评论 3 344
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,232评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,856评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,548评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,020评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,152评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,729评论 3 380
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,255评论 2 363