javascript工具类函数

1
export const isString = (data) => typeof data === "string";
2
/**
3
 * 基础类型判断
4
 * @param value 要判断的数据
5
 */
6
const getBasicType = (value) => typeof value;
7
getBasicType("a"); // string
8
getBasicType(456); // number
9
getBasicType({}); // object
10
getBasicType([]); // object
11

12
/**
13
 * 类型判断
14
 * @param value 要判断的数据
15
 * @param type 类型
16
 * @return true or false
17
 */
18
const isType = (value, type: string): boolean => {
19
  const { toString } = {};
20
  return toString.call(value) === `[object ${type}]`;
21
};
22
const getType = (n: Object) => Object.prototype.toString.call(n).slice(8, -1);
23
getType(1); // number
24
getType("124"); // String
25
getType({}); // Object
26
getType([]); // Array
27
getType(Symbol(1)); // Symbol
28

29
isType({}, "Object"); // true
30
isType([], "Object"); // false

1
/**
2
 * 浅克隆
3
 * @param source 要浅克隆的目标对象
4
 */
5
const clone = (source: Object) => {
6
  if (!source) {
7
    return source;
8
  }
9
  const target = {};
10
  // eslint-disable-next-line guard-for-in
11
  for (const k in source) {
12
    target[k] = source[k];
13
  }
14
  return target;
15
};
16
/**
17
 * 深克隆
18
 * @param source 要深克隆的目标对象
19
 */
20
const deepClone = (source: Object | undefined) => {
21
  if (!source) {
22
    return source;
23
  }
24

25
  const target = new source.constructor();
26

27
  for (const key in source) {
28
    if (source.hasOwnProperty(key)) {
29
      target[key] =
30
        getType(source[key]) === "Object" || getType(source[key]) === "Array"
31
          ? deepClone(source[key])
32
          : source[key];
33
    }
34
  }
35

36
  return target;
37
};

1
/**
2
 * 检测对象属性变化
3
 * @param source 原对象
4
 * @param comparision 改变后的对象
5
 * @param ignoreFields 有些改变了不需要的key
6
 */
7
const iterable = (data) => ["Object", "Array"].includes(getType(data));
8
const isObjectChanged = (source, comparision, ignoreFields: string[] = []) => {
9
  if (!iterable(source)) return;
10
  // 类型不一致 数据已发生变化
11
  if (getType(source) !== getType(comparision)) {
12
    console.log(source);
13
    console.log(comparision);
14
    return true;
15
  }
16

17
  // 获取所有key
18
  const sourceKeys = Object.keys(source);
19
  // 将对比数据合并到数据源 并提取所有属性名
20
  const comparisonKeys = Object.keys({ ...source, ...comparision });
21

22
  // 两次key不同直接return
23
  if (sourceKeys.length !== comparisonKeys.length) {
24
    return true;
25
  }
26

27
  return comparisonKeys.some((key) => {
28
    // 对象类型继续递归
29
    if (iterable(source[key])) {
30
      return isObjectChanged(source[key], comparision[key], ignoreFields);
31
    } else {
32
      if (!ignoreFields.includes(key)) {
33
        if (source[key] !== comparision[key]) {
34
          console.log(key, source[key], comparision[key]);
35
        }
36
        return source[key] !== comparision[key];
37
      }
38
    }
39
  });
40
};

1
export function bytesToSize(size) {
2
  if (size < 0.1 * 1024) {
3
    //小于0.1KB，则转化成B
4
    size = size.toFixed(2) + "B";
5
  } else if (size < 0.1 * 1024 * 1024) {
6
    // 小于0.1MB，则转化成KB
7
    size = (size / 1024).toFixed(2) + "KB";
8
  } else if (size < 0.1 * 1024 * 1024 * 1024) {
9
    // 小于0.1GB，则转化成MB
10
    size = (size / (1024 * 1024)).toFixed(2) + "MB";
11
  } else {
12
    // 其他转化成GB
13
    size = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
14
  }
15
  return size;
16
}

