underscore 工具

=============== 通知：

博主已遷至《掘金》碼字，博客園可能之後再也不更新，掘金地址：http://www.javashuo.com/article/p-hygqslqt-z.html  請多多關照！！

-------------------在此謝過！-----------

 

今天來解析一下underscore這個工具框架，如今雖然使用的人比較少，但這個小工具仍是比較適合入門級的同窗們來研究的！

我看的是1.8.3版本

1、判斷是不是對象    _.isObject()

 這裏所說的對象 包括function 和object
源碼：
　　 _.isObject = function(obj) { 　　 var type = typeof obj; 　　 return type === 'function' || type === 'object' && !!obj; 　　};
解析：
 先用typeof進行判斷，將判斷結果作判斷，若是結果等於function 或者判斷結果類型爲object 而且爲真值 （!!意爲強制轉布爾值true/false）

調用： var obj={a:1,b:2}; var str="abcd"; var arr=[1,2,3] _.isObject（obj） => true; _.isObject（str）   =>false;  _.isObject（arr）   =>true;

 

2、判斷是不是Array     _.isArray()

 

源碼：

    var nativeIsArray  = Array.isArray

　　 _.isArray = nativeIsArray || function(obj) { 　
　 return toString.call(obj) === '[object Array]'; 　
　};

解析：

 Array.isArray是js自帶的array判斷方法，先用原生的方法判斷一次，若是原生方法不存在，再用toStringe.call()方法判斷，若是爲真值，則是數組，不然不是

 

調用： var arr=[1,2,3]; var arr2='2132132'

var arr3={a:1,b:2}

console.log(_.isArray(arr),_.isArray(arr2),_.isArray(arr3))     =》true,false,false

 

3、判斷是否爲Boolean 類型 _.isBoolean()

 

源碼：
　　_.isBoolean = function(obj) { 　　 return obj === true || obj === false || toString.call(obj) === '[object Boolean]'; 　　};
解析：
 先判斷傳入值是否能夠直接轉成true或false,若是不能夠，再使用toString()判斷結果是否是布爾

 

調用： console.log(_.isBoolean(true))  =>true; console.log(_.isBoolean(13))    =>false;

 

4、判斷是不是undefined    _.isUndefined()

 

源碼：
　　_.isUndefined = function(obj) { 　　return obj === void 0; 　　};
解析：
 undefined 並不等於undefined，而void 0 的返回結果一直都會是undefined ,因此做者使用它進行判斷

調用： console.log( _.isNull(undefined)) =>true console.log( _.isUndefined(void 0))  =>true 當前傳入undefined 和 void 0 結果爲true 其餘爲false

 

5、判斷類型   toString.call()

 

經過判斷toString.call(參數)來根據結果來判斷是哪一種類型，以上的幾個判斷類型的可能是沿用這個方法而來；
 調用：
 　　toString.call("123")     =>   "[object String]"       字符串 　　toString.call(123)       =>   "[object Number]"        數字 　　toString.call(null)      =>   "[object Null]"          null 　　toString.call({a:1})     =>   "[object Object]"        對象 　　toString.call([1,5,8])   =>   "[object Array]"         數組 　　toString.call(true)      =>   "[object Boolean]"       布爾 　　toString.call(/a/g)      =>    "[object RegExp]"       正則 　　toString.call(undefined) =>   "[object undefined]"     undefined 　　toString.call(new Date()) =>  "[object Date]"          日期對象

解析：   
    這種判斷使用的是Object.prototype上的原生toString()方法判斷數據類型

 

6、判斷key是否存在於obj中 _.has()

-------------------------------------------------------------------

源碼：
　　_.has = function(obj, key) { 　　 return obj != null && hasOwnProperty.call(obj, key); 　　};

解析：
 先判斷obj是否爲null，而且調用hasOwnProperty的方法檢測key 是否存在於obj

判斷key值是否存在於obj中，用於對象中的判斷，還可經過此方法檢查其是否是同一個原型

