前端开发中经常使用到的公用方法（使用的是ES6的语法）
毫秒数转换成日期（格式：yyyy-mm-dd、yyyy-mm-dd hh:mm、yyyy-mm-dd hh:mm:ss）
/**
* @desc 毫秒数转换成日期（格式：yyyy-mm-dd、yyyy-mm-dd hh:mm、yyyy-mm-dd hh:mm:ss）
* @param timeStamp 时间戳毫秒数
* @param type 默认格式为：yyyy-mm-dd 1 对应日期格式yyyy-mm-dd hh:mm 2 对应日期格式yyyy-mm-dd hh:mm:ss
* @return 格式化日期字符串
*/
export const formatDate = (timeStamp, type) => {
let formatDateStr = '';
let date = new Date(timeStamp);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
month = month 过去了多长时间（几秒前、几分钟前、几小时前）
/**
* @desc 过去了多长时间（几秒前、几分钟前、几小时前）
* @param timeStamp 过去时间毫秒数
* @return 距离当前时间多久的字符串
*/
export const durationTime = (timeStamp) => {
let durationTimeStr = '';
let duration = (+Date.now() - timeStamp) / 1000;
if (duration = 60 && duration = 60 * 60 && duration 倒计时（距离现在还有00天00小时00分钟00秒）
/**
* @desc 倒计时（距离现在还有00天00小时00分钟00秒）
* @param remainTime 剩余时间毫秒数
* @param mountId 挂载dom节点
* @return 距离现在还剩多长时间的字符串
*/
let futureDateTime = Date.parse('2018-10-25');
export const countDownNow = (remainTime, mountId) => {
let intDay, intHour, intMin, intSecond, timeStr;
let saveRemainTime = remainTime;
remainTime = remainTime - Date.now(); // 剩余时间减去当前时间
if(remainTime > 0) {
intDay = Math.floor(remainTime / (24 * 60 * 60 * 1000)); // 剩余天数
remainTime = remainTime - (intDay * 24 * 60 * 60 * 1000); // 减去剩余天数的毫秒数
intHour = Math.floor(remainTime / (60 * 60 * 1000)); // 剩余小时数
remainTime = remainTime - (intHour * 60 * 60 * 1000); // 减去剩余小时数的毫秒数
intMin = Math.floor(remainTime / (60 * 1000)); // 剩余分钟数
remainTime = remainTime - (intMin * 60 * 1000); // 减去剩余分钟数的毫秒数
intSecond = Math.floor(remainTime / 1000); // 剩余秒数
intDay 手机格式校验
/**
* @desc 手机格式校验
* @param phoneNum 手机号码
* @return boolean 是否是合格的手机号
*/
export const checkPhoneNum = (phoneNum) => {
let phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;
return phoneReg.test(phoneNum);
}
// 测试结果
console.log(checkPhoneNum(13556891025)); // true手机格式化（135 1025、135--1025）
/**
* @desc 手机格式校验
* @param phoneNum 需要格式化的手机号
* @param connector 格式化的连接字符
* @return 格式化的手机号
*/
export const formatPhoneNum = (phoneNum, connector) => {
let arr = phoneNum.split('');
connector = connector || ' ';
arr.splice(3, 0, connector);
arr.splice(8, 0, connector);
return arr.join('');
}
// 测试结果
console.log(formatPhoneNum('135****1025')); // '135 **** 1025'
console.log(formatPhoneNum('135****1025', '-')); // '135-****-1025'input输入框手机号码实时格式化
/**
* @desc input输入框手机号码实时格式化 该方法应在实时监听input输入框变化的回调函数中使用 通过这两个值的长度大小进行比较，来区分变化是删除还是增加
* @param prevPhoneNum为input框变化前的值
* @param phoneNum为input当前的
*/
export const RTFormatPhoneNum = (prevPhoneNum, phoneNum) => {
// 判断是否为删除
if (prevPhoneNum 使用正则表达式格式化手机号
/**
* @desc 使用正则表达式格式化手机号
* @param phone require 需要格式化的手机号
* @param connector option 格式化的连接字符
* @return 返回格式化后的手机号码
*/
export const formatPhone = (phone, connector) => {
let reg = /B(?=(d{4})+(?!d))/g;
return String(phone).replace(reg, connector || ' ');
}
// 测试结果
console.log(formatPhone(13556891025)); // 135 5689 1025
console.log(formatPhone(13556891025, '-')); // 135-5689-1025使用正则表达式格式化银行卡号或订单号
/**
* @desc 使用正则表达式格式化银行卡号或订单号
* @param bankNo require 需要格式化银行卡号或订单号
* @param connector option 格式化的连接字符
* @return 返回格式化后的银行卡号或订单号
*/
export const formatBankNo = (bankNo, connector) => {
let reg = /B(?获取url参数(使用正则表达式)
/**
* @desc 获取url参数(使用正则表达式) 如https://www.baidu.com/?id=123456&name=xiaoxin
* @param name 要获取参数值的名称
* @return 返回参数对应的值
*/
export const getUrlQueryString = (name) => {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
// let r = window.location.search.substr(1).match(reg);
// 仅测试用
let r = 'id=123456&name=xiaoxin'.match(reg);
if (r !== null) {
return decodeURI(r[2]);
} else {
return null;
}
}
// 测试结果
console.log(getUrlQueryString('id')); // '123456'
console.log(getUrlQueryString('name')); // 'xiaoxin'获取url地址参数（将url参数转成对象返回）
/**
* @desc 将url参数转成对象返回
* @param name type: string (no-require) 参数的key，如：id
* @param url type: string (require) url字符串， 如：https://www.baidu.com/?id=123456&name=Better&age=18
* @return 参数对象或者某个参数的值
*/
export function urlParamToObj(name, url) {
let obj = {};
let a = document.createElement('a');
// 防止url编码，使用decodeURIComponent把编码解析出来
a.href = decodeURIComponent(url || window.location.href); // 设置默认url为当前页面地址
let search = a.search;
a = null;
if (search.indexOf('?') === 0) {
let str = search.substr(1);
let arr = str.split('&');
arr.forEach(item => {
let paramArr = item.split('=');
obj[paramArr[0]] = paramArr[1];
});
}
return name ? obj[name] : obj;
}
// 测试结果：
console.log(urlParamToObj('', 'https://www.baidu.com/?id=123456&name=Better&age=18')); // {id: "123456", name: "Better", age: "18"}
console.log(urlParamToObj('name', 'https://www.baidu.com/?id=123456&name=Better&age=18')); // 'Better'在url后面增加参数
/**
* @desc 在url上增加参数
* @param url type: string (require) url字符串， 如：https://www.baidu.com/?id=123456&name=Better&age=18
* @param param type: object (require)，如：{key: value}
* @return 返回拼接好的url字符串
*/
export function addParamToUrl (url, param) {
let a = document.createElement('a');
a.href = url;
let arr = [];
let search = a.search;
if (param) {
Object.keys(param).forEach((item) => {
if (param[item] !== '' && param[item] !== null && param[item] !== undefined) {
arr.push(encodeURIComponent(item) + '=' + encodeURIComponent(param[item]));
}
});
}
if (arr.length !== 0) {
search += search === '' ? '?' + arr.join('&') : '&' + arr.join('&');
}
let resultUrl = a.origin + a.pathname + search + a.hash;
a = null;
return resultUrl;
}
// 测试结果：
addParamToUrl('https://www.baidu.com/?id=123456&name=Better&age=18', {from: 'wx'}); // "https://www.baidu.com/?id=123456&name=Better&age=18&from=wx"/**
* @desc 在hash url上增加参数
* @param url type: string (require) url字符串， 如：https://c2b-test2.brightoilonline.com/bdh5/channel.html#/chelunGasList?pcode=c2b0293jm44x97an6339&fromApp=true
* @param param type: object (require)，如：{key: value}
* @return 返回拼接好的url字符串
*/
export function addParamToHashUrl (url, param) {
let a = document.createElement('a');
a.href = url;
let arr = [];
let hash = a.hash;
if (param) {
Object.keys(param).forEach((item) => {
if (param[item] !== '' && param[item] !== null && param[item] !== undefined) {
arr.push(encodeURIComponent(item) + '=' + encodeURIComponent(param[item]));
}
});
}
if (arr.length !== 0) {
hash += a.href.indexOf('?') === -1 ? '?' + arr.join('&') : '&' + arr.join('&');
}
let resultUrl = a.origin + a.pathname + a.search + hash;
a = null;
return resultUrl;
}
// 测试结果：
addParamToHashUrl('https://c2b-test2.brightoilonline.com/bdh5/channel.html#/chelunGasList?pcode=c2b0293jm44x97an6339&fromApp=true', {from: 'wx'}); // "https://c2b-test2.brightoilonline.com/bdh5/channel.html#/chelunGasList?pcode=c2b0293jm44x97an6339&fromApp=true&from=wx"移动端判断微信浏览器、ios、Android
注意：微信浏览器判断要放在第一位，因为ios和android手机微信浏览器代理信息中都包含ios或者android
也可以通过device === ''来判断是否为PC端浏览器
/**
* @desc 判断浏览器环境，wx、ios、android
* @return 浏览器环境类型
*/
export const whatDevice = () => {
let device = '';
let ua = window.navigator.userAgent.toLowerCase();
if (/MicroMessenger/i.test(ua)) {
device = 'wx';
} else if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
device = 'ios';
} else if (/(Android)/i.test(ua)) {
device = 'android';
}
return device;
}
// 测试结果: 用的是PC端谷歌浏览器测试
console.log(whatDevice()); // ''
// 使用微信开发者工具测试
console.log(whatDevice()); // 'wx'localStorage用法封装
/**
* @desc 设置本地存储
* @param {string} name key
* @param {string|object} value value 可以是string、obj等
* @param {number} cacheTime 缓存时间(ms)
* @return
*/
export const setLocalStorage = (name, data, cacheTime) => {
if (!name) return;
const storage = {
data,
cacheTime,
createdTime: new Date().getTime(),
};
localStorage.setItem(name, JSON.stringify(storage));
}
/**
* @desc 获取本地存储,如果未设置缓存时间或者在缓存时间内则返回数据,如果过期则返回undefined
* @param {string} name key
* @return
*/
export const getLocalStorage = name => {
if (!name) return;
const storage = JSON.parse(localStorage.getItem(name));
if (!storage) return;
if (storage.cacheTime && new Date().getTime() - storage.createdTime > storage.cacheTime) {
clearLocalStorage(name);
return;
}
return storage.data;
}
/**
* @desc 清除本地存储
* @param {string} name key
* @return
*/
export const clearLocalStorage = name => {
if (!name) return;
localStorage.removeItem(name);
}cookie的获取、添加、删除
/**
* @desc 添加cookie
* @param name cookie名称
* @param value cookie值
* @param expiresHours cookie设置有效时间 单位小时
*/
export const addCookie = (name, value, expiresHours) => {
let cookieStr = '';
// 如果value为对象，进行序列化操作
if (Object.prototype.toString.call(value) === '[object Object]') {
value = JSON.stringify(value);
}
cookieStr = name + '=' + value;
if (expiresHours) {
let date = new Date();
date.setTime(date.getTime() + expiresHours * 3600 * 1000);
cookieStr = cookieStr + ';expires=' + date.toGMTString();
}
document.cookie = cookieStr + ';path=/';
}
/**
* @desc 获取cookie
* @param name cookie名称
* @return name对应的cookie值
*/
export const getCookie = (name) => {
let arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
if (arr != null) {
if ((/^{.*}$/g).test(arr[2])) { // 如果cookie的值是对象，进行反序列化
return JSON.parse(arr[2]);
}
return arr[2];
}
return null;
};
/**
* @desc 删除所有cookie
*/
export const clearAllCookie = () => {
let keys = document.cookie.match(/[^ =;]+(?==)/g);
console.log('keys', keys);
if (keys) {
for(let i = keys.length; i--;)
document.cookie = keys[i] + '=0;domain=' + window.location.hostname +';expires=' + new Date(0).toUTCString() + ';path=/';
console.log('cookie', document.cookie);
}
console.log('清除所有cookie成功');
}
// 测试结果
let userInfo = {
naem: 'xiaoxin',
age: 18
};
addCookie('userInfo', userInfo);
console.log(getCookie('userInfo')); // {naem: "xiaoxin", age: 18}
let userName = 'liaoxiaoxin';
addCookie('userName', userName);
console.log(getCookie('userName')); // 'liaoxiaoxin'生成由数字和字母组合的随机字符串
export const getNonceStr = (num) => {
let res = '';
let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
for (let i = 0; i 按自然顺序排序参数对象字符串，如连接方式userName=liaoxiaoxin&age=18
export const getParamsStr = (paramsObj) => {
let paramsStr = '';
const keys = Object.keys(paramsObj).sort();
keys.map((key) => {
paramsStr += `&${key}=${paramsObj[key]}`;
});
paramsStr = paramsStr.substr(1);
return paramsStr;
};
// 测试结果
let params = {
userName: 'xiaoxin',
age: 18,
position: 'front-end engineer'
}
console.log(getParamsStr(params)); // age=18&position=front-end engineer&userName=xiaoxin禁止输入框输入表情
// 用苹果手机亲测好像只能防止输入部分表情
export const maskEmoji = (text) => {
let regRule = /uD83C[uDF00-uDFFF]|uD83D[uDC00-uDE4F]/g;
if (regRule.test(text)) {
text = text.replace(/uD83C[uDF00-uDFFF]|uD83D[uDC00-uDE4F]/g, '');
alert('不能输入表情');
}
return text;
};快速排序传统实现方式
function quickSort (arr) {
//如果数组只有一个数，就直接返回
if (arr.length 快速排序算法ES6简洁实现
export const quickSort = (arr) => {
//如果数组只有一个数，就直接返回
if (arr.length value value >= prev))
];
}
// 测试结果
let arr = [6, 2, 9, 4, 7, 1, 8, 3, 5, 6, 9, 3];
console.log(quickSort(arr)); // [1, 2, 3, 3, 4, 5, 6, 6, 7, 8, 9, 9]数组对象排序
/**
* @desc 对象数组排序，例如按时间倒序
* @param 排序字段名prop，排序方式type: 正序：positive， 倒序reverse 默认倒序
* @return 数组排序比较函数
*/
export const objArrayCompareByProp = (prop, type = 'reverse') => {
return (obj1, obj2) => {
let val1 = obj1[prop];
let val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (type === 'positive') {
return val1 - val2;
} else {
return val2 - val1;
}
};
};
// 测试结果：
let objArr = [{name: 'wangxiaowu', age: 20}, {name: 'liaoxiaoxin', age: 18}, {name: 'Better', age: 19}];
console.log(JSON.stringify(objArr.sort(objArrayCompareByProp('age')))); // [{"name":"wangxiaowu","age":20},{"name":"Better","age":19},{"name":"liaoxiaoxin","age":18}]
console.log(JSON.stringify(objArr.sort(objArrayCompareByProp('name')))); // [{"name":"wangxiaowu","age":20},{"name":"liaoxiaoxin","age":18},{"name":"Better","age":19}]
console.log(JSON.stringify(objArr.sort(objArrayCompareByProp('age', 'positive')))); // [{"name":"liaoxiaoxin","age":18},{"name":"Better","age":19},{"name":"wangxiaowu","age":20}]数组对象去重
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
基本数据类型去重我们直接使用Array.from(new Set(arr));就可以了，但是相同对象去重，不能使用这个方法
/**
* @desc 数组对象去重
* @param arr 需要去重的数组对象
* @param prop 属性名 可选 根据对象的某一个值，比如对象的id
* @return 返回去重以后的数组对象
*/
export const uniqueArrObj = (arr, prop) => {
if (arr && arr.length {
if (!tempObj[item[prop]]) {
tempObj[item[prop]] = true;
return item;
}
})
} else {
let tempArr = [];
// 先使用JSON.stringify把对象进行序列化
arr.forEach(item => {
tempArr.push(JSON.stringify(item));
});
// 去重
tempArr = Array.from(new Set(tempArr));
// 通过使用JSON.parse把对象进行反序列化
return tempArr.map(item => {
return JSON.parse(item);
});
}
}
// 测试结果：
var objArr = [{id: 111, name: 'liaoxiaoxin', age: 20}, {id: 111, name: 'liaoxiaoxin', age: 20}, {id: 222, name: 'liaoxiaoxin', age: 18}, {id: 333, name: 'Better', age: 19}];
uniqueArrObj(objArr, 'id'); // [{"id":111,"name":"liaoxiaoxin","age":20},{"id":222,"name":"liaoxiaoxin","age":18},{"id":333,"name":"Better","age":19}]
uniqueArrObj(objArr, 'name'); // [{"id":111,"name":"liaoxiaoxin","age":20},{"id":333,"name":"Better","age":19}]
uniqueArrObj(objArr); // [{"id":111,"name":"liaoxiaoxin","age":20},{"id":222,"name":"liaoxiaoxin","age":18},{"id":333,"name":"Better","age":19}]短信验证码倒计时(使用setTimeout模拟setInterval)
/**
* @desc 短信验证码倒计时(使用setTimeout模拟setInterval)
* @param smsTimeout 设置的倒计时时间
* @param vCodeStatus 获取验证码按钮是否可点击
* @param getVCodeText 获取验证码文本
*/
timeCount () {
this.smsTimeout--; // 时间递减
this.vCodeStatus = false; // 短信验证码按钮是否可点击
this.getVCodeText = `${this.smsTimeout}s后重新获取`; // 短信验证码按钮文本
setTimeout(() => {
if (this.smsTimeout === 0) { // 倒计时结束时退出递归
this.vCodeStatus = true;
this.getVCodeText = '获取验证码';
this.smsTimeout = environment.smsTimeout; // 重置倒计时时间
} else {
this.timeCount(); // 递归执行自身
}
}, 1000)
}持续更新中。。。
公用方法JS文件链接
- 平时开发中常用的公用方法
本文由mdnice多平台发布
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
