共计 6401 个字符，预计需要花费 17 分钟才能阅读完成。
最近居家，回顾问题解解闷。明天汇总一下过来一年用的工具类（github 开源仓库，请骁勇 star），顺便发个 npm 包：haUtil
数据处理
对于浅拷贝和深拷贝更具体的剖析请查看：清晰易懂！解说 JS 赋值、浅拷贝和深拷贝
浅拷贝
/**
* 浅拷贝
* @param {Object} source
* @returns {Object}
*/
function clone(source) {const result = Object.assign({}, source);
return result;
}
module.exports = clone;深拷贝
深拷贝的原理是一层层遍历，直到所有数据都不可持续下探
/**
* 深拷贝
* @param {*} source
* @param {WeakMap} weakMap
* @returns {*} target
*/
// 可遍历对象
const iterations = ['[object Object]',
'[object Array]',
'[object Map]',
'[object Set]',
];
function cloneDeep(source, weakMap = new WeakMap()) {if (source === null) return source;
// 获取对象类型
const type = Object.prototype.toString.call(source);
// 解决不可遍历对象
if (!iterations.includes(type)) {if (type === '[object Date]') return new Date(source);
if (type === '[object RegExp]') return new RegExp(source);
if (type === '[object Symbol]') return Symbol(source.description);
if (type === '[object Function]') return source;
// 残余的个别是原始类型，间接返回
return source;
}
// 创立 target 实例
let target = new source.constructor(); // {} | [] | Map(0) | Set(0)
// 解决循环调用
const val = weakMap.get(source);
if (val) return val;
weakMap.set(source, target);
if (type === '[object Map]') {source.forEach((value, key) => {target.set(key, cloneDeep(value));
});
return target;
}
if (type === '[object Set]') {
source.forEach(value => {target.add(cloneDeep(value));
});
return target;
}
// 解决对象和数组
for (const key in source) {target[key] = cloneDeep(source[key], weakMap);
}
return target;
}
module.exports = cloneDeep;任意范畴随机数
/**
* 生成指定范畴 [min, max] 的随机数
* @param {Number} min
* @param {Number} max
* @return {Number}
*/
function randomNum(min, max) {if (min >= max) return min;
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
module.exports = randomNum;数字转百分比
/**
* 转换百分比
* @param {number} num
* @param {number} total
* @returns {string} 百分比
*/
function toPercent(num, total) {
let str =
num >= 0 && total > 0 ? Number(((num / total) * 100).toFixed(2)) : 0;
return str;
}
module.exports = toPercent;文件单位自适应
/**
* 文件大小单位适配，主动转换 B、K、M、G 单位
* @param {number | string} fileSize 文件大小，以 B 为单位
* @returns {string}
*/
function translateFileSize(fileSize) {if (fileSize === null || typeof fileSize === 'undefined' || fileSize === '') {return '—';}
if (fileSize < 1024) {fileSize = fileSize + 'B';} else if (fileSize < 1024 * 1024) {fileSize = Math.floor((fileSize * 10) / 1024) / 10 + 'K';
} else if (fileSize < 1024 * 1024 * 1024) {fileSize = Math.floor((fileSize * 10) / (1024 * 1024)) / 10 + 'M';
} else {fileSize = Math.floor((fileSize * 10) / (1024 * 1024 * 1024)) / 10 + 'G';
}
return fileSize;
}
module.exports = translateFileSize;金额解决
金额超出三位加逗号
/**
* 金额超出三位加 ','
* @param {string} num 金额
* @param {string} locales 本地化配置，默认 zh-CN
* @param {object} options 本地化配置，默认{style: 'currency', currency: 'CNY'}
* @returns {string}
*/
function amountFormat(
num,
locales = 'zh-CN',
options = {style: 'currency', currency: 'CNY'}
) {return num ? Number(num).toLocaleString(locales, options) : '0';
}
module.exports = amountFormat;事件处理
防抖
/**
* 防抖
*
* 用法：* const cbFun = debounce(fun, 2000)
* cbFun()
*/
function debounce(fn, delay = 1000) {
let timer = null;
return function() {if (timer !== null) {clearTimeout(timer);
}
timer = setTimeout(() => {fn.apply(this, arguments);
}, delay);
};
}
module.exports = debounce;节流
/**
* 节流
*
* 用法：* const cbFun = throttle(fun, 2000)
* cbFun()
*/
function throttle(fn, delay = 1000) {
let old = 0;
return function() {let now = new Date().valueOf();
if (now - old > delay) {fn.apply(this, arguments);
old = now;
}
};
}
module.exports = throttle;定时器
var requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {window.setTimeout(callback, 1000 / 60);
}
);
})();
/**
* rAF 定时器
*
* 用法：* const cbFun = rafInterval(fun, 2000)
* cbFun()
*/
function rafInterval(fn, delay = 1000) {
let start = 0;
function fun() {const timestamp = new Date().valueOf();
if (start === undefined) start = timestamp;
if (timestamp - start > delay) {
start = timestamp;
fn.apply(this, arguments);
}
requestAnimFrame(fun);
}
return function() {requestAnimFrame(fun);
};
}
module.exports = rafInterval;文件解决
导出文件
/**
* 导出文件
* @param {string} biteData 字节流
* @param {string} title 文件名
* @param {string} ext 文件后缀
*/
function downloadFile(biteData, title = '导出', ext = 'xls') {let blob = new Blob([biteData], {type: 'application/octet-binary'});
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob);
downloadElement.target = '_blank';
downloadElement.href = href;
downloadElement.download = `${title}.${ext}`; // 文件名
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href); // 开释掉 blob 对象
}
module.exports = downloadFile;json 导出 csv 文件
/**
* JSON 数据转成 CSV 文件导出
* @param {Array} list 要导出的 JSON 数据
* @param {Array} cols 表头名称，格局如：['ID', '姓名', '性别']，默认用第一条数据的 key
* @param {Array} keys 表头应用的 key，格局如：['id', 'name', 'gender']，须要和 cols 一一对应，否则导出数据有问题，默认用第一条数据的 key
* @param {string} fileName 导出的文件名称，不含日期前缀和文件类型后缀的局部
*
* 用法：* json2Csv(list, cols, keys, fileName)
*/
function json2Csv(list, cols, keys, fileName = '数据明细') {
if (
!(
list instanceof Array &&
cols instanceof Array &&
keys instanceof Array &&
typeof fileName === 'string'
)
) {console.log('参数格局谬误');
return;
}
if (list.length === 0) return;
if (cols.length === 0) cols = Object.keys(list[0]);
if (keys.length === 0) keys = Object.keys(list[0]);
fileName = fileName || '数据明细';
let title = cols;
let jsonKey = keys;
let data = list;
let str = [];
str.push(title.join(',') + '\n');
for (let i = 0; i < data.length; i++) {let temp = [];
for (let j = 0; j < jsonKey.length; j++) {temp.push(data[i][jsonKey[j]]);
}
str.push(temp.join(',') + '\n');
}
let uri =
'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(''));
let downloadLink = document.createElement('a');
downloadLink.href = uri;
downloadLink.download =
new Date().toISOString().substring(0, 10) + '-' + fileName + '.csv';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
module.exports = json2Csv;正则校验
邮箱
/**
* 判断邮箱格局
* @param {string} str
* @returns {Boolean}
*/
function isEmailNum(str, type = 1) {return /^[A-Za-z0-9_\u4e00-\u9fa5][email protected][a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(str);
}
module.exports = isEmailNum;身份证
/**
* 判断是否为身份证号
* @param {string | number} str
* @returns {Boolean}
*/
function isIdCard(str) {return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str);
}
module.exports = isIdCard;手机号码
/**
* 判断是否为电话号码，会过滤掉空格和横杠
* @param {string | number} str 手机号码
* @returns {Boolean}
*/
function isPhoneNum(str, type = 1) {
str = str
.replace(/ /g, '')
.replace(/-/g, '')
.replace(/\(|\)|\（|\）/g, ''); // 去除空格、横杠和括号
return /^(\+?0?86\-?)?1[3456789]\d{9}$/.test(str);
}
module.exports = isPhoneNum;座机号码
/**
* 判断是否为电话号码，会过滤掉空格和横杠
* @param {string | number} str 电话号码
* @returns {Boolean}
*/
function isPhoneNum(str, type = 1) {
str = str
.replace(/ /g, '')
.replace(/-/g, '')
.replace(/\(|\)|\（|\）/g, ''); // 去除空格、横杠和括号
return /^(\d{3,4})?[0-9]{7,8}$/.test(str);
}
module.exports = isPhoneNum;以上仅仅是依据本人业务需要整顿的，不肯定实用所有我的项目，如有问题，欢送斧正～
正文完
