underscore_1: map()

来源:https://www.cnblogs.com/xya-b/archive/2019/10/11/11655054.html
-Advertisement-
Play Games

map()是underscore.js中一個處理數組和對象的方法。 params: 1. array || obj 2. callback 3. content 上下文指向 使用: 這個代碼如果我自己寫的話當然很簡單的想法了,就是判斷傳入參數類型,進行遍歷,然後判斷是否有回調,有的話,就執行,並將結 ...


map()是underscore.js中一個處理數組和對象的方法。
params:
1. array || obj
2. callback
3. content 上下文指向

使用:
  var obj = {a:1, b: 2, c: 3}
  var arr = [1.3,5,6,76]
  _.map(arr, function(value, index, obj){
    return value*3
  });

這個代碼如果我自己寫的話當然很簡單的想法了,就是判斷傳入參數類型,進行遍歷,然後判斷是否有回調,有的話,就執行,並將結果返回出去,沒有的話,就將原值返回出去。
下麵看下源碼是怎樣的吧。

調用過程:
  1. map():

     _.map = function (obj, iteratee, context) {
       iteratee = cb(iteratee, context);
       var keys = !isArray(obj) && Object.keys(obj);
       var length = (keys || obj).length;
       var result = Array(length);
       for(var index = 0; index < length; index++) {
         var current = keys ? keys[index] : index;
         result[index] = iteartee(obj[current], index, obj);
       }
     }
    
     map方法在一開始調用了一個cb方法,對iteratee進行重寫,下麵看下cb
  2. cb()

     var defaultCb = function(value) {
       return value;
     }
     /**
      * argcount 在生成迭代的時候,對迭代器有幾個參數的要求,預設3
      * */
     var cb = function(value, context, argcount) {
       if (value == null ) return defaultCb;
       if (isFunc(value)) return optimizeCb(value, context, argCount);
       ...
     }
    
     這裡其實沒什麼好說的,如果沒有回調,就給他一個預設方法。重點應該是在optimizeCb方法上。
  3. optimizeCb()

     var optimizeCb = function(func, context, argCount) {
       if (context == void 0 ) return func;
       switch (argCount == null ? 3 : argCount) {
         case 1: return function(value) {
           return func.call(context, value)
         }
         ...
         case 3: return function(value, index, object) {
           return func.call(context, value, index, object);
         }
       }
     }
    
     在optimizeCb中,會註意到underscore使用了void 0 來代替undefined進行判斷。
     void是js的一個函數,但是,似乎很少用到,由於void的返回值是undefined,於是,被代替undefined以用來判斷,畢竟,相比undefined,可以改寫這一點,void更可靠一點
     可以看到,在optimizeCb中使用了call函數,對func重新綁定了上下文,並返回。

其實在map方法中,主要的是iteratee設計(迭代設計),迭代可以基本大家都知道,但是卻不十分瞭解。
迭代: 簡單的說:就是通過某一種方法對數組,對象以及類數組中的每個元素進行處理。
而一個迭代器,至少有兩個基礎部分:

  1. 被迭代集合
  2. 當前迭代過程
    而map中的迭代過程則是一個函數,就是傳入的處理函數。至於cb函數,則是根據傳參的不同情況創建迭代過程,為每次的迭代服務。
    optimizeCb函數是對迭代函數的一個優化,基本上,map方法是通過迭代,對數據進行操作,從而返回一個新數組

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

-Advertisement-
Play Games
更多相關文章
  • 更多文章請參考:https://www.jianshu.com/u/5c628d7c8392 ...
  • 註:前提是你已經安裝好jdk和android-sdk,並且將兩者的環境變數已經設置完畢,我這裡是jdk8 獲取開發版sha1(也稱作測試版) 1.打開命令行 2.輸入keytool -list -v -keystore debug.keystore獲取開發板sha1 這裡應該讓你輸入密碼,我的是直接 ...
  • deferred對象就是jQuery的回調函數解決方案,它解決瞭如何處理耗時操作的問題,比如一些Ajax操作,動畫操作等。(P.s:緊跟上一節:https://www.cnblogs.com/greatdesert/p/11433365.html的內容) 非同步隊列有三種狀態:待定(pending)、 ...
  • 最近在寫一個類似於vue的一種cola-ui框架,有興趣的朋友可以瞭解一下:http://legacy.cola-ui.com/; 項目中有個業務需要引入Echarts圖表的需求,由於是前後端沒有分離,當時就沒考慮用npm去下載,在官網下載了一個echarts.min.js; 我這邊是用vscode ...
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jianpan</title></head><body><table border="2"> <thead> <th>option</th> <th>name</t ...
  • 一、vue-resource 1、簡介 一款vue插件,用於處理ajax請求,vue1.x時廣泛應用,現不被維護。 2、使用流程 step1:安裝 step2:引入 step3:編碼 step4:完整代碼 step5:截圖: 請求正常 點擊鏈接跳轉 使用錯誤的地址 彈出錯誤提示框 二、axios 1 ...
  • 使用jq寫選項卡,告別了繁瑣的迴圈以及命名規範 基本原理: 1.當某一個btn被選中時,將這個btn的背景顏色設為橘色,其餘兄弟btn背景顏色設為空(none) 2.如果子div與btn的索引相同,就將這個div顯示而其他兄弟div隱藏 1).css函數參數2的回調函數方法; 2).原生get方法再 ...
  • 我們知道,在創建一個函數時如果要用到變數來存取信息的話,要儘量使用局部變數。 因為一方面局部變數會隨著函數的執行結束被銷毀;另一方面在不執行函數的時候也不會創建這個局部變數,對節省空間資源有很大的好處。 下麵我們來看一個案例: 上面這個案例里的變數num就是一個典型的全局變數。 那麼我們要怎麼把nu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...