关于程序员:前端开发中常用的工具方法

25次阅读

共计 15021 个字符,预计需要花费 38 分钟才能阅读完成。

前端开发中常常应用到的专用办法(应用的是 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 < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  second = second < 10 ? '0' + second : second;
  if (type === 1) {formatDateStr = `${year}-${month}-${day} ${hour}:${minute}`;
  } else if (type === 2) {formatDateStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  } else {formatDateStr = `${year}-${month}-${day}`;
  }
  return formatDateStr;
}
// 测试后果
console.log(formatDate(1506664038876)); // 2017-09-29
console.log(formatDate(1506664038876, 1)); // 2017-09-29 13:47
console.log(formatDate(1506664038876, 2)); // 2017-09-29 13:47:18

过来了多长时间(几秒前、几分钟前、几小时前)

/** 
 * @desc 过来了多长时间(几秒前、几分钟前、几小时前)* @param timeStamp 过来工夫毫秒数
 * @return 间隔以后工夫多久的字符串
 */
export const durationTime = (timeStamp) => {
  let durationTimeStr = '';
  let duration = (+Date.now() - timeStamp) / 1000;
  if (duration < 60) {durationTimeStr = `${Math.round(duration)}秒前 `;
  } else if (duration >= 60 && duration < 60 * 60) {durationTimeStr = `${Math.round(duration / 60)}分钟前 `;
  } else if (duration >= 60 * 60 && duration < 60 * 60 * 24) {durationTimeStr = `${Math.round(duration / 60 / 60)}小时前 `;
  } else {
    // 应用下面的日期格式化 formatDate 办法
    durationTimeStr = formatDate(timeStamp, 2);
  }
  return durationTimeStr;
}
// 测试后果
console.log(durationTime(1506664038876)); // 10 分钟前

倒计时(间隔当初还有 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 < 10 && (intDay = '0' + intDay);
    intHour < 10 && (intHour = '0' + intHour);
    intMin < 10 && (intMin = '0' + intMin);
    intSecond < 10 && (intSecond = '0' + intSecond);
    timeStr = intDay + '天' + intHour + '时' + intMin + '分' + intSecond + '秒';
    // document.getElementById(mountId).innerText = timeStr;
    // 配合测试
    console.log('剩余时间', timeStr);
    setTimeout(function () {countDownNow(saveRemainTime, mountId);
    }, 1000);
  } else {console.log('666', timeStr);
    // document.getElementById(mountId).innerText = '该工夫点已过';
  }
}

// 测试后果
countDownNow(futureDateTime, 'mountId');
// 剩余时间 284 天 15 时 34 分 26 秒
// 剩余时间 284 天 15 时 34 分 22 秒 .....

手机格局校验

/** 
 * @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 < phoneNum) {
      // 输出第 4 位数字和时后面加空格
      if (phoneNum.length === 4) {phoneNum = phoneNum.split('');
        phoneNum.splice(3, 0, ' ');
        phoneNum = phoneNum.join('');
      }
      // 输出第 8 位数字和时后面加空格
      if (phoneNum.length === 9) {phoneNum = phoneNum.split('');
        phoneNum.splice(8, 0, ' ');
        phoneNum = phoneNum.join('');
      }
    } else {
      // 删除第 4 位数时同时删除后面的空格
      if (phoneNum.length === 4) {phoneNum = phoneNum.substr(0, 3);
      }
      // 删除第 8 位数时同时删除后面的空格
      if (phoneNum.length === 9) {phoneNum = phoneNum.substr(0, 8);
      }
    }
}

应用正则表达式格式化手机号

/** 
 * @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(?<=(?<!\d)(\d{4})+)/g;
  return String(bankNo).replace(reg, connector || ' ');
}
// 测试后果
console.log(formatBankNo('8888888888888888')); // 8888 8888 8888 8888
console.log(formatBankNo('6666666666666666666')); // 6666 6666 6666 6666 666

获取 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 < num; i++) {let index = Math.ceil(Math.random() * 35);
    res += chars[index];
  }
  return res;
};

// 测试后果
console.log(getNonceStr(28)); // 'KYN4UDPK1KXOSZ9W4UARD6RT79LE'

按天然程序排序参数对象字符串,如连贯形式 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 <= 1) {return arr;}
    // 找到两头数的索引值,如果是浮点数,则向下取整
    let index = Math.floor(arr.length / 2);
    // 找到两头数的值
    let numValue = arr.splice(index, 1);
    const left = [];
    const right = [];
    for (let i = 0; i < arr.length; i++) {
      // 基准点的右边的数传到右边数组
      if (arr[i] < numValue) {left.push(arr[i]);
      } else {
        // 基准点的左边的数传到左边数组
        right.push(arr[i]);
      }
    }
    // 递归一直反复比拟
    return quickSort(left).concat([numValue], quickSort(right));
}

// 测试后果
console.log(quickSort([2, 1, 3, 5, 4])); // [1, 2, 3, 4, 5]

疾速排序算法 ES6 简洁实现

export const quickSort = (arr) => {
  // 如果数组只有一个数,就间接返回
  if (arr.length <= 1) {return arr;}
  const [prev, ...rest] = arr;
  return [...quickSort(rest.filter(value => value < prev)),
    prev,
    ...quickSort(rest.filter(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 < 2) {return;}
  if (prop) {let tempObj = {};
    // 把 prop 对应的值作为长期对象 tempObj 的属性值
    return arr.filter(item => {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 多平台公布

正文完
 0