摘要:直接看源碼如果原生支持就用原生的,否知自己實現一個結尾暫時就介紹這些看起來并不起眼的工具函數,在以后的文章和源碼分析中遇到其他的會陸續更新到這篇文章中來。
前言
原文鏈接
源碼地址
今天想寫一篇關于下劃線這個庫中一些小工具函數的故事,我們都聽過一句話,一個成功的男人背后一定有一個了不起的女人(?,其實也不一定,也許還有男人呢),那么一個經久不衰,為程序猿們所稱道的庫,框架的背后自然也有不少看起來不起眼,甚至你都懶得正眼瞧他的"小工具"存在。正是這些背后的無名英雄為類庫和框架的形成,貢獻了不可磨滅的力量。
第一篇文章說了undefined,那我們也從undefined開始。
_.isUndefined(obj)判斷obj等于undefined與否,是就返回true,反之false。
示例
let a = null let b = window.b let c = () => {} let d = undefined let e = void 0 let f = "qianlongo" let g console.log(_.isUndefined(a)) // false console.log(_.isUndefined(b)) // true console.log(_.isUndefined(c())) // true console.log(_.isUndefined(d)) // true console.log(_.isUndefined(e)) // true console.log(_.isUndefined(f)) // false console.log(_.isUndefined(g)) // true
對于一個對象上不存在的屬性
對于一個沒有返回值的函數
對于聲明和卻沒有賦值的標量
對于直接賦值為undefined(非ie8以下)或者void 0
_.isUndefined都會返回true,其他情況全都是返回false
需要特別注意的是,有時候我們會這樣判斷一個變量是都存在,a = null
a = undefined都可以通難過判斷。
if (a == null) { }
但是_.isUndefined用的是三等強制判斷,所以null是通過不了的
_.isUndefined = function(obj) { return obj === void 0; }_.isNull(obj)
判斷obj等于null與否,是就返回true,反之false。
這個沒啥說的,只有obj輸入null,結果輸出才為true,因為內部判斷也是用的三等判斷,不僅值要相等,類型也要相同。
_.noConflict()防止全局變量沖突的一種常見解決方案,將_的使用權交換給上一個占用_坑位的人。
示例
console.log(_)
遇見重名的事不新鮮對吧,全國有多少個小明啊,我們從小到大課本里到處都是小明和小紅。
這里后面引入的underscore.js把lodash.js給覆蓋了,因為兩個庫都想占用全局的_,結果后來者居上。
如果不想lodash被覆蓋怎么辦,總的有個先來后到啊。只需要調用noConflict方法便將占著的_坑位重新歸還給了lodash,而之后我們用my_即可訪問所有underscore.js的方法。
let my_ = _.noConflict()
接下來我們看下源碼怎么實現的
var previousUnderscore = _ // 在源碼的頂部,保存了前一個占著_坑位的人 _.noConflict = function() { root._ = previousUnderscore; // 將_重新賦值給前一個占著_坑位的人 return this; // 并將_返回以供后續使用 };_.identity(value)
返回與傳入的參數value一樣的值
這個函數看起來沒有什么軟用,但是在后面能夠起非常大的作用,也正體現了,工具雖小,能量卻大
我們先來簡單地看下它的應用,在后續的源碼分析中遇到再仔細講解。
過濾一個數組中為"真"的值
let arr = ["a", "b", null, "false", 0, "c", "", false, {}] let arr2 = arr.filter(_.identity) // ["a", "b", "false", "c", {}]
復制數組
let arr = ["a", "b", null, "false", 0, "c", "", false, {}] let arr2 = arr.map(_.identity) // ["a", "b", null, "false", 0, "c", "", false, {}]_.constant(value)
返回一個函數fn,fn執行之后再返回當初傳進來的value
我們來看一段github上關于下劃線的一個issue,挺有意思的。也許我們比較難列舉出這個函數的應用,但是至少下面這個例子是比較好的。
let age = 18 let cacheAge = _.constant(age) age += 10 console.log(cacheAge()) // 18
為什么可以緩存住18,我們看下源碼大概就知道了,源碼創建了常見的閉包,閉包常見的作用之一就是讓外面通過函數調用的形式去訪問內部的變量,以及在一定的生命周期內,緩存住變量。
_.constant = function(value) { return function() { return value; }; };_.noop()
一個空函數,啥也不干,調用了就返回undefined給你,可以作為默認的回調參數
又是一個看起來啥用都沒有的函數,然而事實真的是這樣嗎?請移步以下幾個鏈接
What is the use of jQuery.noop() function?
What is the JavaScript convention for no operation?
例子不用多,總結一下
1. 給一個變量賦值為一個空函數,在后續的調用中你不需要去檢測他是不是undefined
2. 為什么不給需要的變量重新設置一個空函數? _.noop已經創建了一個函數空間,讓其他變量也指向這個函數,可以減少js中不必要的花銷
_.times(n, iteratee, context)調用給定的iteratee迭代函數n次,iteratee每次都接收一個索引值index,最后返回一個數組,數組中存著這幾次iteratee的回調結果
示例
let count = 0 let result = _.times(6, (i) => { console.log(++count) return `hello:${i}` }) console.log(result) // ["hello:0", "hello:1", "hello:2", "hello:3", "hello:4", "hello:5"] console.log(count) // 6
可以看到傳進去的函數執行執行了6次,并將對應的每次執行的結果存在了數組中返回。
_.random(min, max)返回一個[min, max]之間的隨機整數,如果沒有傳max,則區間是[0, min]
示例
let num1 = _.random(10, 20) // maybe 13 or other let num2 = _.random(10) // maybe 6 or other
源碼
_.random = function(min, max) { if (max == null) { // 如果只有一個參數 max = min; // 就把第一個參數當最大值 min = 0; // 0作為最小值 } return min + Math.floor(Math.random() * (max - min + 1)); // 試想我們要求取[4, 10)之間的某個整數 // (min) 就是保證最小值可以取到4 // (max - min + 1) => (10 - 4 + 1) => 7 // Math.random() * 7 => [0, 1) * 7 => [0, 7) // Math.floor([0, 7)) => 最小取0, 最大取6 // 最后變成 4 + [0, 6] => [4, 10] };
當然啦,如果你傳入非整數,或者max < min的數,那結果就有可能不能按照預期出現了
_.uniqueId(prefix)生成唯一的id,如果prefix不存在則直接將數字id返回,這個函數在給dom添加唯一的id的時候比較有用。
let pre = "qianlongo" let id1 = _.uniqueId() // 1 let id2 = _.uniqueId(pre) // qianlongo2
源碼
var idCounter = 0; _.uniqueId = function(prefix) { var id = ++idCounter + ""; // 轉成字符串 return prefix ? prefix + id : id; };_.now()
一個優化的方式來獲得一個當前時間的整數時間戳。
直接看源碼
_.now = Date.now || function() { // 如果原生支持now就用原生的,否知自己實現一個 return new Date().getTime(); };結尾
暫時就介紹這些看起來并不起眼的工具函數,在以后的文章和源碼分析中遇到其他的會陸續更新到這篇文章中來。寫一篇文章真夠耗費時間的,陸陸續續用了好幾個小時才寫這么點。
不介意的話,在文章開頭的源碼地址那里點一個小星星吧?
不介意的話,在文章開頭的源碼地址那里點一個小星星吧?
不介意的話,在文章開頭的源碼地址那里點一個小星星吧?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86984.html
摘要:直接看源碼如果原生支持就用原生的,否知自己實現一個結尾暫時就介紹這些看起來并不起眼的工具函數,在以后的文章和源碼分析中遇到其他的會陸續更新到這篇文章中來。 前言 原文鏈接 源碼地址 今天想寫一篇關于下劃線這個庫中一些小工具函數的故事,我們都聽過一句話,一個成功的男人背后一定有一個了不起的女人(?,其實也不一定,也許還有男人呢),那么一個經久不衰,為程序猿們所稱道的庫,框架的背后自然也有...
摘要:直接看源碼如果原生支持就用原生的,否知自己實現一個結尾暫時就介紹這些看起來并不起眼的工具函數,在以后的文章和源碼分析中遇到其他的會陸續更新到這篇文章中來。 前言 原文鏈接 源碼地址 今天想寫一篇關于下劃線這個庫中一些小工具函數的故事,我們都聽過一句話,一個成功的男人背后一定有一個了不起的女人(?,其實也不一定,也許還有男人呢),那么一個經久不衰,為程序猿們所稱道的庫,框架的背后自然也有...
摘要:夏天加快開發速度的快捷操作干貨盤點快捷方式你可以用做更多神奇的事情選項返回這是您在中加快開發速度的魔杖。加快開發速度的快捷操作干貨盤點選項卡不喜歡小部件用魔術棒取下它。 Flutter — 加快開發速度的 IDE 快捷方式上一個關于??vscode 的插件??推薦大家看的過癮不,今天繼續給大家帶來一些關于android s...
摘要:引言日常工作中再牛逼的大佬都不敢說自己的代碼是完全沒有問題的,既然有問題,那就也就有調試,說到調試工具,大家可能對于還有遠程調試等比較熟悉,甚至有些是我可能也沒有用過的這里噴一句吧,誰都別給我提啊,那個不叫調試工具,那叫坑爹神器,話說最近不 showImg(https://segmentfault.com/img/bVbk8zn?w=1008&h=298); 引言 ? 日常工作中再牛...
閱讀 2458·2021-09-28 09:36
閱讀 3597·2021-09-22 15:41
閱讀 4383·2021-09-04 16:45
閱讀 1956·2019-08-30 15:55
閱讀 2847·2019-08-30 13:49
閱讀 825·2019-08-29 16:34
閱讀 2370·2019-08-29 12:57
閱讀 1679·2019-08-26 18:42