zoukankan      html  css  js  c++  java
  • underscore 工具

    =============== 通知:

    博主已迁至《掘金》码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a86b  请多多关照!!

    -------------------在此谢过!-----------

    今天来解析一下underscore这个工具框架,现在虽然使用的人比较少,但这个小工具还是比较适合入门级的同学们来研究的!

    我看的是1.8.3版本

    一、判断是否是对象    _.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;

    二、判断是否是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
     

    三、判断是否为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;

    四、判断是否是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

    五、判断类型   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()方法判断数据类型

    六、判断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

    七、通过属性和对象返回属性值  _.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

    八、生成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)
    九、判断是否是DOM 元素
     源码:
      _.isElement = function(obj) {    return !!(obj && obj.nodeType === 1);    };

    解析:
    先确定是否传入了值,并且判断元素的nodeType的类型是否为1,然后用!!强制转布尔值

    十、判断是否在最大值和最小值之间
    
    
        _.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
    
    
    
    
    
    十一、获取当前时间的时间戳(关于时间的各种方法我会单独出一篇,敬请期待)
    
    
        _.now = Date.now || function() {
              return new Date().getTime();
        };
    
    
        调用:
           console.log(_.now())  => 1499913487397

    等同于:   console.log(Date.now());   console.log(new Date().getTime())













  • 相关阅读:
    React 高阶组件
    React Context(执行上下文)
    解决背景图片半透明(rgba)兼容性
    js基础复习---数组操作
    js基础复习---字符串操作
    escape()、encodeURI()、encodeURIComponent()区别详解(转)
    form data和request payload的区别(转)
    关于把时间搓转化为时间
    关于js 获取本地当前时间问题
    关于html 头部meta标签。
  • 原文地址:https://www.cnblogs.com/christineqing/p/7495117.html
Copyright © 2011-2022 走看看