zoukankan      html  css  js  c++  java
  • JavaScript 中 map、foreach、reduce 间的区别



    一直对map、foreach、reduce这些函数很是生疏,今天看underscorejs时好好研究了一下,一研究我就更懵了,这不是一样嘛,都是遍历,所以我就去知乎找了一下,整理出了比较好的几个说法。
    假设我们有一个数组,每个元素是一个人。你面前站了一排人。
    foreach 就是你按顺序一个一个跟他们做点什么,具体做什么,随便:
    people.forEach(function (dude) {
      dude.pickUpSoap();});
    map 就是你手里拿一个盒子(一个新的数组),一个一个叫他们把钱包扔进去。结束的时候你获得了一个新的数组,里面是大家的钱包,钱包的顺序和人的顺序一一对应。
    var wallets = people.map(function (dude) {
      return dude.wallet;});
    reduce 就是你拿着钱包,一个一个数过去看里面有多少钱啊?每检查一个,你就和前面的总和加一起来。这样结束的时候你就知道大家总共有多少钱了。
    var totalMoney = wallets.reduce(function (countedMoney, wallet) {
      return countedMoney + wallet.money;}, 0);

    补充一个 filter 的:
    你一个个钱包数过去的时候,里面钱少于 100 块的不要(留在原来的盒子里),多于 100 块的丢到一个新的盒子里。这样结束的时候你又有了一个新的数组,里面是所有钱多于 100 块的钱包:
    var fatWallets = wallets.filter(function (wallet) {
      return wallet.money > 100;});

    最后要说明一点这个类比和实际代码的一个区别,那就是 map 和 filter 都是 immutable methods,也就是说它们只会返回一个新数组,而不会改变原来的那个数组,所以这里 filter 的例子是和代码有些出入的(原来的盒子里的钱包减少了),但为了形象说明,大家理解就好。

    Array.prototype.map = function (fn) {
        var resultArray = [];
        for (var i = 0,len = this.length; i < len ; i++) {
             resultArray[i] = fn.apply(this,[this[i],i,this]);
        }
        return resultArray;}
    
    Array.prototype.forEach = function (fn) {
        for (var i = 0,len = this.length; i < len ; i++) {
             fn.apply(this,[this[i],i,this]);
        }}
    
    Array.prototype.reduce= function (fn) {
        var formerResult = this[0];
        for (var i = 1,len = this.length; i < len ; i++) {
             formerResult = fn.apply(this,[formerResult,this[i],i,this]);
        }
        return formerResult;}
  • 相关阅读:
    【C语言入门教程】2.3 整型数据
    【C语言入门教程】2.1 数据类型(5种基本数据类型),聚合类型与修饰符
    【C语言入门教程】2.2 常量 与 变量
    【C语言入门教程】1.3 C语言“32个”关键字
    【C语言入门教程】1.2 函数库 和 链接
    【C语言入门教程】1.1 基本程序结构
    【C语言入门教程】目录/大纲
    【C语言】 Linux下编译提示pow未定义引用
    Linux C 收藏
    Ubuntu 14 常用“快捷键”,Ctrl + Alt + F1 进入终端,按 Ctrl + Alt + F7 回到界面
  • 原文地址:https://www.cnblogs.com/September-9/p/5120514.html
Copyright © 2011-2022 走看看