1
// https://github.com/benkeen/country-region-data.git
2
import CountryRegionData from 'country-region-data/data.json';
3
const countryShortCodeObj = {};
4

5
const option = CountryRegionData.map(country => {
6
  const { countryName, regions, countryShortCode } = country;
7
  const children = regions.map(rg => {
8
    const { name: label } = rg;
9
    return {
10
      label, value: label
11
    }
12
  })
13
  countryShortCodeObj[countryName] = countryShortCode;
14
  return {
15
    label: countryName, value: countryName, children
16
  }
17
})
18

19
export { countryShortCodeObj }
20
export default option;
21

22
// 获取国家旗帜
23
[CN](https://purecatamphetamine.github.io/country-flag-icons/3x2/CN.svg)

1
const ls = {
2
  getItem(key: string) {
3
    let data = window.localStorage.getItem(key);
4
    if (data) {
5
      try {
6
        return JSON.parse(data);
7
      } catch (e) {
8
        console.error(e);
9
      }
10
    }
11
  },
12
  setItem(key: string, value: any) {
13
    try {
14
      window.localStorage.setItem(key, JSON.stringify(value));
15
    } catch (e) {
16
      console.error(e);
17
    }
18
  },
19
  removeItem(key: string) {
20
    window.localStorage.removeItem(key);
21
  },
22
};
23
export default ls;

1
// 中文
2
export const chinese = /^[\u0391-\uFFE5]+$/;
3
// 手机号
4
export const mobile = /^[0-9]\d{3,9}$/;
5
// 座机
6
export const landline = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
7
// 邮箱
8
export const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
9
// 网址
10
export const url =
11
  /^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/;
12
//禁止输入空格
13
export const blank = /^[^\s]*$/;
14
export const number = /^\d+$/;
15

16
//禁止只输入空格
17
export const onlyBlank = /^([\s\S]*\S).*$/;
18

19
export const password = /^.*(?=.*[0-9])(?=.*[a-zA-Z])\w{8,20}/;
20

21
// 特殊字符
22
export const specialReg =
23
  /[`~!#$%^&*()_\\+=<>?:/"{}|~！#￥%……&*（）={}|《》？：“”【】、；;',.‘’，。、\s+]/g;
24
// 日期格式传入日期+时间时校验也可通过
25
export const date =
26
  /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])(\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d)*$/;
27
export const dateTime =
28
  /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
29

30
// url
31
export const isUrl = (str: string) =>
32
  /^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/.test(
33
    str
34
  );

1
/* 判断pc移动端 */
2
export function IsMobile() {
3
  var userAgentInfo = navigator.userAgent;
4
  var Agents = [
5
    "Android",
6
    "iPhone",
7
    "SymbianOS",
8
    "Windows Phone",
9
    "iPad",
10
    "iPod",
11
  ];
12
  var flag = false;
13
  for (var v = 0; v < Agents.length; v++) {
14
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
15
      flag = true;
16
      break;
17
    }
18
  }
19
  return flag;
20
}

1
/**
2
 * 获取字符串长度，英文字符 长度1，中文字符长度2
3
 * @param {*} str
4
 */
5
export const getStrFullLength = (str = "") =>
6
  str.split("").reduce((pre, cur) => {
7
    const charCode = cur.charCodeAt(0);
8
    if (charCode >= 0 && charCode <= 128) {
9
      return pre + 1;
10
    }
11
    return pre + 2;
12
  }, 0);
13
/**
14
 * 获取字符串宽度
15
 * @param {*} str
16
 */
17
export const textSize = (fontSize, fontFamily, text) => {
18
  var span = document.createElement("span");
19
  var result = {};
20
  result.width = span.offsetWidth;
21
  result.height = span.offsetHeight;
22
  span.style.visibility = "hidden";
23
  span.style.fontSize = fontSize;
24
  span.style.fontFamily = fontFamily;
25
  span.style.display = "inline-block";
26
  document.body.appendChild(span);
27
  if (typeof span.textContent !== "undefined") {
28
    span.textContent = text;
29
  } else {
30
    span.innerText = text;
31
  }
32
  result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
33
  result.height =
34
    parseFloat(window.getComputedStyle(span).height) - result.height;
35
  return result;
36
};
37

38
/** 字符串前后补0操作 */
39
"123".padStart(5, 0); // 00123
40
"123".padEnd(4, 0); // 1230
41

42
/** 生成随机ID */
43
const randomId = (len) => Math.random().toString(36).substr(3, len);
44
const id = randomId(10);
45

46
/** 生成随机HEX色值 */
47
const randomColor = () =>
48
  "#" +
49
  Math.floor(Math.random() * 0xffffff)
50
    .toString(16)
51
    .padEnd(6, "0");
52
const color = randomColor();

1
// 创建长度为7的数组
2
Array.from({ length: 7 }); //[undefined, undefined, undefined, undefined, undefined, undefined, undefined]
3

4
// 创建长度为3的数组 并向其中插入0
5
const length = 3;
6
const init = 0;
7
const result = Array.from({ length }, () => init); // [0,0,0]
8
const arr = new Array(length).fill(0); // [0,0,0]
9

10
// Array.from的第二个参数，可以遍历数组 相当于map
11
let b = [1, 2, 3];
12
console.log(Array.from(b, (v) => v + 2)); // [3,4,5]
13

14
/**
15
 * 求数组差集
16
 */
17
export const subSet = function (arr1, arr2) {
18
  let set1 = new Set(arr1);
19
  let set2 = new Set(arr2);
20
  let subset = [];
21
  for (let item of set1) {
22
    if (!set2.has(item)) {
23
      subset.push(item);
24
    }
25
  }
26
  return subset;
27
};
28

29
/**
30
 * 数组解构赋值
31
 */
32
const a = [1, 2, 3, 4];
33
const [b, c, ...d] = a;
34
b; // 1
35
c; // 2
36
d; // [3,4]
37
// 也可以使用对象的方式解构 key对应下标 可以直接获取数组length
38
const { 0: b, length, [length - 1]: last } = arr;
39
b; // 1
40
last; // 4
41
length; // 4
42

43
/**
44
 * 数组克隆
45
 */
46
const clone = (arr) => arr.slice(0);
47
const clone = (arr) => [...arr];
48
const clone = (arr) => Array.from(arr);
49
const clone = (arr) => arr.map((x) => x);
50
const clone = (arr) => arr.concat([]);
51
const clone = (arr) => JSON.parse(JSON.stringify(arr));

1
/**
2
 * 数字加，
3
 */
4
export const formatNumber = function (n) {
5
  var b = parseInt(n).toString()
6
  var len = b.length
7
  if (len <= 3) { return b }
8
  var r = len % 3
9
  return r > 0 ? b.slice(0, r) + ',' + b.slice(r, len).match(/\d{3}/g).join(',') : b.slice(r, len).match(/\d{3}/g).join(',')
10
}
11

12
(v) => ${v}.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => ${s},)
13

14
export const thousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
15
const money = thousandNum(2548745.45); // '2,548,745.45'

1
/**
2
 * 文件下载
3
 * @param {Object} url
4
 */
5
export async function downLoadFile(url, name) {
6
  const response = await service({
7
    method: "get",
8
    url,
9
    responseType: "arraybuffer",
10
  });
11
  // 内容转变成blob地址
12
  const blob = await new Blob([response.data], {
13
    type: "application/vnd.ms-excel",
14
  });
15
  // 创建隐藏的可下载链接
16
  const objectUrl = window.URL.createObjectURL(blob);
17
  const a = document.createElement("a");
18
  a.href = objectUrl;
19
  name && (a.download = name);
20
  document.body.appendChild(a);
21
  a.click();
22
  setTimeout(() => document.body.removeChild(a), 1000);
23
}