JavaScript中的高階函數

来源:https://www.cnblogs.com/iflygofy/archive/2020/05/28/12980660.html
-Advertisement-
Play Games

前言 在 JavaScript 的學習過程中，我們可能或多或少地接觸過高階函數。那麼，我們自己對此是否有一個明確的定義，或者說很熟練的掌握這些用法呢 簡單來說，高階函數是一個函數，它接收函數作為參數或將函數作為輸出返回 看到這樣的概念，在你的腦海中會出現哪些函數呢 其實，像我們經常會使用到的一些數組 ...


前言

在 JavaScript 的學習過程中，我們可能或多或少地接觸過高階函數。那麼，我們自己對此是否有一個明確的定義，或者說很熟練的掌握這些用法呢

簡單來說，高階函數是一個函數，它接收函數作為參數或將函數作為輸出返回

看到這樣的概念，在你的腦海中會出現哪些函數呢

其實，像我們經常會使用到的一些數組方法，比如：map、filter 等等都是高階函數的範疇

當然，這些 JavaScript 內置的方法不在本文的討論範圍之內，下麵會列舉一些在我們實際開發或者面試過程中可能會遇到的函數高階用法

防抖

任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行

實現方式就是如果任務觸發的頻率比我們設定的時間要小，那麼我們就清除掉上一個任務重新計時

function debounce(fn, interval) {
    let timer = null
    return function() {
        // 如果用戶在設定的時間內再次觸發,就清除掉
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        }, interval);
    }
}

節流

指定時間間隔內只會執行一次任務
function throttle(fn, interval) {
    let timer,
        firstTime = true // 是否是第一次執行
    return function () {
        let _this = this
        if (firstTime) {
            fn.apply(_this, arguments) // 第一次不需要延遲執行
            return firstTime = false
        }
        if (timer) { // 如果定時器還在 說明前一次還沒有執行完
            return false
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn.apply(_this, arguments)
        }, interval || 500);
    }
}

// 不考慮定時器的情況 直接加一個節流閥
function throttle(fn, interval) {
    let canRun = true //節流閥
    return function() {
        if(!canRun) {
            return
        }
        canRun = false
        setTimeout(() => {
            fn.apply(this, arguments)
            canRun = true
        }, interval);
    }
}

 

無論是防抖還是節流，我們都可以使用下麵的這種方式去驗證一下

window.onresize = throttle(function () {
    console.log(1)
}, 1000)

通過上面兩種方式的實現，相信小伙伴們也都瞭解了所謂防抖和節流我們都是藉助 setTimeOut 來實現，不同的地方就是 清除定時器的位置

 

惰性函數

當我們需要重覆使用一個邏輯的時候，優化邏輯判斷，提高 JavaScript 性能

原理：同名函數覆蓋

function createXHR() {
    var xhr
    try {
        xhr = new XMLHttpRequest()
    } catch (e) {
        handleErr(e)
        try {
            xhr = new ActiveXObject('Msxml2.XMLHTTP')
        } catch (e) {
            try {
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
            } catch (e) {
                xhr = null
            }
        }
    }
    return xhr
}

function handleErr(e) {
    // do sth
}

 

惰性函數修改版：

function createXHR() {
    var xhr
    if(typeof XMLHttpRequest !== 'undefined') {
        xhr = new XMLHttpRequest()
    }
    createXHR = function() {
        return new XMLHttpRequest()
    } else {
        try {
            xhr = new ActiveXObject('Msxml2.XMLHTTP')
            createXHR = function() {
                return new ActiveXObject('Msxml2.XMLHTTP')
            }
        } catch(e) {
            try {
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
                createXHR = function() {
                    return new ActiveXObject('Microsoft.XMLHTTP')
                }
            } catch(e) {
                createXHR = function() {
                    return null
                }
            }
        }
    }
    return xhr
}

 

通過上面修改之後，當我們在第一次調用這個函數的時候就會去判斷當前的環境，進而將函數優化簡寫，不需要再進行後續的判斷

比如，上述代碼中的 XMLHTTPRequest 如果是存在的，那麼當我們第二次調用這個函數的時候已經是這樣了

function createXHR() {
    return new XMLHttpRequest()
}

使用場景：

  • 頻繁使用同一判斷邏輯

  • 只需要判斷一次，後續使用環境穩定

級聯函數

其實就是鏈式調用，所以原理也就很簡單：在每個方法中將對象本身 return 出去

假設我們有一個 Person 模板

function Person() {}
// 添加幾個方法
Person.prototype = {
    setName: function (name) {
        this.name = name
        return this //
    },
    setAge: function (age) {
        this.age = age
        return this
    },
    setSex: function (sex) {
        this.sex = sex
    },
}
// 別忘了重新指定一下構造函數
Person.constructor = Person
let person = new Person()
// 這樣看起來做了很多重覆的事情，稍微修改一下，在每個方法中將 this return 出來就可以達到 鏈式調用的效果
person.setName('游蕩de蝌蚪')
person.setAge(18)
person.setSex('male')
// 修改之後
person.setName('游蕩de蝌蚪').setAge(18).setSex('male')
console.log(person)

優點：簡化了函數調用的步驟，我們不需要再寫一些重覆的東西

