前端analysis | 3w & 1h

《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]')
    }
使用支付宝打赏
使用微信打赏

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