Vuejs 中常用的工具函数 柔情只为你懂 2021-09-07 16:00 459阅读 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 中 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]; } } 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 > 将一个对象数组合并为单个对象 function toObject (arr) { var res = { }; for (var i = 0; i < arr.length; i++) { if (arr[i]) { extend(res, arr[i]) } } return res } 这里只是挑选了一些会常用的工具函数,还有其他的方法可以移步到 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
还没有评论,来说两句吧...