在项目中经常能够遇到对象/字段/字符串/数组 需要校验
**比如:**是否属于对象,是否数组长度为空,判断项是否存在数组中,字段是不是为空的情况
优先说明:该文章指在通用,不一定是项目代码格式化最优解
一、通用方法代码:
const util = {
/**
* 判断是否为空
* @param {*} obj
*/
isEmpty: function (obj, allowBlank = false) {
if (util.isNull(obj)) return true
if (util.isArray(obj)) return obj.length === 0
if (util.isString(obj)) return (!(allowBlank || obj.length > 0))
if (util.isObject(obj)) return util.isEmptyObject(obj)
for (var key in obj)
if (obj.hasOwnProperty(key)) return false
return obj === undefined || (!allowBlank ? obj === '' : false)
},
/**
* 判断是否不为空
* @param {*} obj
*/
isNotEmpty: function (obj, allowBlank = false) {
return !util.isEmpty(obj, allowBlank)
},
/**
* 判断是否为空对象
* @param {*} obj
*/
isEmptyObject: function (obj) {
if (!obj) return true
for (const name in obj) {
return false
}
return true
},
/**
* 判断是否为不空对象
* @param {*} obj
*/
isNotEmptyObject: function (obj) {
return util.isNotEmptyObject(obj)
},
/**
* 是否是对象
* @param {*} input
*/
isObject: function (input) {
return Object.prototype.toString.call(input) === '[object Object]'
},
/**
* 是否是数组
* @param {*} input
*/
isArray: function (input) {
return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]'
},
isDate: function (input) {
return input instanceof Date || Object.prototype.toString.call(input) === '[object Date]'
},
isNumber: function (input) {
return input instanceof Number || Object.prototype.toString.call(input) === '[object Number]'
},
isString: function (input) {
return input instanceof String || Object.prototype.toString.call(input) === '[object String]'
},
isBoolean: function (input) {
return typeof input === 'boolean'
},
isFunction: function (input) {
return typeof input === 'function'
},
isNull: function (input) {
return input === undefined || input === null
},
isValidNumber: function (t) {
return typeof t === 'number' && !isNaN(t) && isFinite(t)
},
isValueNumber: function (val) {
const regPos = /^\d+(\.\d+)?$/ // 非负浮点数
const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
if (regPos.test(val) || regNeg.test(val)) {
return true
} else {
return false
}
},
isPlainObject: function (obj) {
if (obj && Object.prototype.toString.call(obj) === '[object Object]' && obj.constructor === Object && !hasOwnProperty.call(obj, 'constructor')) {
var key
for (var k in obj) {
key = k
}
return key === undefined || hasOwnProperty.call(obj, key)
}
return false
},
isJSON: function (str) {
if (util.isString(str)) {
try {
const obj = JSON.parse(str)
return util.isPlainObject(obj) || util.isArray(obj)
} catch (e) {
return false
}
}
return false
},
/**
* 判断参数是否是其中之一
*/
oneOf: function (value, validList) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i]) {
return true
}
}
return false
},
/**
* 判断参数是否是数组对象其中之一
*/
oneOfObj: function (value, validList, key) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i][key]) {
return true
}
}
return false
},
/**
* 全局唯一标识符
*/
guid: function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
})
},
/**
* 转boolean 值
* @param {*} obj
* @param {*} defaultValue
*/
toBoolean: function (obj, defaultValue = false) {
if (util.isEmpty(obj)) {
return defaultValue
}
return util.oneOf(obj, [true, 'True', 'Yes', 'true', '1', 1, 'yes', 'Y', 'y', 'T', 't'])
},
/**
* 创建新数据,避免对象引用
* @param {*} data
* @param {*} defaultValue
*/
newData: function (data, defaultValue) {
return util.isNotEmpty(data) ? JSON.parse(JSON.stringify(data)) : (defaultValue || data)
},
/**
* 转换json字符串的转换
* @param {*} data
* @param {*} defaultValue
*/
parseData: function (data, defaultValue) {
if (util.isNotEmpty(data)) {
// eslint-disable-next-line no-eval
return util.isPlainObject(data) || util.isArray(data) ? data : window.eval('(' + data + ')')
} else {
return (defaultValue || data)
}
},
/**
* 转换json字符串的转换
* @param {*} data
* @param {*} defaultValue
*/
parseJSON: function (data, defaultValue) {
if (util.isNotEmpty(data)) {
return util.isJSON(data) ? JSON.parse(data) : data
} else {
return (defaultValue || data)
}
},
/**
* 生成随机id
*/
randomId: function () {
const random = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
})
return `${random}-${Math.random() * 128}`
}
}
export default util
二、使用方法
在项目中使用,我们只需要把它定义在属性中,比如:
import Utils from '@/utils/util'然后进行
// 使用帮助类 Vue.prototype.$utils = Utils
在项目中常用的方法举例:
1. 判断字段是否为空
$utils.isEmpty(xxx)
// 结合代码块
isEmpty: function (obj, allowBlank = false) {
if (util.isNull(obj)) return true
if (util.isArray(obj)) return obj.length === 0
if (util.isString(obj)) return (!(allowBlank || obj.length > 0))
if (util.isObject(obj)) return util.isEmptyObject(obj)
for (var key in obj)
if (obj.hasOwnProperty(key)) return false
return obj === undefined || (!allowBlank ? obj === '' : false)
}
// 使用该方法直接判断传入的xx为null,[],'',{}时直接返回true
这在我们项目需求布尔值判断的时候,就能够很方便的直接判断出Object、Array、String等参数是否为空,同理uitls.isNotEmpty就是来判断对象不为空的。
2.数组/数组对象的常用法
数组项/数组对象常用的方法就是判断值是否存在,类似于includes的使用方法
$utils.oneOf('xxx',Array)
// 例如:
const aa = 1
const bb = [1,2,3,4]
console.log($utils.oneOf(aa,bb)) //true
判断数组对象的值,类似于**.some或者.find**的使用方法
$oneOfObj(valueToCheck, list, key)
const list = [
{ id: 1, name: 'aa' },
{ id: 2, name: 'bb' },
{ id: 3, name: 'cc' }
];
const valueToCheck = 2;
const key = 'id';
const result = $utils.oneOfObj(valueToCheck, list, key);
console.log(result); // 输出: true,因为 2 在对象数组中存在
其他:
const isValueInArray = (value, validList, key) => validList.some(obj => obj[key] === value);
const result1 = isValueInArray(2, list, 'id');
console.log(result1); // 输出: true
3.判断是否属于数字
$utils.isValueNumber(xxx)
isValueNumber: function (val) {
const regPos = /^\d+(\.\d+)?$/ // 非负浮点数
const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
if (regPos.test(val) || regNeg.test(val)) {
return true
} else {
return false
}
}
- 这个方法首先定义了两个正则表达式:`regPos` 用于匹配非负浮点数或整数,`regNeg` 用于匹配负浮点数或负整数。
- 它接着使用 `regPos.test(val)` 检查给定的值 `val` 是否符合非负浮点数或整数的格式。
- 同样地,`regNeg.test(val)` 用于检查给定的值是否符合负浮点数或负整数的格式。
- 如果 `val` 符合任一正则表达式,方法返回 `true`,表示 `val` 是一个有效的数字。
- 如果 `val` 不符合任何一个正则表达式,方法返回 `false`。
// 这个方法检查的是字符串 `val` 是否符合数字的格式。
// 如果输入的 `val` 不是字符串,可能需要先将其转换为字符串再进行检查。
如果想避免上面的注意事项可以使用:
$utils.isValidNumber(xxx)
console.log($utils.isValueNumber("123")); // true
console.log($utils.isValueNumber("123.456")); // true
console.log($utils.isValueNumber("-123.456")); // true
console.log($utils.isValueNumber("1e10")); // true
console.log($utils.isValueNumber("abc")); // false
console.log($utils.isValueNumber("")); // false
console.log($utils.isValueNumber(NaN)); // false
console.log($utils.isValueNumber(Infinity)); // false
console.log($utils.isValueNumber(-Infinity)); // false
4.全局标识
$utils.guid()
// 生成一个全局唯一标识符(GUID),也称为UUID。它用于创建一个随机的、唯一的字符串,通常用于标识对象或记录,以确保它们的唯一性。
$utils.randomId()
// 生成随机UUID结合随机数的id
guid: function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
})
}
randomId: function () {
const random = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
})
return `${random}-${Math.random() * 128}`
}
# 结语:
这篇通用方法涉及的方法不一定是最好用的,但是主要是为了规范在项目流程中一些常用指令,避免合作开发过程中每个同事写的代码不同而导致代码页面不够整洁。