前端常用的公共方法

前两期把我所学习到的高德地图工具类做了简单的封装，这一期我将把一些常用的工具类作为一个单独的模块提出来。以便于后期的整理以及大家的互相学习。

1.格式化时间

[tabs]

[tab title="代码内容"]

/**
 * @param {(Object|string|number)} time
 * @param {string} TimeFormat   想要返回时间的格式 例如 '{y}-{m}-{d} {h}:{i}:{s} {a}' {a}为周
 * @returns {string}
 */
function parseTime(time, TimeFormat) {
  if (arguments.length === 0) {
    return null;
  }
  const format = TimeFormat || "{y}-{m}-{d} {h}:{i}:{s}";
  let date;
  if (typeof time === "object") {
    date = time;
  } else {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
      time = parseInt(time);
    }
    if (typeof time === "number" && time.toString().length === 10) {
      time = time * 1000;
    }
    date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  };
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    if (key === "a") {
      return ["日", "一", "二", "三", "四", "五", "六"][value];
    }
    if (result.length > 0 && value < 10) {
      value = "0" + value;
    }
    return value || 0;
  });
  return time_str;
}

[/tab]

[tab title="调用示例"]

parseTime("1566458744391"); //不填写返回格式 默认为'{y}-{m}-{d} {h}:{i}:{s}'  2019-08-22 15:25:44
parseTime("1566458744391", "{y}-{m}-{d} {h}:{i}:{s}"); //填写对应格式  2019-08-22 15:25:44
parseTime("1566458744391", "{m}-{d}-{y} {h}:{i}:{s}"); //修改格式  08-22-2019 15:25:44
parseTime("1566458744391", "{m}-{d}-{y} {h}:{i}:{s} 周{a}"); //加上周  08-22-2019 15:25:44 周四

[/tab]

[/tabs]

2.获取字节长度

[tabs]

[tab title="代码内容"]

/**
 * @param {String} str
 * @returns {Number}
 */
function byteLength(str) {
  let s = str.length;
  for (var i = str.length - 1; i >= 0; i--) {
    const code = str.charCodeAt(i);
    if (code > 0x7f && code <= 0x7ff) s++;
    else if (code > 0x7ff && code <= 0xffff) s += 2;
    if (code >= 0xdc00 && code <= 0xdfff) i--;
  }
  return s;
}

[/tab]

[tab title="调用示例"]

byteLength("123"); //3
byteLength("蜡笔小新"); //12

[/tab]

[/tabs]

3.数组去重

[tabs]

[tab title="代码内容"]

/**
 * @param {Array} arr
 * @returns {Array}
 */
function uniqueArr(arr) {
  return Array.from(new Set(arr));
}

[/tab]

[tab title="调用示例"]

uniqueArr([1, 2, 1, 5, 3, 6, 5, 3, 2, 1]); //[ 1, 2, 5, 3, 6 ]

[/tab]

[/tabs]

4.字符串首字母大写

[tabs]

[tab title="代码内容"]

/**
 * @param {String} string
 * @returns {String}
 */
function uppercaseFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

[/tab]

[tab title="调用示例"]

uppercaseFirst("beautiful"); //Beautiful

[/tab]

[/tabs]

5.提取 url 地址中的参数

[tabs]

[tab title="代码内容"]

/**
 * @param {String} url
 * @returns {Object}
 */
function getQueryObject(url) {
  url = url == null ? window.location.href : url;
  const search = url.substring(url.lastIndexOf("?") + 1);
  const obj = {};
  const reg = /([^?&=]+)=([^?&=]*)/g;
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1);
    let val = decodeURIComponent($2);
    val = String(val);
    obj[name] = val;
    return rs;
  });
  return obj;
}

[/tab]

[tab title="调用示例"]

getQueryObject("https://www.你过来啊.com?tn=monline_3_dg&ie=utf-8&wd=%E5%93%88%E5%93%88%E5%93%88");
// { tn: 'monline_3_dg', ie: 'utf-8', wd: '哈哈哈' }

[/tab]

[/tabs]

6.数字的格式化

[tabs]

[tab title="代码内容"]

/**
 * 如 10000 => 10k
 * @param {number} num
 * @param {number} digits  位数
 */
export function numberFormatter(num, digits) {
  const si = [
    { value: 1e18, symbol: "E" },
    { value: 1e15, symbol: "P" },
    { value: 1e12, symbol: "T" },
    { value: 1e9, symbol: "G" },
    { value: 1e6, symbol: "M" },
    { value: 1e3, symbol: "k" },
  ];
  for (let i = 0; i < si.length; i++) {
    if (num >= si[i].value) {
      return (
        (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") +
        si[i].symbol
      );
    }
  }
  return num.toString();
}

[/tab]

[tab title="调用示例"]

numberFormatter(1001200); //1M
numberFormatter(1001200, 3); //1.101M
numberFormatter(1001200, 4); //1.1012M

[/tab]

[/tabs]

后续将慢慢补充其他未涉及到的方法，希望大家支持！