JavaScript中处理数组,对象和正则的实用函数
作者：黑土豆
1、数组相关
数组是我们在写业务逻辑中经常需要处理的对象，但是这次我就只把最近遇到的，项目中相对频繁出现的业务处理函数进行总结记录，至于其他你觉得有用的可以自行补充记录。
1.1 数组拆分为多个数组
该需求是在处理请求时，需要将数据分批进行请求，所以需要我们将一个大数组数据采用下面的方法进行截取重组。如下：
/**
* 把一个数组拆分成几个数组
* @param array 需要拆分的数组
* @param size 每组数组多少个，如：10
*/
export function splitArray(array, size) {
let data = [];
for (let i = 0; i < array.length; i += size) {
data.push(array.slice(i, i + size));
}
return data;
}
在函数内部，先创建了一个空数组data用于存储分割后的子数组，使用for循环遍历原始数组array；循环迭代时，以size为步长，每次取出size大小的元素；利用array.slice(start, end)方法截取array中的子数组，并将其推送到data中。最终返回包含分割后的子数组的data数组。
1.2 判断数组相等
//方法一：
/**
* 数组内元素一样（顺序可不一样）
* @param arr1
* @param arr2
*/
export function isArrEqual (arr1, arr2) {
return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
};
//方法二：
/**
* 数组内元素一样（顺序一样）
* @param arr1
* @param arr2
*/
export function isArrEqual (arr1, arr2) {
return JSON.stringify(arr1) === JSON.stringify(arr2);
};
判断数组相等提供了上述两种方法：第一种是不管数组内部的元素顺序是否一致，只要数组内的元素都存在即可；而第二种则是通过将数组转为字符串来进行对比，但是有弊端，那就是会忽略数组中的一些特殊类型或特殊值，例如 undefined、函数、或包含循环引用的对象等。
那下面再来写一个更优的方法，如下：
export isArrEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) {
return false;
}
}
return true;
}
这个函数会逐一比较两个数组中的元素。它首先检查两个数组的长度，如果它们长度不同，直接返回 false。然后对比两个数组中每个索引处的元素，如果有任何一个元素不相等，立即返回 false。只有当所有元素都完全相等时，才返回 true。
1.3 数组内元素移动位置
该需求是在处理数据时，需要将数组中的某个元素移动到指定位置。如下：
/**
* 数组内元素移动位置
* @param array
* @param keyToMove
* @param newPosition
*/
export function moveElementToPosition(array, keyToMove, newPosition) {
const indexToMove = array.findIndex(element => element.label == keyToMove);
if (indexToMove != -1) {
const elementToMove = array.splice(indexToMove, 1)[0]; // 移除要移动的元素
array.splice(newPosition, 0, elementToMove); // 插入到新位置
}
return array
}
这段代码使用array.findIndex()方法查找数组中满足指定条件的第一个元素，并返回其索引。如果找到了该元素，则使用array.splice(indexToMove, 1)[0]从数组中删除找到的元素，并将其存储在elementToMove变量中。 array.splice(newPosition, 0, elementToMove)将刚刚移除的元素elementToMove插入到数组的新位置 newPosition。最后，函数返回操作后的数组。
1.4 对象转为数组
该需求其实是上述数组内元素移动位置的前提，因为对象是无序的，所以需要将其先转为数组，然后对数组进行移位操作，所以将对象转为数组的方法如下：
/**
* 对象转为数组
* @param obj
*/
export function obj2Arr(obj) {
const resultArray = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
resultArray.push({ label: key, value: obj[key] });
}
}
return resultArray;
}
这段代码定义了一个函数obj2Arr，其功能是将给定的对象转换为数组。这个数组包含了对象中每个键值对，每个键值对会以对象的形式存储在数组中，其中label对应对象的键，value对应对象的键对应的值。
2、对象相关
对象也是javascript中经常需要处理的数据类型，下面我也总结了最近用到的一些处理对象的方法，如下：
2.1 数组转对象
/**
* 数组转对象
* @param arr
*/
export function arr2Obj(arr) {
return arr.reduce((acc, item) => {
acc[item.key] = item.value;
return acc;
}, {});
}
这段代码定义了一个函数arr2Obj，其作用是将一个由对象组成的数组转换为一个对象。这个数组中的每个对象都有 key和value属性，函数通过使用reduce方法，将这些对象的key属性作为新对象的键，value属性作为新对象的对应值，最终返回一个包含了数组中所有对象键值对的对象。
2.2 对象转为Map
/**
* 对象转为 Map
* @param obj
* @returns
*/
export function objToStrkeyMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
这段代码定义了一个函数objToStrkeyMap，其作用是将一个对象转换为一个Map数据结构，其中对象的键会成为 Map的键，对应的值会成为Map的值。
2.3 JSON转为Map
这里需要用到上面对象转为Map的方法，如下：
/**
* JSON 转为 Map，所有键名都是字符串
* @param jsonStr
* @returns
*/
export function jsonToStrkeyMap(jsonStr) {
return objToStrkeyMap(JSON.parse(jsonStr));
}
2.4 克隆对象
当在对对象进行修改时，需要先对其进行备份，以便在修改后对比或恢复至原始状态时，克隆对象就很有用，这里就给出最简的方法，如下：
/**
* 克隆对象
* @param obj
* @returns {any}
*/
export function objClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
使用JSON.stringify(obj)将对象转换为JSON字符串，然后 JSON.parse()将这个JSON字符串再转换回对象，从而创建了对象的深层拷贝，返回了一个全新的对象副本。
那肯定会有人来杠，这种方法有啥有啥弊端，我都知道。最终就会扯到写一个深拷贝才罢休，如下：
export function deepClone(obj, hash = new WeakMap()) {
let isComplexDataType = (obj) => {
return (typeof obj === "object" || typeof obj === "function") && obj !== null;
};
if (obj.constructor === Date) return new Date(obj); //日期对象直接返回一个新的日期对象
if (obj.constructor === RegExp) return new RegExp(obj); //正则对象直接返回一个新的正则对象
//如果循环引用了就用weakMap来解决
if (hash.has(obj)) return hash.get(obj);
let allDesc = Object.getOwnPropertyDescriptors(obj);
//遍历传入参数所有键的特性
let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
//继承原型链
hash.set(obj, cloneObj);
for (let key of Reflect.ownKeys(obj)) {
cloneObj[key] =
isComplexDataType(obj[key]) && typeof obj[key] !== "function"
? this.deepClone(obj[key], hash)
: obj[key];
}
return cloneObj;
}
3、正则相关
下面就来把我使用的一些正则验证房分享一下，如果有需要就拷贝吧，没需要的当个乐子看看就好。
3.1 校验手机号
/**
* 校验手机号是否符合规则
* @param phone
*/
export function verifyPhone (phone: string) {
return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(phone);
}
3.2 校验只能输入中文
/**
* 校验只能输入中文
* @param str
* @returns
*/
export function verifyChinese (str: string) {
return /^[\u4e00-\u9fa5]+$/.test(str)
}
3.3 校验只能输入中英文数字
/**
* 校验只能输入中英文数字
* @param str
*/
export function verifyChineseAndEnglish(str) {
return /^[A-Za-z0-9\u4E00-\u9FFF]+$/.test(str)
}
3.4 检验只能输入英文
/**
* 校验只能输入英文
* @param str
*/
export function verifyEnglish (str) {
return /^[a-zA-Z]+$/.test(str)
}
3.5 校验不能输入特殊字符
/**
* 校验不能输入特殊字符
* @param str
*/
export function verifySpecialChar (str) {
return /[!`~,.<>;':"/[\]|{}()=_+-]/.test(str)
}
3.6 过滤emoji表情
/**
* 过滤 emoji 表情
* @param str
*/
export function filterEmoji(str) {
return str.replace(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g, "*");
}
3.7 校验身份证
/**
* 校验身份证号是否符合规则
* @param phone
* @returns
*/
export function verifyIDCard (idCard) {
const cities = {
11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏",
33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南",
42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆",
51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
};
// 正则先过滤
const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (!reg.test(idCard)) {
return false;
};
// 然后再检查省份
const provinceCode = idCard.substring(0, 2);
if (cities[provinceCode] === undefined) {
return false;
}
// 最后验证校验码
return checkCode(idCard);
}
/**
* 身份证号校验位的检测
* @param idCard
* @returns
*/
function checkCode (idCard) {
// 将前17位加权因子保存在数组里
const factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
// 这是除以11后，可能产生的11位余数、验证码，也保存成数组
const parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
const code = idCard.substring(17); // 得到最后一位身份证号码
let sum = 0; // 用来保存前17位各自乖以加权因子后的总和
for (let i = 0; i < 17; i++) {
sum += Number(idCard[i]) * factor[i];
}
// 如果校验码所在数组的位置的值和parity中的值相等，则验证正确，否则无效
if (parity[sum % 11] == code.toUpperCase()) {
return true;
}
return false;
}
4、其他
我最近开发中经常遇到的其他方法有下面几个，还有一些没有那么频繁就没有必要赘述了。
4.1 比较版本号
/**
* 比较版本号
*/
export function compareVersionNumbers(version1, version2) {
const v1 = version1.split('.');
const v2 = version2.split('.');
const maxLength = Math.max(v1.length, v2.length);
for (let i = 0; i < maxLength; i++) {
const num1 = parseInt(v1[i] || 0);
const num2 = parseInt(v2[i] || 0);
if (num1 > num2) {
return 1;
} else if (num1 < num2) {
return -1;
}
}
return 0;
}
这个函数compareVersionNumbers接受两个版本号字符串version1和version2作为参数。它会按照版本号的常规格式（X.Y.Z），将版本号字符串分割为数字数组，然后逐个比较对应位置的数字，以确定两个版本号的大小关系。如果版本号version1大于version2，则返回1；如果版本号version1小于version2，则返回 -1；如果版本号相等，则返回0。
4.2 延时
项目中经常需要我们写一个延时来执行一些渲染，这个时候最好还希望是同步的，所以就有了下面这个方法，特别好用。如下：
/**
* 延时
* @param value
*/
export function sleep (value) {
return new Promise(resolve => {
const timeout = setTimeout(() => resolve(timeout), value)
})
}
4.3 截取字符串
截取字符串也是经常会遇到的，所以干脆写一个函数来进行引用，如下：
/**
* 截取字符串并加身略号
* @param str 要截取的字符串
* @param length
*/
export function subText(str, length) {
if (str.length == 0) {
return '';
}
if (str.length > length) {
return str.substr(0, length) + '...';
} else {
return str;
}
}
这个函数subText用于截取字符串，并在超出指定长度时添加省略号。如果输入字符串为空，它返回一个空字符串。如果输入字符串长度大于指定长度，则它截取字符串并添加省略号，否则返回原字符串。
总结
上述就是最近开发中遇到的一些javascript处理数据的方法，这里做个整理并记录也是方便后续自己进行查看，如果有需要的就采纳借鉴一下，文中的一些方法当然也有更优的解。
以上就是JavaScript中处理数组,对象和正则的实用函数的详细内容，更多关于JavaScript处理数组对象和正则的资料请关注脚本之家其它相关文章！