工具函数

目录 src/shared/utils
isUndef 用来判断参数是否为undefined 或 null

export function isUndef (v: any): boolean %checks {
  return v === undefined || v === null
}

isDef 用来判断参数既不是undefined 也不是 null

export function isDef (v: any): boolean %checks {
  return v !== undefined && v !== null
}

isTrue 判断参数是否全等与true 参数不进行类型转换
isFalse 同理

export function isTrue (v: any): boolean %checks {
  return v === true
}
export function isFalse (v: any): boolean %checks {
  return v === false
}

isPrimitive 判断参数是否为基本数据类型不包含 undefined 和 null

export function isPrimitive (value: any): boolean %checks {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

isObject 判断参数是否为对象不包含null 当参数为 Array Function Object Set Map RegExp Date 等

export function isObject (obj: mixed): boolean %checks {
  return obj !== null && typeof obj === 'object'
}

_toString 指向Object.prototype.toString方法

const _toString = Object.prototype.toString

toRawType 返回参数类型实际调用的就是 Object.prototype.toString.call(value) 然后对返回值进行了截取

export function toRawType (value: any): string {
  return _toString.call(value).slice(8, -1)
}

isPlainObject 返回参数是否为对象仅当使用对象字面量创建、 new Object() 、new 构造函数、Object.create() 创建时返回 true 数组函数等都返回false
isRegExp 返回参数是否为正则

export function isPlainObject (obj: any): boolean {
  return _toString.call(obj) === '[object Object]'
}

export function isRegExp (v: any): boolean {
  return _toString.call(v) === '[object RegExp]'
}

isValidArrayIndex 检测数组中是否存在元素可能有人会想为什么不使用length > 0 判断呢实际上无论是数组、对象还是函数都可以手动添加一个length属性直接拿length判断会有问题

export function isValidArrayIndex (val: any): boolean {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

isPromise 顾名思义检测参数是否为promise

export function isPromise (val: any): boolean {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

toString 对参数进行序列化 null 转化为空字符串数组和对象使用json.stringify转换其余类型使用String(转换)

export function toString (val: any): string {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}

toNumber 将参数转化为number 首先使用parseFloat进行转换如果结果为NaN 则返回参数本身否则返回转换后的数字

export function toNumber (val: string): number | string {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

remove 移除数组中传入的某一项对于基本类型使用indexof返回索引对于引用类型传入的时地址也可以使用indexOf进行判断

export function remove (arr: Array<any>, item: any): Array<any> | void {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

hasOwnProperty 定义变量指向 Object.prototype.hasOwnProperty 只会检查对象的自有属性，对象原形上的属性其不会检测
hasOwn 判断对象自有属性中是否又当前传入的键（不包含继承的属性或方法）

const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj: Object | Array<*>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}

polyfillBind 为手动实现的bind版本如果浏览器支持bind方法则使用原生的否则使用用 apply 和 call实现的版本

function polyfillBind (fn: Function, ctx: Object): Function {
  function boundFn (a) {
    const l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }

  boundFn._length = fn.length
  return boundFn
}

function nativeBind (fn: Function, ctx: Object): Function {
  return fn.bind(ctx)
}

export const bind = Function.prototype.bind
  ? nativeBind
  : polyfillBind

toArray 将伪数组转换为数组

export function toArray (list: any, start?: number): Array<any> {
 start = start || 0
 let i = list.length - start
 const ret: Array<any> = new Array(i)
 while (i--) {
   ret[i] = list[i + start]
 }
 return ret
}

extend 将一个对象属性复制到另一个对象

export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

toObject 将数组对象中的属性合并到同一个对象 [{a: 1}, {b: 2}] => {a: 1, b: 2}

export function toObject (arr: Array<any>): Object {
  const res = {}
  for (let i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i])
    }
  }
  return res
}

以上为vue2 utils文件所提供的工具函数我们只需要了解大致意思即可后面在源码解析中会大量使用这里的方法。我也是个小白刚开始看源码不久大家一起共勉吧！！！加油

vue源码解析1：vue2工具函数解析

工具函数