前端analysis | What,Why,Who,When,Where,How

《Lodash源码阅读笔记》- 需要了解的js类型判定方法

2020-02-08

前端开发，js是一个避开不了的一门技术。js的诞生为了美化交互。

js类型

  • null
  • undefined
  • boolean
  • string
  • number
  • Object
  • 引用类型(object、array、function)
  • symbol

js类型判定

null

  • 值确定，直接比较
    1
    2
    3
    function isNull(){
       return  value === null ;
    }
  • typeof不能作为唯一判断
    1
    2
    typeof null === 'object'   //true ,由于最初的设计缺陷导致
    typeof {} === 'object' //true
  • toString 
    1
    toString.call(null) === '[object Null]' //true

undefined

  • 值确定，直接比较
    1
    2
    3
     function isUndefined(value) {
      return value === undefined
    }
  • typeof 不能作为唯一标准
    1
    2
    typeof undefined === 'undefined' //true 
    typeof void 0  === 'undefined' //true
  • toString 
    1
    toString.call(undefined) === '[object Undefined]' //true

boolean

  • 值确定直接比较
1
2
3
function isBoolean(value){
  return value === true || value === false;
}

  • typeof 写法 

    1
    2
    typeof true  === 'boolean'  //true
    typeof false === 'boolean'   //true

  • toString 

    1
    toString.call(true) === '[object Boolean]' //true

  • lodash写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /**
     * Checks if `value` is classified as a boolean primitive or object.
     *
     * @since 0.1.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.
     * @example
     *
     * isBoolean(false)
     * // => true
     *
     * isBoolean(null)
     * // => false
     */
    function isBoolean(value) {
      return value === true || value === false ||
        (isObjectLike(value) && getTag(value) == '[object Boolean]')
    }

string

  • typeof

    1
    2
    3
    function isString(value){
        return typeof value === 'string'
    }

  • toString 

    1
    2
    3
    function isString(value){
        return  toString.call(value) === '[object String]';
    }

  • lodash写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /**
     * Checks if `value` is classified as a `String` primitive or object.
     *
     * @since 0.1.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is a string, else `false`.
     * @example
     *
     * isString('abc')
     * // => true
     *
     * isString(1)
     * // => false
     */
    function isString(value) {
      const type = typeof value
      return type === 'string' || (type === 'object' && value != null && !Array.isArray(value) && getTag(value) == '[object String]')
    }

number

  • typeof

    1
    2
    3
    function isNumber(value){
        return typeof value === 'number'
    }

  • toString 

    1
    2
    3
    function isNumber(value){
        return  toString.call(value) === '[object Number]';
    }

  • lodash

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /**
     * Checks if `value` is classified as a `Number` primitive or object.
     *
     * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are
     * classified as numbers, use the `Number.isFinite` method.
     *
     * @since 0.1.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is a number, else `false`.
     * @see isInteger, toInteger, toNumber
     * @example
     *
     * isNumber(3)
     * // => true
     *
     * isNumber(Number.MIN_VALUE)
     * // => true
     *
     * isNumber(Infinity)
     * // => true
     *
     * isNumber('3')
     * // => false
     */
    function isNumber(value) {
      return typeof value === 'number' ||
        (isObjectLike(value) && getTag(value) == '[object Number]')
    }

Object

  • typeof

    1
    2
    3
    function isObject(value){
        return value !== null && typeof value === 'object'
    }

  • toString 

    1
    2
    3
    function isObject(value){
        return  value !== null && toString.call(value) === '[object Object]';
    }

  • lodash 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /**
     * Checks if `value` is object-like. A value is object-like if it's not `null`
     * and has a `typeof` result of "object".
     *
     * @since 4.0.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
     * @example
     *
     * isObjectLike({})
     * // => true
     *
     * isObjectLike([1, 2, 3])
     * // => true
     *
     * isObjectLike(Function)
     * // => false
     *
     * isObjectLike(null)
     * // => false
     */
    function isObjectLike(value) {
      return typeof value === 'object' && value !== null
    }
    function isObject(value) {
      const type = typeof value
      return value != null && (type === 'object' || type === 'function')
    }

Array

  • typeof 不能用
    1
    typeof [] === 'object' //true
  • toString
    1
    toString.call([]) === '[object Array]' //true
  • Constructor
    1
    [].constructor === Array //true
  • lodash
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /**
     * Checks if `value` is array-like. A value is considered array-like if it's
     * not a function and has a `value.length` that's an integer greater than or
     * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
     *
     * @since 4.0.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
     * @example
     *
     * isArrayLike([1, 2, 3])
     * // => true
     *
     * isArrayLike(document.body.children)
     * // => true
     *
     * isArrayLike('abc')
     * // => true
     *
     * isArrayLike(Function)
     * // => false
     */
    function isArrayLike(value) {
      return value != null && typeof value !== 'function' && isLength(value.length)
    }

Function

  • typeof
    1
    typeof function(){} === 'function' //true
  • toString
    1
    toString.call(function(){}) === '[object Function]' //true
  • lodash 
    1
    2
    3
    function isFunction(value) {
      return typeof value === 'function'
    }

Symbol

  • typeof 
    1
    typeof Symbol === 'symbol' //true
  • toString
    1
    toString.call(Symbol) === '[object Symbol]' //true
  • lodash
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /**
     * Checks if `value` is classified as a `Symbol` primitive or object.
     *
     * @since 4.0.0
     * @category Lang
     * @param {*} value The value to check.
     * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
     * @example
     *
     * isSymbol(Symbol.iterator)
     * // => true
     *
     * isSymbol('abc')
     * // => false
     */
    function isSymbol(value) {
      const type = typeof value
      return type == 'symbol' || (type === 'object' && value != null && getTag(value) == '[object Symbol]')
    }
本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: js Lodash 源码 阅读笔记
← 《软技能》- 我的域名备案的那些事儿 《GitHub》-xxx.github.io自定义域名配置 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