lodash的get方法

paraller 發布于2019-08-22 18:40 / 2257人閱讀

摘要：當然還要避免錯誤處理，返回相應的默認值。我們先不去看的方法，就能很輕易的判斷它返回的應該是一個路徑相關的數組。被檢查的值被查詢對象是否有對應的。

get這個方法，在lodash中是出場率很高的方法，初識起來有些疑惑，看了demo，又很直觀。

get方法源碼鏈接

下邊是它的使用說明

 Gets the value at `path` of `object`. If the resolved value is
  `undefined`, the `defaultValue` is returned in its place.

根據object對象的path路徑獲取值。如果解析值是undefined，就返回一個默認的值(defaultValue)

 * var object = { "a": [{ "b": { "c": 3 } }] };
 *
 * _.get(object, "a[0].b.c");
 * // => 3
 *
 * _.get(object, ["a", "0", "b", "c"]);
 * // => 3
 *
 * _.get(object, "a.b.c", "default");
 * // => "default"

暫時不考慮第第三個參數，只考慮第二個參數，該參數的含義就是路徑。指向object的路徑。

這個get方法事實上等同于我們取object上的某個屬性的值。object["a"][0]["b"]["c"] 或者 object.a[0].b.c.

如果把復雜對象當成一個樹來看，["a"][0]["b"]["c"]抑或是a[0].b.c都是樹上的一個個樹枝，樹枝的終端可以另一個樹枝，或者是一個具體的果實.

那該如何實現一個get方法呢。首先，第一個參數是具體的對象，第二個參數是一個路徑，該路徑我們當然會有一個約定俗成的格式，既足夠直觀理解，又便于我們格式化處理。當然還要避免錯誤處理，返回相應的默認值。

lodash的實現如下

function get(object, path, defaultValue) {
  var result = object == null ? undefined : baseGet(object, path);
  return result === undefined ? defaultValue : result;
}

export default get;

這里引入了一個baseGet。 get => baseGet

import castPath from "./_castPath.js";
import toKey from "./_toKey.js";


function baseGet(object, path) {
  path = castPath(path, object);

  var index = 0,
      length = path.length;

  while (object != null && index < length) {
    object = object[toKey(path[index++])];
  }
  return (index && index == length) ? object : undefined;
}

我們先不去看castPath的方法，就能很輕易的判斷它返回的應該是一個路徑相關的數組。

比如

// -var object = { "a": [{ "b": { "c": 3 } }] };
["a", "0", "b", "c"]
//

隨著while遍歷，object都會被重新賦值。最終取到我們目標的指

  return (index && index == length) ? object : undefined;

確認path中有確定想取的值。否則就是取不到值，undefined。

接下來我們可以考慮下castPath到底做了什么了。

/**
 * Casts `value` to a path array if it"s not one.
 * value如果不是數組，就將它轉換成一個路徑 數組。
 * @private
 * @param {*} value The value to inspect. 被檢查的值
 * @param {Object} [object] The object to query keys on. 被查詢對象是否有對應的key。
 * @returns {Array} Returns the cast property path array. 返回被轉換的路徑數組
 */

function castPath(value, object) {
  if (isArray(value)) {
    return value;
  }
  return isKey(value, object) ? [value] : stringToPath(toString(value));
}

isKey(value, object) 應該是用來判斷value是object的key,如果是，那二話不說直接返回了。

換做是我，我要如何寫這個isKey，可能我不會多帶帶寫一個方法。

粗心點，我可能直接就寫object[value]來判斷了。

isKey比我們想的多的多?？纯此窃趺磳懙?/p>

/** Used to match property names within property paths. */
var reIsDeepProp = /.|[(?:[^[]]*|([""])(?:(?!1)[^]|.)*?1)]/,
    reIsPlainProp = /^w*$/;
//reIsDeepProp 用來匹配屬性名里包含路徑屬性  例如什么. [] 這種
/**
 * Checks if `value` is a property name and not a property path.
 * 檢查value是一個屬性名，不是屬性路徑
 * @private
 * @param {*} value The value to check. 被檢查的值
 * @param {Object} [object] The object to query keys on.
 * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
 */
