Vue 2 源码中的工具函数 - (一、判断型函数)

一、判断型函数

1. emptyObject

• Object.freeze({}); 冻结对象，即对象的第一层不能修改。

var emptyObject = Object.freeze({});

2. isUndef 判断变量是 未定义

function isUndef (v) {
    return v === undefined || v === null
}
​
eg:
isUndef(undefined)   
// true
isUndef(null)        
// true
isUndef(123)         
//false
isUndef('hello')     
// false

3. isDef 判断变量是 已定义

• 和上述判断正好相反。

 function isDef (v) {
    return v !== undefined && v !== null
 }

4. isTrue 判断变量是否未true。

function isTrue (v) {
    return v === true
}

5. isFalse 判断变量是否未false。

function isFalse (v) {
    return v === false
}

6. isPrimitive 判断变量试是否是 原始数据类型

• primitive: 原始，初始；

原始数据类型： string number symbol boolean

 function isPrimitive (value) {
    return (
      typeof value === 'string' ||
      typeof value === 'number' ||
      // $flow-disable-line
      typeof value === 'symbol' ||
      typeof value === 'boolean'
    )
  }
​
eg:
isPrimitive('12')
// true
isPrimitive(12)
// true
isPrimitive(false)
// true
isPrimitive([])
// false
isPrimitive({})
// false

7. isObject 判断是否是一个对象 || 数组 类型

• 不是严格判断 变量是否为object。

function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}
​
eg：
isObject({x: 123})
// true
isObject([1,2,3])
// true
isObject(function() {})
// false
isObject('')
// false
isObject(123)
// false

8. isPlainObject 判断是否为 纯对象

function isPlainObject (obj) {
  return _toString.call(obj) === '[object Object]'
}
​
eg:
isPlainObject({})
// true
isPlainObject([])
// false
isPlainObject('')
// false

9. toRawType 获取原始数据类型。

Tip ：Object.prototype.toString()， 表示返回一个表示该对象的字符串

• 每个object都会有一个toString()方法，默认返回的是 [object type]，type 是当前obj的类型。

  let obj = { name: 123 };
  ​
  obj.toString()  
  // [object Object]

• 如果想重写obj上的默认toString()方法，可以

  obj.prototype.toString = function resetToString () {
      return hello ${this.name}
  }

• 使用 Object.prototype.toString 结合 call 或 apply 进行类型判断

  Object.prototype.toString.call(new Date)  
  // '[object Date]'
  Object.prototype.toString.call(Math)  
  // '[object Math]'
  Object.prototype.toString.call(undefined)  
  // '[object Undefined]'
  Object.prototype.toString.call(null)  
  // '[object Null]'

参考：Object.prototype.toString() mdn

• toRawType 得到val的类型

  Object.prototype.toString.call(val).slice(8, -1)

10. isRegExp 判断是否是正则表达式

function isRegExp (v) {
  return _toString.call(v) === '[object RegExp]'
}
​
eg:
isRegExp(/hello/)
// true

11. isValidArrayIndex 判断是否是可用的数组索引值

function isValidArrayIndex (val) {
  var n = parseFloat(String(val));
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

parseFloat : 解析一个参数（必要时先转换为字符串）并返回一个浮点数。parseFloat mdn

isFinite : 判断被传入的参数值是否为一个有限数值。 isFinite mdn

parseFloat('hello')
// NaN
parseFloat(12.34)
// 12.34
isFinite(100)
// true
isFinite(10/3)
// true
isFinite('0')
// true
isFinite(2e12)
// true
isFinite(Infinity)
// false

12. isPromise 判断是否是 promise

function isPromise (val) {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}
​
eg:
const test = new Promise((resolve, reject) => {
    resolve('hello world')
})
​
isPromise(test)
// true

13. makeMap

• 输入一个以 , 分割的字符串，生成一个map对象；

• 输出一个检测key值不在map中的函数；

• expectsLowerCase: 是否要转化为小写

  function makeMap (
   str,
   expectsLowerCase
  ) {
      var map = Object.create(null);
      var list = str.split(',');
      for (var i = 0; i < list.length; i++) {
          map[list[i]] = true;
      }
      return expectsLowerCase
          ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
  }

14. isBuiltInTag 是否是内置的tag

var isBuiltInTag = makeMap('slot,component', true);
​
eg:
isBuiltInTag('slot') // true
isBuiltInTag('component') // true
isBuiltInTag('Slot') // true
isBuiltInTag('Component') // true

15. isReservedAttribute 查看这个属性是否存在

var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');
​
isReservedAttribute('key') // true
isReservedAttribute('ref') // true
isReservedAttribute('slot') // true
isReservedAttribute('slot-scope') // true
isReservedAttribute('is') // true
isReservedAttribute('IS') // undefined  大小写

更多分享可以关注公众号：前端怪咖