摘要:愚人碼頭注即創建一個新數組,這個數組中的值,為第一個數字參數排除了給定數組中的值。如果迭代函數顯式的返回,迭代會提前退出。如此方法類似于,除了它允許指定迭代函數結果如何排序。
loadsh簡介
??????Lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。
Lodash 的模塊化方法 非常適用于:
遍歷 array、object 和 string
對值進行操作和檢測
創建符合功能的函數
1、 lodash的引用
npm i -g npm npm i --save lodash import _ from "lodash"
2、 lodash的常用方法
數組 Array
_.difference(array, [values])
創建一個具有唯一array值的數組,每個值不包含在其他給定的數組中。(愚人碼頭注:即創建一個新數組,這個數組中的值,為第一個數字(array 參數)排除了給定數組中的值。)該方法使用 SameValueZero做相等比較。結果值的順序是由第一個數組中的順序確定。
如: _.difference([2, 1, 1994], [4, 2]); // => [1, 1994]
_.remove(array, [predicate=_.identity])
移除數組中predicate(斷言)返回為真值的所有元素,并返回移除元素組成的數組。predicate(斷言) 會傳入3個參數: (value, index, array)。
如:var array = [1, 2, 3, 4]; var evens = _.remove(array, function(n) { return n % 2 == 0; }); console.log(array); // => [1, 3] console.log(evens); // => [2, 4]
_.uniq(array)
創建一個去重后的array數組副本。使用了 SameValueZero 做等值比較。只有第一次出現的元素才會被保留。
如:_.uniq([2, 1, 2]); // => [2, 1]
_.last(array)
獲取array中的最后一個元素。
如:_.last([1, 2, 3]); // => 3
集合 Collection
_.forEach(collection, [iteratee=_.identity])
調用 iteratee 遍歷 collection(集合) 中的每個元素, iteratee 調用3個參數: (value, index|key, collection)。 如果迭代函數(iteratee)顯式的返回 false ,迭代會提前退出。
如:_([1, 2]).forEach(function(value) { console.log(value); }); // => Logs `1` then `2`. _.forEach({ "a": 1, "b": 2 }, function(value, key) { console.log(key); }); // => Logs "a" then "b" (iteration order is not guaranteed).
_.filter(collection, [predicate=_.identity])
遍歷 collection(集合)元素,返回 predicate(斷言函數)返回真值 的所有元素的數組。 predicate(斷言函數)調用三個參數:(value, index|key, collection)。
如:var users = [ { "user": "barney", "age": 36, "active": true }, { "user": "fred", "age": 40, "active": false } ]; _.filter(users, function(o) { return !o.active; }); // => objects for ["fred"] // The `_.matches` iteratee shorthand. _.filter(users, { "age": 36, "active": true }); // => objects for ["barney"] // The `_.matchesProperty` iteratee shorthand. _.filter(users, ["active", false]); // => objects for ["fred"] // The `_.property` iteratee shorthand. _.filter(users, "active"); // => objects for ["barney"]
_.groupBy(collection, [iteratee=_.identity])
創建一個對象,key 是 iteratee 遍歷 collection(集合) 中的每個元素返回的結果。 分組值的順序是由他們出現在 collection(集合) 中的順序確定的。每個鍵對應的值負責生成 key 的元素組成的數組。iteratee 調用 1 個參數: (value)。
如:var users = [ { "user": "barney", "age": 36, "active": true }, { "user": "fred", "age": 40, "active": false } ]; _.groupBy(users, "user"); // => {"barney":[{"user":"barney","age":36,"active":true}],"fred":[{"user":"fred","age":40,"active":false}]}
_.includes(collection, value, [fromIndex=0])
檢查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一個字符串,那么檢查 value(值,子字符串) 是否在字符串中, 否則使用 SameValueZero 做等值比較。 如果指定 fromIndex 是負數,那么從 collection(集合) 的結尾開始檢索。
如:_.includes([1, 2, 3], 1); // => true _.includes([1, 2, 3], 1, 2); // => false _.includes({ "user": "fred", "age": 40 }, "fred"); // => true _.includes("pebbles", "eb"); // => true
_.orderBy(collection, [iteratees=[_.identity]], [orders])
此方法類似于_.sortBy,除了它允許指定 iteratee(迭代函數)結果如何排序。 如果沒指定 orders(排序),所有值以升序排序。 否則,指定為"desc" 降序,或者指定為 "asc" 升序,排序對應值。
如:var users = [ { "user": "fred", "age": 48 }, { "user": "barney", "age": 34 }, { "user": "fred", "age": 40 }, { "user": "barney", "age": 36 } ]; // 以 `user` 升序排序 再 `age` 以降序排序。 _.orderBy(users, ["user", "age"], ["asc", "desc"]); // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]]
_.sortBy(collection, [iteratees=[_.identity]])
創建一個元素數組。 以 iteratee 處理的結果升序排序。 這個方法執行穩定排序,也就是說相同元素會保持原始排序。 iteratees 調用1個參數: (value)。
如:var users = [ { "user": "fred", "age": 48 }, { "user": "barney", "age": 36 }, { "user": "fred", "age": 40 }, { "user": "barney", "age": 34 } ]; _.sortBy(users, function(o) { return o.user; }); // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]] _.sortBy(users, ["user", "age"]); // => objects for [["barney", 34], ["barney", 36], ["fred", 40], ["fred", 48]] _.sortBy(users, "user", function(o) { return Math.floor(o.age / 10); }); // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]]
_.debounce(func, [wait=0], [options={}])
創建一個 debounced(防抖動)函數,該函數會從上一次被調用后,延遲 wait 毫秒后調用 func 方法。 debounced(防抖動)函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。 可以提供一個 options(選項) 對象決定如何調用 func 方法,options.leading 與|或 options.trailing 決定延遲前后如何觸發(愚人碼頭注:是 先調用后等待 還是 先等待后調用)。 func 調用時會傳入最后一次提供給 debounced(防抖動)函數 的參數。 后續調用的 debounced(防抖動)函數返回是最后一次 func 調用的結果。
注意: 如果 leading 和 trailing 選項為 true, 則 func 允許 trailing 方式調用的條件為: 在 wait 期間多次調用防抖方法。
如果 wait 為 0 并且 leading 為 false, func調用將被推遲到下一個點,類似setTimeout為0的超時。
如:// 避免窗口在變動時出現昂貴的計算開銷。 jQuery(window).on("resize", _.debounce(calculateLayout, 150)); // 當點擊時 `sendMail` 隨后就被調用。 jQuery(element).on("click", _.debounce(sendMail, 300, { "leading": true, "trailing": false })); // 確保 `batchLog` 調用1次之后,1秒內會被觸發。 var debounced = _.debounce(batchLog, 250, { "maxWait": 1000 }); var source = new EventSource("/stream"); jQuery(source).on("message", debounced); // 取消一個 trailing 的防抖動調用 jQuery(window).on("popstate", debounced.cancel);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100516.html
摘要:以及的不同之處原文譯者我并不是一個包管理器的專家。因此如果一年后我運行,會安裝版本號為的最新版本的。這會導致循環依賴以及增加了版本不匹配的可能。從我目前收集的來看,的最初的主要目的是針對由于之前章節提及的相關行為導致的安裝的不確定性。 npm, yarn以及pnpm的不同之處 原文:Overview of differences between npm, yarn and pnpm ...
摘要:所以針對此類事件則需要進行節流,或者防抖動處理。節流判斷是否已空閑,如果在執行中,則直接函數節流二防抖對于一定時間段內的連續的函數調用,只執行一次原理其實就是一個定時器,當我們觸發一個事件時,讓這個事件延遲一會在執行。 在瀏覽器dom事件里面,一些事件會隨著用戶的操作不間斷的觸發,比如:為一個元素綁定拖拽事件,為頁面綁定resize事件(重新調整瀏覽器窗口大小),頁面滾動。如果dom操...
摘要:寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我在這里感激不盡讓我們發現美并記錄它第一次寫文章請多多包涵如有我沒有寫到的但又是一些好用的工具及 寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我...
摘要:寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我在這里感激不盡讓我們發現美并記錄它第一次寫文章請多多包涵如有我沒有寫到的但又是一些好用的工具及 寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我...
閱讀 4006·2023-04-26 02:13
閱讀 2249·2021-11-08 13:13
閱讀 2737·2021-10-11 10:59
閱讀 1737·2021-09-03 00:23
閱讀 1308·2019-08-30 15:53
閱讀 2285·2019-08-28 18:22
閱讀 3058·2019-08-26 10:45
閱讀 735·2019-08-23 17:58