調用： var obj={a:1,b:2}; 　　　　 console.log(_.has(obj,"a"))   =>true console.log(_.has(obj,"c"))   =>false

7、經過屬性和對象返回屬性值  _.property(key)(obj)  ；  _.propertyOf(obj)(key);

這兩個方法都是能夠返回當前obj的key對應的值

 

_.property(key)(obj) 

源碼：　
　_.property = function(key) { 　　 return function(obj) { 　　 return obj == null ? void 0 : obj[key]; 　　 }; 　　};
解析：
 當前方法傳入兩個值 一個是obj 一個是key 先判斷Obj是不是存在，是否是null,若是是 返回undefined 若是不是返回當前obje的key的值

 

調用： 　　var obj={ 　　 a:111, 　　 b:222 　　};
 　　 console.log(_.property("a")(obj));  =>111

----- _.propertyOf(obj)(key);------------------------------------------------------------------------------------------

源碼：
　　_.propertyOf = function(obj) { 　　 return obj == null ? function(){} : function(key) { 　　 return obj[key]; 　　 }; 　　};
解析：
 和上一個方法大同小異，當前判斷obj是不是null,若是是返回一個空函數，若是不是拿到key，去obj的key上去匹配

調用： 　　 var obj={ 　　 a:111, 　　 b:222 　　 };

　　　　console.log(_.property("a")(obj));  =>111

 

8、生成min,max之間的隨機數

下面咱們先來溫習一下math()的方法吧！

 　　  四捨五入：

      　　  　　Math.round(2.1)  =>2

 

   　　向下取整：

       　　 　　 Math.floor(5.8)  =>5

 

   　　向上取整：

       　　　　  Math.ceil(3.2)   =>4

 

 　　  生成0-1之間隨機數：

      　　        Math.random()

 

源碼：
　　_.random = function(min, max) { 　　　　 if (max == null) { 　　　　 max = min; 　　　　 min = 0; 　　　　 } 　　　　 return min + Math.floor(Math.random() * (max - min + 1)); 　　};

調用：
console.log(_.random(2,9)) =>生成一個隨機整數

 解析：

   當前方法傳入兩個值，在方法內判斷第二個值是否爲空，若是沒有將max的值，就將min賦給max做爲最大值，min則賦值爲0， 
  若是沒有上面的狀況，直接進行下面的方法
  （Math.random()*(max-min+1)）== 當前函數生成0到 （max-min+1)）之間的數 但並非咱們想要的 

例如 ： let min = 5； let max=10;

       那麼執行完上面第一步 咱們獲得的時候0-6之間的數字

　　　　　　Math.floor的方法將獲得的值向下取整，若是是4.8，那就拿到4，

 最後一步 min+4 將最小值與拿到的值合併 那麼咱們拿到了9，正是咱們想要的

 這個方法會生成min和max之間的整數 (包含max和min)

9、判斷是不是DOM 元素

 源碼：
  　　_.isElement = function(obj) {
  　　    return !!(obj && obj.nodeType === 1); 　　 };

 解析：
 先肯定是否傳入了值，而且判斷元素的nodeType的類型是否爲1，而後用！！強制轉布爾值
 

10、判斷是否在最大值和最小值之間

    _.isFinite = function(obj) { return isFinite(obj) && !isNaN(parseFloat(obj)); };

這裏面的這個方法，其實如今單用isFinite()就能夠判斷出來，

判斷是不是一個有限的數字,即值在：

console.log(Number.MAX_VALUE); 最大值
console.log(Number.MIN_VALUE)； 最小值

之間的，若是是返回true,若是是加「」的數字還可自動轉換，輸入最後結果

調用：

_.isFinite( "888")  => true

 _.isFinite( "aaa")  => false

 

11、獲取當前時間的時間戳（關於時間的各類方法我會單獨出一篇，敬請期待）

    _.now = Date.now || function() { return new Date().getTime(); };

 調用： console.log(_.now()) => 1499913487397

 等同於： 　　console.log(Date.now()); 　　console.log(new Date().getTime())