lodash的get方法

paraller 發(fā)布于2019-08-22 18:40 / 2261人閱讀

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

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

get方法源碼鏈接

下邊是它的使用說明

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

根據(jù)object對象的path路徑獲取值。如果解析值是undefined，就返回一個默認(rèn)的值(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"

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

這個get方法事實上等同于我們?nèi)bject上的某個屬性的值。object["a"][0]["b"]["c"] 或者 object.a[0].b.c.

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

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

lodash的實現(xiàn)如下

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的方法，就能很輕易的判斷它返回的應(yīng)該是一個路徑相關(guān)的數(shù)組。

比如

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

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

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

確認(rèn)path中有確定想取的值。否則就是取不到值，undefined。

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

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

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

isKey(value, object) 應(yīng)該是用來判斷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)) { // 數(shù)組，直接返回false
    return false;
  }
  var type = typeof value; // 對應(yīng)的集中類型直接返回true，看到?jīng)]，沒有字符串，沒有字符串。如果你考慮到
  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"規(guī)則的字符串轉(zhuǎn)換成數(shù)組路徑["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;
});

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

至于memoize下一篇再說吧。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96066.html

發(fā)表評論

登陸后可評論

0條評論

paraller

男|高級講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點# URL格式的基礎(chǔ)知識

閱讀 3308·2021-11-23 09:51
GreenCloudVPS八周年促銷，VPS年付五折起，10G口大盤雞年付$30起

閱讀 2931·2021-10-28 09:33
小區(qū)物業(yè)管理系統(tǒng)，基于Spring boot微服務(wù)，包含小程序源碼分享

閱讀 891·2021-10-08 10:04
主機流水號什么意思-電腦主機號是什么？

閱讀 3698·2021-09-22 15:13
sass和compass基礎(chǔ)用法

閱讀 1025·2019-08-30 15:55
混合開發(fā)遇到的坑：倒計時在ios中不生效

閱讀 2915·2019-08-30 15:44
CSS Background-Size 屬性小記

閱讀 574·2019-08-30 13:04
js動畫效果總結(jié)

閱讀 2945·2019-08-30 12:56

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

lodash的get方法

相關(guān)文章

Webpack 最佳實踐總結(jié)(三)

Webpack 最佳實踐總結(jié)(三)

lodash源碼分析之緩存方式的選擇

lodash源碼分析之緩存方式的選擇

lodash源碼分析之Hash緩存

lodash源碼分析之Hash緩存

發(fā)表評論

0條評論

paraller

男|高級講師

TA的文章

#yyds干貨盤點# URL格式的基礎(chǔ)知識

GreenCloudVPS八周年促銷，VPS年付五折起，10G口大盤雞年付$30起

小區(qū)物業(yè)管理系統(tǒng)，基于Spring boot微服務(wù)，包含小程序源碼分享

主機流水號什么意思-電腦主機號是什么？

sass和compass基礎(chǔ)用法

混合開發(fā)遇到的坑：倒計時在ios中不生效

CSS Background-Size 屬性小記

js動畫效果總結(jié)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

lodash的get方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！