zoukankan      html  css  js  c++  java
  • javascript 高阶函数

    //有一个数组[10,20,111,222,444,40,50]
    //需求1:把小于10的数过滤出来,加到一个新数组

    // 需求2: 对过滤后的数,每个乘以2

    //需求3: 对数组中的所有数做个加和汇总

    filter

    /**
    filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
    
     * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
     * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
     * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
    
    
    //filter中的回调函数有一个要求:必须返回一个boolean值,
    //当返回true时,函数内部会自动将这次回调的n加入到新的数组中
    //当返回false时,函数内部会过滤掉这次的n
    **/
    // const nums = [10,20,111,222,444,40,50]
    
    //需求1:把小于10的数过滤出来,加到一个新数组
    // let new_nums = nums.filter(function(n){
    //     return n < 100
    // })
    
    // console.log(new_nums)  
    

    map

    /**
    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
    
     * Returns the elements of an array that meet the condition specified in a callback function.
     * @param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
     * @param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
    
    **/
    // 需求2: 对过滤后的数,每个乘以2
    const nums = [10,20,40,50]
    // let new_nums = nums.map(function(n){
    //     return n*2
    // })
    
    // console.log(new_nums)  
    
    

    reduce

    /**
     *reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
         * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
         * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
         * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
         
     */
    //需求3: 对数组中的所有数做个加和汇总
    
    //reduce:对数组中的所有内容进行汇总,比如所有元素相加相乘等
    // -----
    // const nums = [20,40,80,100]
    // let new_nums = nums.reduce(function(preValue, n){
    //     return 100
    // }, 0)
    
    //第一次:preValue=0,n=20
    //第二次:preValue=100,n=40
    //第三次:preValue=100,n=80
    //第四次:preValue=100,n=100
    // -----
    // const nums = [20,40,80,100]
    // let total = nums.reduce(function(preValue, n){
    //     return preValue + n
    // }, 0)
    
    //第一次:preValue=0,n=20
    //第二次:preValue=20,n=40
    //第三次:preValue=60,n=80
    //第四次:preValue=140,n=100
    //240
    // console.log(total)  
    
    

    上面三段代码做的事情,下面我们用一段代码来写

    // const nums = [10,20,111,222,444,40,50]
    // let total = nums.filter(function(n){
    //     return n < 100
    // }).map(function(n){
    //     return n * 2
    // }).reduce(function(preValue, n){
    //     return preValue + n
    // }, 0)
    
    // console.log(total) 
    
    

    更简洁的,使用箭头函数,一行搞定

    const nums = [10,20,111,222,444,40,50]
    let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
    console.log(total)
    

    更多学习笔记移步 https://www.cnblogs.com/kknote
  • 相关阅读:
    强烈免费25款商务logo设计模板 java程序员
    16个帮助你高效测试响应式设计界面的工具 java程序员
    一个帮助你生成iOS文件夹效果的jQuery插件 AppFolders java程序员
    Linq 实现左连接,右连接 java程序员
    一个帮助你实现pinterest页面布局的jQuery插件 jQuery.Shapeshift java程序员
    基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 photobooth.js java程序员
    30个让你保持好身材的iphone健康应用程序 java程序员
    一个实体对象不能由多个 IEntityChangeTracker 实例引用 解决办法 java程序员
    2012年十一月GBin1 web技术热点荟萃 java程序员
    超棒的20款javascript工具提示条(tooltips)类库 java程序员
  • 原文地址:https://www.cnblogs.com/kknote/p/14704243.html
Copyright © 2011-2022 走看看