Vuejs 中常用的工具函数

柔情只为你懂 2021-09-07 16:00 505阅读 0赞

1.  isUndef

> 判断参数是否是 undefined 或者是 null

function isUndef (v) { 
        return v === undefined || v === null
    }

1.  isDef

> 判断参数已定义且不为空

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

1.  isTrue

> 判断参数是否为 true

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

1.  isFalse

> 判断参数是否为 false

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

1.  isPrimitive

> 判断参数是否是原始类型的值

function isPrimitive(v) { 
        return (
            typeof v === 'string' || 
            typeof v === 'number' || 
            typeof v === 'symbol' || 
            typeof v === 'boolean'
        )
    }

1.  isObject

> 是否是对象类型

function isObject (obj) { 
        return obj !== null && typeof obj === 'object'
    }

1.  toRawType

> 准确获取基本数据类型和引用数据类型

function toRawType (v) { 
        return _toString.call(v).slice(8, -1)
    }

1.  isPlainObject

> 判断是否是普通对象

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

1.  isRegExp

> 判断是否是正则表达式

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

1.  isValidArrayIndex

> 检查参数是否是有效的数组索引

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

1.  isPromise

> 判断是否是 Promise 对象

function isPromise (v) { 
        return (
            isDef(v) && 
            typeof v.then === 'function' &&
            typeof v.catch === 'function'
        )
    }

1.  toString

> 将参数转为字符串

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

1.  toNumber

> 将参数转为数字，如果转换失败，则返回原始字符串

function toNumber(v) { 
        var n = parseFloat(v);
        return isNaN(n) ? v : n
    }

1.  makeMap

> 创建一个 Map 数据，并返回一个函数，以检查某个键是否在这个 Map 中

Vue 源码里以此为基础又新建了两个检查属性和内置标记的方法：

/** * Check if a tag is a built-in tag. */
    var isBuiltInTag = makeMap('slot,component', true);
    
    /** * Check if an attribute is a reserved attribute. */
    var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');

1.  remove

> 从一个数组中删除某一项

function remove (arr, item) { 
        if (arr.length) { 
            var index = arr.indexOf(item);
            if (index > -1) { 
                return arr.splice(index, 1)
            }
        }
    }

1.  hasOwn

> 检查对象是否具有某属性

function hasOwn (obj, key) { 
        return hasOwnProperty.call(obj, key)
    }

1.  toArray

> 将类数组转为数组

function toArray (list, start) { 
        start = start || 0;
        var i = list.length - start;
        var ret = new Array(i);
        while (i--) { 
            ret[i] = list[i + start];
        }
        return ret
    }

1.  \_toString

> 获取值的原始类型字符串

const _toString = Object.prototype.toString;

1.  hasOwnProperty

> 检查对象是否具有某属性

const hasOwnProperty = Object.prototype.hasOwnProperty;

1.  extend

> 将属性合并到目标对象中去

function extend (to, _from) { 
        for (var key in _from) { 
            to[key] = _from[key];
        }
        return to
    }

1.  toObject

> 将一个对象数组合并为单个对象

这里只是挑选了一些会常用的工具函数，还有其他的方法可以移步到 Vue 源码查看。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/ec92b95382e34d53854f76d4c4eb4d09.png