缺點：占用了函數的返回值

柯里化

收集參數，延後執行，也可以稱之為部分求值
function add(a, b) {
    return a + b
}

// 簡單的通用封裝
function curry(fn) {
    let args = Array.prototype.slice.call(arguments, 1)
    return function() {
        let _args = Array.prototype.slice.call(arguments)
        let final = args.concat(_args)
        return fn.apply(null, final)
    }
}

// 對函數 add 柯里化
let adder = curry(add)
adder(1, 2)
// 或者
let adder = curry(add, 1)(2)
let adder = curry(add)(1, 2)
　　一個典型的通用型 curry 封裝

            Function.prototype.mybind = function(fn) {
    let args = Array.prototype.slice(arguments, 1)
    let _this = this
    return function() {
        let _args = Array.prototype.slice(arguments)
        let final = args.concat(_args)
        return _this.apply(fn, final)
    }
}

通過 curry 函數的這種模式，我們就能實現一個簡單的 bind

Function.prototype.mybind = function(fn) {
    let _this = this
    return function() {
        return _this.apply(fn, arguments)
    }
}

函數柯里化也是我們在面試過程中可能會經常碰到的問題，比如：

// 編寫一個 add 函數，實現以下功能
add(1)(2)(3) // 6
add(1)(2, 3)(4) //10
add(1, 2)(3) (4, 5) // 15

function add() {
    let args = Array.prototype.slice.call(arguments)
    let adder =  function() {
        // 利用閉包的特性保存 args 並且收集參數
        args = args.concat(Array.prototype.slice.call(arguments))
        return adder
    }
    // 利用 toString 隱式轉換的的特性返回最終計算的值
    adder.toString = function() {
        return args.reduce((a, b) => {
            return a + b
        })
    }
    return adder
}
add(1)(2)(3) // 6
add(1)(2, 3)(4) // 10
add(1, 2)(3)(4, 5) // 15

// 當然，我們也可以藉助ES6的方法簡化這個函數
function add1(...args) {
    let adder = (..._args) => {
        args = [...args, ..._args]
        return adder
    }
    adder.toString = () => args.reduce((a, b) => a + b)
    return adder
}

想要實現上面函數的效果，我覺得有兩點是我們必須理解和掌握的：

  • 閉包，使用閉包的特性去保存和收集我們需要的參數

  • 利用 toString 的隱式轉換特性，最終拿到我們想要的結果


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 3.柵格系統
    # 3.柵格系統 介紹的是 4.5.x版本 一行最多放12列 - class類介紹 最外層容器： 1.container-fluid：寬度100%,和body的寬度一樣 2.container：寬度是一個具體數值，但是會根據用戶屏幕大小來改變 行類 1.row：分行 列類： 5個響應層 後面的*表示 ...
  • nuxt中使用Vuex
    引言 在nuxt中使用Vuex，以模塊方式引用——計數器為例 計數器示例 目錄結構 目錄結構 js模塊寫法 // user.js // state為一個函數, 註意箭頭函數寫法 const state = () => ({ counter: 6 }) // mutations為一個對象 const ...
  • 什麼是前端？前端工程師做什麼？前端開發需要具備什麼技能？
    什麼是前端？ 前端，也稱web前端、web客戶端、通常是指網站的前臺部分，運行在PC端、移動端等瀏覽器上展現給用戶瀏覽的網頁，包括網站的表現層和結構層，通俗點就是用戶可以看到的部分，前端與後端（服務端）相對應，前端調取後端（服務端）的數據展現給用戶。 前端開發做什麼？ 前端工程師，又叫web前端開發 ...
  • JavaScript 的 對象
    學習目標：能夠說出為什麼需要對象 能夠使用字面量創建對象 能夠使用構造函數創建對象 能夠說出new的執行過程 能夠遍歷對象 1.對象 1.1萬物皆對象，對象是一個具體的事物 在程式裡面，一個伺服器，一張網頁，一個遠程伺服器的連接也可以是對象。 Javascript中對象是一組無序的相關屬性和方法的集 ...
  • JavaScript 實現 冒泡排序
    <script> //數組排序（冒泡排序） //冒泡排序是一種演算法，把一系列的數據按照一定的循序進行排列顯示（從小到大或從大到小） //把數組[5,4,3,2,1]換成[1,2,3,4,5] var arr = [5,4,3,2,1]; var temp; for(i=0;i<arr.length- ...
  • js面向對象實現Tab切換
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
  • javaScript保留三位有效數字
    摘要 在之前的文章中有講過保留兩位小數的實現，最近在開發在開發活動頁面時，依舊是展示參賽作品的點贊數。當點贊數過萬時，顯示三位有效數字來展示點贊數，例如：1.56萬、23.1萬等。經過探索，找到了toPrecision() 方法，在MDN中是這樣概述該方法的：toPrecision() 方法以指定的 ...
  • 巧用 display: contents 增強頁面語義
    display: contents 是一個比較陌生的屬性，雖然屬於 display 這個基本上是最常見的 CSS 屬性，但是 contents 這個取值基本不會用到。但是它早在 2016 年就已經得到了 Firefox 的支持。 本文將深入一下這個有意思的屬性值。 基本用法 根據 W3C 對 dis ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類