function isKey(value, object) {
  if (isArray(value)) { // 數組，直接返回false
    return false;
  }
  var type = typeof value; // 對應的集中類型直接返回true，看到沒，沒有字符串，沒有字符串。如果你考慮到
  if (type == "number" || type == "symbol" || type == "boolean" ||
      value == null || isSymbol(value)) {
    return true;
  }
  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
    (object != null && value in Object(object));
}

return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
    (object != null && value in Object(object));

先判斷是字符串，而且不是那種包含.[]。

value in Object(object))判斷value是Object的key，返回一個bol

還剩下一個stringToPath

stringToPath(toString(value));

很顯然，它的作用是將類似于"a[0]b.c"規則的字符串轉換成數組路徑["a", "0", "b", "c"]

var stringToPath = memoizeCapped(function(string) {
  var result = [];
  if (string.charCodeAt(0) === 46 /* . */) {
    result.push("");
  }
  //主要是下邊這兩行
  string.replace(rePropName, function(match, number, quote, subString) {
    result.push(quote ? subString.replace(reEscapeChar, "$1") : (number || match));
  });
  return result;
});

正則表達式的知識在自己補充吧。簡單說就是匹配出我需要的 a,0,b,c.

至于memoize下一篇再說吧。

GPU云服務器云服務器 lodash gets 函數的 cdn lodash lodash cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96066.html

Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

pkhope 2019-08-20 18:53 評論0 收藏0
Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

jerryloveemily 2019-08-29 13:13 評論0 收藏0
lodash源碼分析之緩存方式的選擇

摘要：接口設計同樣實現了跟一致的數據管理接口，如下依賴源碼分析之緩存源碼分析之緩存源碼分析是否使用這個函數用來判斷是否使用緩存。返回表示使用緩存，返回則使用或者緩存。獲取對應緩存方式的實例這個函數根據來獲取儲存了該的緩存實例。每個人心里都有一團火，路過的人只看到煙?！吨翋坭蟾摺ば强罩i》本文為讀 lodash 源碼的第八篇，后續文章會更新到這個倉庫中，歡迎 star：pocket-...

HitenDev 2019-08-06 13:27 評論0 收藏0
lodash源碼分析之緩存方式的選擇

摘要：接口設計同樣實現了跟一致的數據管理接口，如下依賴源碼分析之緩存源碼分析之緩存源碼分析是否使用這個函數用來判斷是否使用緩存。返回表示使用緩存，返回則使用或者緩存。獲取對應緩存方式的實例這個函數根據來獲取儲存了該的緩存實例。每個人心里都有一團火，路過的人只看到煙?！吨翋坭蟾摺ば强罩i》本文為讀 lodash 源碼的第八篇，后續文章會更新到這個倉庫中，歡迎 star：pocket-...

AdolphLWQ 2019-08-22 13:57 評論0 收藏0
lodash源碼分析之Hash緩存

摘要：只接收一個二維數組作為參數，調用方式如下其中子項中的第一項會作為，第二項是需要緩存的值。實例化的結果如下緩存的數量儲存在的對象中。的作用是清空緩存，因此需要將重置為。將緩存的數據設置為空對象。因為在緩存中是以來表示的，因此遇到值為時，返回。在那小小的夢的暖閣，我為你收藏起整個季節的煙雨?！宸颉鹅`河》本文為讀 lodash 源碼的第四篇，后續文章會更新到這個倉庫中，歡迎 sta...

cartoon 2019-08-06 13:28 評論0 收藏0
lodash源碼分析之Hash緩存

摘要：只接收一個二維數組作為參數，調用方式如下其中子項中的第一項會作為，第二項是需要緩存的值。實例化的結果如下緩存的數量儲存在的對象中。的作用是清空緩存，因此需要將重置為。將緩存的數據設置為空對象。因為在緩存中是以來表示的，因此遇到值為時，返回。在那小小的夢的暖閣，我為你收藏起整個季節的煙雨?！宸颉鹅`河》本文為讀 lodash 源碼的第四篇，后續文章會更新到這個倉庫中，歡迎 sta...

justjavac 2019-08-21 18:34 評論0 收藏0