脚本

JavaScript

技巧、工具函数与常见校验，日常开发随手查。 — 共 41 条

共 41 条代码片段

A. 技巧类

过滤数组空值// 过滤空字符串、null、undefined、0、false
const arr = ["apple", null, "milk", undefined, "bread", "", 0, false];
const list = arr.filter(Boolean);
数组解构获取第一项的属性值const people = [
  { name: "a", age: 20 },
  { name: "b", age: 22 },
  { name: "c", age: 60 },
];
const [{ age }] = people; // 20
快速获取时间戳+new Date();
+new Date();
new Date() * 1;
new Date().valueOf();
new Date().getTime();
取整~~2.33; // 2
2.33 | 0; // 2
2.33 >> 0; // 2
保留 2 位小数不进行四舍五入Number(parseFloat(2.345).toFixed(3).slice(0, -1)); // 2.34
两个整数交换数值let a = 1,
  b = 2;
a ^= b;
b ^= a;
a ^= b;
获取随机布尔值const randomBoolean = () => Math.random() >= 0.5;
对象深拷贝// 方法 1：有缺陷，方法等会丢失
const newObj = JSON.parse(JSON.stringify(obj));

// 方法 2
function clone(obj) {
  if (obj === null) return null;
  if (typeof obj !== "object") return obj;
  if (obj.constructor === Date) return new Date(obj);
  if (obj.constructor === RegExp) return new RegExp(obj);
  const result = new obj.constructor();
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const val = obj[key];
      result[key] = typeof val === "object" ? clone(val) : val;
    }
  }
  return result;
}
判断对象的属性是否存在!!myObj["someProperty"]; // 无法判断 {}、[]
"someProperty" in myObj; // 会判断原型链
myObj.hasOwnProperty("someProperty"); // 不考虑原型链
合并对象// ES5
const obj = Object.assign({}, obj1, obj2);

// ES6
const obj2 = { ...obj1, ...obj2 };
合并数组// ES5
const arr = arrA.concat(arrB);

// ES6 去重合并
const arr2 = [...new Set([...arrA, ...arrB])];
取随机字符串Math.random().toString(16).substring(2); // 13 位
Math.random().toString(36).substring(2); // 11 位
反转字符串str.split("").reverse().join("");
字符串替换成星号"风起云涌".replace(/.(?=.)/g, "*"); // ***涌
phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"); // 131****5678
手机号格式/**
 * 手机号格式化
 * 13012345678 => 130-1234-5678
 */
const formatMobile = (phone, symbol = "-") => {
  if (typeof phone === "number") phone = phone.toString();
  return phone.replace(
    /(\d{3})(\d{4})(\d{4})/,
    "$1" + symbol + "$2" + symbol + "$3"
  );
};
数字格式化// 4 位分隔 1234 5678 9123 123
val.replace(/\s/g, "").replace(/([0-9]{4})(?=[0-9])/g, "$1 ");
数组去重[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]

function unique(arr) {
  const map = new Map();
  const result = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true);
      result.push(arr[i]);
    }
  }
  return result;
}
取出两个数组中不同元素function getArrDifference(arr1, arr2) {
  return arr1.concat(arr2).filter(function (v, i, arr) {
    return arr.indexOf(v) === arr.lastIndexOf(v);
  });
}
取出两个数组中相同元素function getArrEqual(arr1, arr2) {
  const newArr = [];
  for (let i = 0; i < arr2.length; i++) {
    for (let j = 0; j < arr1.length; j++) {
      if (arr1[j] === arr2[i]) newArr.push(arr1[j]);
    }
  }
  return newArr;
}
取出一个数组中的最大值和最小值const numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
Math.max.apply(Math, numbers); // 122205
Math.min.apply(Math, numbers); // -85411
// 或
Math.max(...numbers);
Math.min(...numbers);
数组中两个值交换位置function swapArr(arr, index1, index2) {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  return arr;
}
数组中将某个值置顶function toFirst(fieldData, index) {
  if (index !== 0) {
    fieldData.unshift(fieldData.splice(index, 1)[0]);
  }
}
判断数组中是否有重复元素function isRepeat(arr) {
  const hash = {};
  for (const i in arr) {
    if (hash[arr[i]]) return true;
    hash[arr[i]] = true;
  }
  return false;
}
数值边界判断// 判断 index 是否小于 0
index = Math.max(0, --index);

// 判断 index 是否大于 len
index = Math.min(len, ++index);
运行耗时计时console.time("Timer");
const arr = [];
for (let i = 0; i < 50; i++) {
  arr.push(i);
}
console.timeEnd("Timer");
判断给定的日期是否是工作日const isWeekday = (date) => date.getDay() % 6 !== 0;
滚动到页面顶部const goToTop = () => window.scrollTo(0, 0);
goToTop();

B. 公共函数

获取 url 中参数function getUrlParam(name) {
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  const r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURIComponent(r[2]);
  return null;
}
截取字符串function cutString(str, len) {
  if (!str) return "";
  if (str.length <= len) return str;
  return str.substring(0, len) + "...";
}
去掉所有的 HTML 标记function removeHtml(str) {
  return str.replace(/<[^>]+>/g, "");
}
补零function pad(num, n = 2) {
  let len = num.toString().length;
  while (len < n) {
    num = "0" + num;
    len++;
  }
  return num;
}
设置 / 读取 cookiefunction setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}
设置 / 获取 / 删除本地数据function setLocal(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function getLocal(key) {
  const val = localStorage.getItem(key);
  try {
    return JSON.parse(val);
  } catch {
    return val;
  }
}

function removeLocal(key) {
  localStorage.removeItem(key);
}
数据类型判断function typeOf(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
// typeOf([]) => "array"
// typeOf({}) => "object"
// typeOf(null) => "null"

C. 验证类

手机号验证function checkMobile(val) {
  return /^1[3-9]\d{9}$/.test(val);
}
QQ 号验证function checkQQ(val) {
  return /^[1-9][0-9]{4,10}$/.test(val);
}
微信号验证function checkWechat(val) {
  return /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/.test(val);
}
电子邮箱验证function checkEmail(val) {
  return /^[\w.-]+@[\w.-]+\.\w+$/.test(val);
}
身份证号验证function checkIdCard(val) {
  return /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(val);
}
中文验证function checkChinese(val) {
  return /^[\u4e00-\u9fa5]+$/.test(val);
}
图片类型验证function checkImage(val) {
  return /\.(gif|jpg|jpeg|png|bmp|webp)$/i.test(val);
}