前端公共方法的整理js

抓到一只中秋
130 阅读4分钟

一.检验字符串是否符合某个标准

下面为一个js/ts文件，页面中引用该方法即可。下图为该js/ts文件的大致模板。

image-20220111195057769

文件头部：

export default {

1.监测字符串是否符合 '2000-01-01' 格式

  // 监测字符串是否符合 '2000-01-01' 格式
  isTime1(str) {
    if (str) {
      if (Number(str.slice(0, 4))
        && str.slice(4, 5) === '-'
        && Number(str.slice(5, 7))
        && str.slice(7, 8) === '-'
        && Number(str.slice(8, 10))
        && str.length === 10) {
        return true
      }
    }
  },

2.监测是否为空值

  // 判断是否为空值 ⬇⬇⬇
  isNullValue(value) {
    return [null, undefined, ''].includes(value)
  },

3.监测是否全数字字符

  // 监测是否全数字字符 ⬇⬇⬇
  isNumberValue(str) {
    var patrn = /^[0-9]*$/im;
    if (!patrn.test(str)) {// 如果不是纯数字返回false
      return false;
    }
    return true;
  },

4.监测身份证格式是否正确

  // 监测身份证格式是否正确 ⬇⬇⬇
  isIdCardValue(str) {
    var patrn = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/im;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

5.监测只能输入英文和数字

  // 监测只能输入英文和数字 ⬇⬇⬇
  isEnglishNumber(str) {
    var patrn = /^[0-9a-zA-Z_]*$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

6.监测邮箱格式是否正确

只允许英文字母、数字、下划线、英文句号、以及中划线组成

  // 监测邮箱只允许英文字母、数字、下划线、英文句号、以及中划线组成
  isEmail(str) {
    var patrn = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

7.监测是否是正数

  // 正数的正则表达式：
  isPositiveNumber(str) {
    // true 1、0.1、 0.001、99.01
    // false 00.1、1.00、1.0
    var patrn = /^[+]{0,1}[1-9]\d*$|^[+]{0,1}(0.\d*[1-9])$|^[+]{0,1}([1-9]\d*.\d*[1-9])$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

8.监测是否是正浮点数

  // 监测是否是正浮点数 ⬇⬇⬇
  isFloatNumber(str) {
    var patrn = /^[1-9]\d*.\d*|0.\d*[1-9]\d*$/;
​
    if (!patrn.test(str)) {// 如果不是纯数字返回false
      return false;
    }
    return true;
  },

9.监测手机号格式是否正确(国内)

  // 监测手机号格式是否正确 ⬇⬇⬇
  isPhoneNoValue(str) {
    var patrn = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

10.监测字符串长度

一个汉字==两个字符

  // 监测字符串长度 一个汉字==两个字符
  realLength(str) {
    if (str) {
      return str.replace(/[^\x00-\xff]/g, "**").length; // [^\x00-\xff] - 匹配非双字节的字符 
    }
  },

11.监测字符串是否符合 '2000年01月01日' 格式

    // 监测字符串是否符合 '2000年01月01日' 格式
  isTime2(str) {
    if (str) {
      if (Number(str.slice(0, 4))
        && str.slice(4, 5) === '年'
        && Number(str.slice(5, 7))
        && str.slice(7, 8) === '月'
        && Number(str.slice(8, 10))
        && str.slice(10, 11) === '日'
        && str.length === 11) {
        return true
      }
    }
  },

12.监测密码是否含有大小写字母，数字，特殊字符，6到20为之间

  // 监测密码是否含有大小写字母，数字，特殊字符，6到20为之间
  isPaaword(str) {
    var patrn = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_-+=<>.?:"{}].*).{6,20}$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

13.把字符串'20000101'处理成'2000-01-01'格式

  // 把字符串'20000101'处理成'2000-01-01'格式
  setTime4(str) {
    if (str) {
      return str.slice(0, 4) + '-' + str.slice(4, 6) + '-' + str.slice(6, 8)
    }
  },

14.把字符串'20000101'处理成'2000年01月01日'格式

  // 把字符串'20000101'处理成'2000年01月01日'格式
  setTime4(str) {
    if (str) {
      return str.slice(0, 4) + '年' + str.slice(4, 6) + '月' + str.slice(6, 8) + '日'
    }
  },

15.随机获取buildUUID(32位)

列：d534c9fa3f4a44c0b23d2c90fd8d2cea

//获取buildUUID(32位)  
getBuildUUID() {
    const hexList: string[] = [];
    for (let i = 0; i <= 15; i++) {
      hexList[i] = i.toString(16);
    }
    let uuid = '';
    for (let i = 1; i <= 36; i++) {
      if (i === 9 || i === 14 || i === 19 || i === 24) {
        uuid += '-';
      } else if (i === 15) {
        uuid += 4;
      } else if (i === 20) {
        uuid += hexList[(Math.random() * 4) | 8];
      } else {
        uuid += hexList[(Math.random() * 16) | 0];
      }
    }
    return uuid.replace(/-/g, '');
  },

16.获取当前时间('YYYY-MM-DD HH:mm:ss')

需先引入moment

import moment from 'moment';

  // 获取当前时间
  getTime() {
    return moment().format('YYYY-MM-DD HH:mm:ss');
  },

17.监测'YYYY-MM-DD HH:mm:ss'时间格式

  // 验证'YYYY-MM-DD HH:mm:ss'时间格式
  isTime(str) {
    var patrn = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
    if (!patrn.test(str)) {// 如果正确返回false
      return false;
    }
    return true;
  },

18.获取当前时间后面的某一（number）天

  // 获取当前时间后面的某一（number）天
  getTimeDay(number) {
    var dd = new Date();
    dd.setDate(dd.getDate() + number);//获取number天后的日期
    var y = dd.getFullYear();
    var m = dd.getMonth() + 1;//获取当前月份的日期
    var d = dd.getDate();
    var h = dd.getHours();
    var min = dd.getMinutes();
    return y + "-" + m + "-" + d + " " + h + ":" + min;
  },

19.JS判断一个数组中是否包含另一个数组

方法一：使用filter,indexOf

let arr1=[1,2,3]
let arr2=[1,3,4,2]
let arrNew = arr1.filter(function(val){ return arr2.indexOf(val)>-1})
 
arrNew.length==arr1.length

方法二：使用Underscore.js

let arr1=[1,2,3]
let arr2=[1,3,4,2]
let arrNew=_.intersection(arr1,arr2)

arrNew.length==arr1.length

20.1661756385019时间戳转日期字符串

21.Tue May 15 2018 00:00:00 GMT+0800 (中国标准时间)转日期字符串

22.传值为空则获取今日日期字符串

  /*
  * @Author: zxl 2641337277@qq.com
  * @Date: 2022-08-29 11:42:57
  * @LastEditors: zxl 2641337277@qq.com
  * @LastEditTime: 2022-08-29 13:53:04
  * @FilePath: /taizhou-dispatching-command-web/src/utils/timeFun.ts
  * @Description1: 1661756385019时间戳转日期字符串
  * @Description2: Tue May 15 2018 00:00:00 GMT+0800 (中国标准时间)转日期字符串
  * @Description3: 传值为空则获取今日日期字符串
  */
  getStandardTime(str) {
    var date;
    if (Number(str) > 0) {
      date = new Date(Number(str));
    } else if (str) {
      date = new Date(str);
    } else {
      date = new Date();
    }
    let y = date.getFullYear()
    let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
  },

23.日期字符串转Tue May 15 2018 00:00:00 GMT+0800 (中国标准时间)

/*
  * @Author: zxl 2641337277@qq.com
  * @Date: 2022-08-29 11:42:57
  * @LastEditors: zxl 2641337277@qq.com
  * @LastEditTime: 2022-08-29 13:53:04
  * @FilePath: /taizhou-dispatching-command-web/src/utils/timeFun.ts
  * @Description: 日期字符串转Tue May 15 2018 00:00:00 GMT+0800 (中国标准时间)
  */
  parserDate(date) {
    var t = Date.parse(date)
    if (!isNaN(t)) {
      return new Date(Date.parse(date.replace(/-/g, '/')))
    }
  },

文件结尾：

}

二.filter，map和reduce

filter()函数的作用主要是对数组进行条件过滤，条件为Boolean值，不是true就是false

1.筛选数组中不符合某些条件的数据

      const arr = ['11', '52', '15', '88', '68', '421', '23', '64'];
      let totalFirst = arr.filter(function (e) {
        return Number(e) < 400;
      });
      console.log(totalFirst);
       
      //['11', '52', '15', '88', '68', '23', '64']

map()函数的主要作用是对过滤之后的新数组进行重新映射

2.根据筛选后的数据对每项进行二倍处理

      let totalmap = arr
        .filter(function (e) {
          return Number(e) < 400;
        })
        .map(function (e) {
          return Number(e) * 2;
        });
      console.log(totalmap);
        
      //[22, 104, 30, 176, 136, 46, 128]

reduce()函数的主要作用是对数组的结果进行汇总，改函数至少要有两个参数

reduce共有四个参数，分别为：reduce(total,currentValue,currentIndex,arr)

total必需。初始值, 或者计算结束后的返回值。
currentValue必需。当前元素
currentIndex可选。当前元素的索引
arr可选。当前元素所属的数组对象。

3.根据二倍处理后的数据进行求和处理

      let totalreduce = arr
        .filter(function (e) {
          return Number(e) < 400;
        })
        .map(function (e) {
          return Number(e) * 2;
        }).reduce(function(pre,e){
          return pre+Number(e)
        });
      console.log(totalreduce);
                
       //642
avatar
文章
阅读
粉丝