前端常用工具类

常用工具类【时间日期处理，数组排序、去重、过滤，对象深拷贝、字符串去除空格、函数防抖节流、添加水印、金钱格式化、枚举对象取值】

/**
 * 时间日期格式化 月份日期补0 =》 .toString().padStart(2, "0")
 * @param {*} date 时间日期
 */
export const formatter = (date) => {
	if (date == "" || date == null) {
		return;
	} else {
		date = new Date(date);
		return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date
        .getDate()
        .toString()
        .padStart(2, "0")}`;
	}
}
// 数组排序
export const arraySort = (arryObj) => {
	//此为升序，若需降序请自行修改代码if条件大于改为小于
	let tmp;
	for (let i = 0; i < arryObj.length; i++) {
		for (let j = 0; j < arryObj.length; j++) {
			if (arryObj[j] > arryObj[j + 1]) {
				tmp = arryObj[j];
				arryObj[j] = arryObj[j + 1];
				arryObj[j + 1] = tmp;
			}
		}
	}
	return arryObj;
}
// 数组去重
export const arrayRemoval = (arrayObj) => {
	let tmpArray = [];
	for (let i = 0; i < arrayObj.length; i++) {
		if (tmpArray.indexOf(arrayObj[i]) == -1) {
			tmpArray.push(arrayObj[i]);
		}
	}
	return tmpArray;
}

//数组筛选过滤
export const arrayFilter = (arrayObj, keyValue) => {
	let tmpArray = [];
	for (let i = 0; i < arrayObj.length; i++) {
		if (arrayObj[i].toString().indexOf(keyValue) != -1) {
			tmpArray.push(arrayObj[i]);
		}
	}
	return tmpArray;
}

// 数据深拷贝
//使用方法 供新手参考 :
// 在vue文件中 import { cloneObj } from '@/js_sdk/common.js'
// let dataList = cloneObj(data)
export const cloneObj = (obj) => {
	let newobj = obj.constructor === Array ? [] : {};
	if (typeof obj !== 'object') {
		return;
	}
	for (let i in obj) {
		newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
	}
	return newobj
};
// 字符串去除空格
/**
 * @param { string } str 待处理字符串
 * @param  { number } status 去除空格状态 1-所有空格  2-前后空格  3-前空格 4-后空格 默认为1
 */
export const removeBlank = (str, status = 1) => {
	if (status && status !== 1 && status !== 2 && status !== 3 && status !== 4) return;
	switch (status) {
		case 1:
			return str.replace(/\s/g, "");
		case 2:
			return str.replace(/(^\s)|(\s*$)/g, "");
		case 3:
			return str.replace(/(^\s)/g, "");
		case 4:
			return str.replace(/(\s$)/g, "");
		default:
			return str;
	}
}

//函数防抖方法
/**
 * @param { function } func
 * @param { number } wait 延迟执行毫秒数
 * @param { boolean } immediate  true 表立即执行，false 表非立即执行
 */
export const debounce = (func, wait, immediate) => {
	let timeout;
	return function() {
		let context = this;
		let args = arguments;

		if (timeout) clearTimeout(timeout);
		if (immediate) {
			let callNow = !timeout;
			timeout = setTimeout(() => {
				timeout = null;
			}, wait);
			if (callNow) func.apply(context, args)
		} else {
			timeout = setTimeout(() => {
				func.apply(context, args)
			}, wait);
		}
	}
}

//函数节流方法
/**
 * @param { function } func 函数
 * @param { number } wait 延迟执行毫秒数
 * @param { number } type 1 表时间戳版，2 表定时器版
 */
export const throttle = (func, wait, type) => {
	let previous, timeout;
	if (type === 1) {
		previous = 0;
	} else if (type === 2) {
		timeout = null;
	}
	return function() {
		let context = this;
		let args = arguments;
		if (type === 1) {
			let now = Date.now();

			if (now - previous > wait) {
				func.apply(context, args);
				previous = now;
			}
		} else if (type === 2) {
			if (!timeout) {
				timeout = setTimeout(() => {
					timeout = null;
					func.apply(context, args)
				}, wait)
			}
		}

	}
}

/**
 * 添加水印
 * @param {*} content 水印名称
 */
const watermark = ({
	container = document.body,
	width = "300px",
	height = "200px",
	textAlign = "center",
	textBaseline = "middle",
	font = "20px Microsoft Yahei",
	fillStyle = "rgba(184, 184, 184, 0.6)",
	content = "",
	rotate = "30",
	zIndex = 1000,
} = {}) => {
	const args = arguments[0];
	const canvas = document.createElement("canvas");

	canvas.setAttribute("width", width);
	canvas.setAttribute("height", height);
	const ctx = canvas.getContext("2d");

	ctx.textAlign = textAlign;
	ctx.textBaseline = textBaseline;
	ctx.font = font;
	ctx.fillStyle = fillStyle;
	ctx.rotate((Math.PI / 180) * rotate);
	ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

	const base64Url = canvas.toDataURL();
	const __wm = document.querySelector(".__wm");

	const watermarkDiv = __wm || document.createElement("div");
	const styleStr = `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:${zIndex};
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`;

	watermarkDiv.setAttribute("style", styleStr);
	watermarkDiv.classList.add("__wm");

	if (!__wm) {
		container.style.position = "relative";
		container.insertBefore(watermarkDiv, container.firstChild);
	}

	const MutationObserver =
		window.MutationObserver || window.WebKitMutationObserver;
	if (MutationObserver) {
		let mo = new MutationObserver(function() {
			const __wm = document.querySelector(".__wm");
			// 只在__wm元素变动才重新调用 __canvasWM
			if ((__wm && __wm.getAttribute("style") !== styleStr) || !__wm) {
				// 避免一直触发
				mo.disconnect();
				mo = null;
				__canvasWM(JSON.parse(JSON.stringify(args)));
			}
		});

		mo.observe(container, {
			attributes: true,
			subtree: true,
			childList: true,
		});
	}
};
//判断枚举对象取值
// 在vue文件中 import { enumeration } from '@/js_sdk/common.js'
// let valueStatus = enumeration(enumObj,0);
export const enumeration = (enumObj, index) => {
	//enumObj ====> 枚举对象 例如：{0:"不通过",1:"通过",2:"待审批"};
	//index ====> 查询属性值或属性名
	for (let i in enumObj) {
		if (i == index) {
			return enumObj[i];
		} else if (enumObj[i] == index) {
			return i;
		}
	}
}
// 金钱格式化,三位逗号
export const formatMoney = (num) => {
	let newNum = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	return newNum;
}

export default {
	watermark
}