工具函数

js工具函数

toFixed 精度高的用法

function round(number, precision) {
  return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
}
* 注意整数使用toFixed 写法需要括号(6).toFixed(2)

switch实现

• 数组+索引

  function previewWeek(i) {
    return  i > 0 && i < 8 ? '星期'+['一','二','三','四','五','六','日'][i-1] : '';
  }

• map

  function previewWeek(i){
    let weeksMap = new Map([
        [1, '一'],
        [2, '二'],
        [3, '三'],
        [4, '四'],
        [5, '五'],
        [6, '六'],
        [7, '日']
    ]);
    return weeksMap.get(i) ? '星期'+weeksMap.get(i) : '';
  }

过滤数组中的false

let arr = [1, 0, undefined, null, false];
arr.filter(Boolean);

创建一个纯净的空对象

let dict = Object.create(null);
dict.__proto__ === "undefined"

合并对象

const page = {
    current: 1,
    pageSize: 10
}

const obj = {
    name: '',
    sex: ''
}
const params = {...obj, ...page};

解构赋值使用别名

const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

数组map方法，抽离数组对象中的某个属性

const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];
const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);

有条件的对象属性

• 根据一个条件创建两个不同的对象，可以使用展开运算符号来处理

  const getUser = (emailIncluded) => {
    return {
      name: 'John',
      surname: 'Doe',
      ...emailIncluded && { email : 'john@doe.com' }
    }
  }
  const user = getUser(true);
  console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }
  const userWithoutEmail = getUser(false);
  console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

公用的正则表达式

• 国内座机号码（0341-86091234）

  let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;

• 中文型姓名

  let reg = /^([\u4e00-\u9fa5·]{2,10})$/;

• 车牌号

  // 新能源车牌号
  let reg =  /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/;
  // 非新能源车牌号
  let reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
  // 新能源车牌号+非新能源车牌号
  let reg = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/;

• 手机号校验

  // 手机号严谨
  let reg = /^1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/;
  // 手机号宽松
  let reg = /^1[3-9]\d{9}$/;
  或者 let reg = /^1[3456789]\d{9}$/;
  // 手机号（最简单的11位校验）
  let reg = /^1\d{10}$/;

• email地址

  let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

• 身份证

  // 一代身份证(15位数)
  let reg = /^\d{8}(0\d|11|12)([0-2]\d|30|31)\d{3}$/;
  // 二代身份证(18位数)
  let reg = /^\d{6}(18|19|20)\d{2}(0\d|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/;
  // 一代身份证+二代身份证
  let reg = /(^\d{8}(0\d|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;

年月日格式替换

filterDate(date) {
  let _date = date.replace(/[年月]/g, '-');
  let _day = _date_.replace(/[日]/, '');
  return _day;
},

filterDateName(date) {
  let [year, month, day] = `${date}`.split('-');
  return `${year}年${month}月${day}日`;
},

js简单粗暴截断数组

let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);
Output: [0, 1, 2];

随机排列数组中的元素

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.sort(function() { return Math.random() - 0.5}));

展平多维数组

let entries = [1, [2, 5], [6, 7], 9];
let flat_entries = [].concat(...entries);

提取唯一值

let entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1];
let unique_entries = [...new Set(entries)];
console.log(unique_entries); // [1, 2, 3, 4, 5, 6, 7, 8]

动态属性名称

const dynamic = 'flavour';
let item = {    name: 'Coke',    [dynamic]: 'Cherry'};
console.log(item); // { name: "Coke", flavour: "Cherry" }

手机号码脱敏显示 前三位和后三位

secretPhone(phone) {
  if(!phone || phone.length !== 11) {
    return ''
  } 
  return phone
    .match(/(\d{3})(\d{5})(\d{3})/)
    .slice(1)
    .reduce(function(value, item, index) {
      return index === 1 ? value + '*****' : value + item;
    });
}

数组乱序

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)
// 测试
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr))

滚动到顶部、滚动到底部

• “smooth “来实现平滑的滚动动画
• 如scrollToTop方法，scrollToBottom方法

  const scrollToTop = (element) => {
    element.scrollIntoView({ behavior: "smooth", block: "start" })
  }
  
  const scrollToBottom = (element) => {
    element.scrollIntoView({ behavior: "smooth", block: "end" })
  }

生成随机颜色

const generateRandomHexColor = () => {
  return `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
}

JavaScript常见错误

• To Learn More