Common methods in projects

catalogue

1, Array string conversion method

1. Convert string or number to array

2. Convert array to string

2, Time - common conversion methods

1. Prohibit selection of Sundays

2. Prohibit date selection interval

(1) Start date use

(2) End date usage

3. Enter the date and return the date in the specified format

4. Pass in the date and return the date in the format of moment

3, Object - common conversion methods

1. Judge whether the object multi-layer structure data exists or not, and return undefined

2. Judge whether the values in object 1 are equal in object 2 and return true. If one value is not equal, return false. The newly added fields in objnew will not be processed, but only the fields in objPrep

4, Digital - common conversion methods

1. Judge whether it is empty. If it is not empty, it is true

2. Enter a positive number limit and return undefined if it cannot be parsed

3. Digital thousands Division

4. Thousand bit string to normal number

5. Class component specific method change method

You can npm install dependent packages

npm install comm-utils -S
import * as commUtils from "comm-utils";

1, Array string conversion method

1. Convert string or number to array

explain:

Convert the incoming data into an array and return it. Separate: intercept separa tor, default "," split (optional)

let resStr = checkTypeBackArray(str, separa)
inputoutput
checkTypeBackArray('1,2,3,4')["1","2","3","4"]
checkTypeBackArray("1;2;3;4", ";")["1","2","3","4"]
// Determine whether the data is a string or a number and convert it into an array
export function checkTypeBackArray(str: any, separa: string = ",") {
  if (str) {
    if (typeof str === "string" || typeof str === "number") {
      let bcValue = str.toString().split(separa);
      return bcValue;
    } else if (Object.prototype.toString.call(str) === "[object Array]") {
      return str;
    }
  } else {
    return [];
  }
}

2. Convert array to string

explain:

Convert the incoming data into a string and return it. Separate: intercept separa tor, default "," splice (optional)

let resArr = checkTypeBackString(arr, separa?)
inputoutput
checkTypeBackString([1,2,3,4])"1,2,3,4"
checkTypeBackString([1,2,3,4], ";")"1;2;3;4"
// Judge the data as an array and convert it into a string
export function checkTypeBackString(arr: any, separa: string = ",") {
  if (arr) {
    if (typeof arr === "string" || typeof arr === "number") {
      return arr;
    } else if (Object.prototype.toString.call(arr) === "[object Array]") {
      let bcValue = arr.join(separa);
      return bcValue;
    }
  } else {
    return "";
  }
}


2, Time - common conversion methods

The moment Based on JS, you need to introduce moment before use.  

1. Prohibit selection of Sundays

explain:

Prohibit selection of Sundays

import { DatePicker } from "antd";
import { disableDateWeek } from "";

<DatePicker
  disabledDate={e => disableDateWeek(e)}
/>
// Prohibit selection of Sundays
export function disableDateWeek(e: object) {
  var weekOfday = moment(e).format("E");
  if (weekOfday === "6" || weekOfday === "7") {
    return true;
  } else {
    return false;
  }
}

2. Prohibit date selection interval

Description:

Prohibit date selection interval

startDt: start date (optional)

endDt: end date (optional)

Disebeforetoday: select the date before today. The default is false (optional)

dtFormat: time format, default "YYYY-MM-DD" (optional)

(1) Start date use

disabledStartDt(e, startDt, endDt, disBeforeToday, dtFormat)
<DatePicker
  disabledDate={e => commUtils.disabledStartDt(e, startDate, endDate)}
/>
// Disable start date selection
export function disabledStartDt(e: any, startDt?: any, endDt?: any, disBeforeToday?: boolean, dtFormat: string = formatDate) {
  e = moment(e).format(dtFormat);
  if (e && typeof e == "string") {
    e = moment(e, dtFormat);
  }
  if (startDt && typeof startDt == "string") {
    startDt = moment(startDt, dtFormat);
  }
  if (endDt && typeof endDt == "string") {
    endDt = moment(endDt, dtFormat);
  }
  if (e && endDt) {
    if (disBeforeToday) {
      return e < moment().startOf("day") || e.valueOf() > endDt.valueOf();
    }
    return e.valueOf() > endDt.valueOf();
  } else if (e && disBeforeToday) {
    return e < moment().startOf("day");
  }
  return false;
}

(2) End date usage

disabledEndDt(e, startDt, endDt, disBeforeToday, dtFormat)
<DatePicker
  disabledDate={e => commUtils.disabledEndDt(e, startDate, endDate)}
/>
// Disable end date selection
export function disabledEndDt(e: any, startDt?: any, endDt?: any, disBeforeToday?: boolean, dtFormat: string = formatDate) {
  e = moment(e).format(dtFormat);
  if (e && typeof e == "string") {
    e = moment(e, dtFormat);
  }
  if (startDt && typeof startDt == "string") {
    startDt = moment(startDt, dtFormat);
  }
  if (endDt && typeof endDt == "string") {
    endDt = moment(endDt, dtFormat);
  }
  if (e && startDt && endDt) {
    let res =
      startDt.valueOf() > endDt.valueOf() ? endDt.valueOf() : startDt.valueOf();
    if (disBeforeToday) {
      return e < moment().startOf("day") || e.valueOf() > res.valueOf();
    }
    return e.valueOf() < res.valueOf();
  } else if (e && startDt) {
    if (disBeforeToday) {
      return e < moment().startOf("day") || e.valueOf() < startDt.valueOf();
    }
    return e.valueOf() < startDt.valueOf();
  } else if (e && disBeforeToday) {
    return e < moment().startOf("day");
  }
  return false;
}

3. Enter the date and return the date in the specified format

explain:

T: return the original data without wearing, t=today return the current date (optional)

dtFormat: time format, default "YYYY-MM-DD" (optional)

        let res = backFormatDate(t, dtFormat)

/*
  Enter the date and return the date in the specified format
  t: Return the original data without threading, and t=today returns the current date (optional)
  dtFormat: Time format, default "YYYY-MM-DD" (optional)
*/
export function backFormatDate(t?:any, dtFormat: string = formatDate) {
  if(t==='today'){
    return moment().format(dtFormat);
  } else {
    if (t) {
      return moment(t, dtFormat).format(dtFormat);
    } else {
      return t;
    }
  }
}

4. Pass in the date and return the date in the format of moment

explain:

dtFormat: time format, default "YYYY-MM-DD" (optional)

let res = backFormatMoment(t, dtFormat)
/*
  Pass in the date and return the date in the format of moment
  dtFormat: Time format, default "YYYY-MM-DD" (optional)
*/
export function backFormatMoment(t:any, dtFormat: string = formatDate) {
  return t? moment(t, dtFormat): t;
}

3, Object - common conversion methods

1. Judge whether the object multi-layer structure data exists or not, and return undefined

let res= checkHasData(obj, ['key1', 'key2', 'key3', 'key4'])
/*
  Judge whether the object multi-layer structure data exists or not, and return undefined
  let res= checkHasData(data, ['key1', 'key2', 'key3', 'key4'])
*/
export function checkHasData(obj: object, arr: Array<string>, idx?: number): any {
  let res;
  let i = 0;
  if (idx) {
    i = idx;
  }
  if (arr.length <= i) {
    res = obj;
  } else {
    const element = arr[i];
    if (element) {
      if (obj[element]) {
        return checkHasData(obj[element], arr, i + 1);
      }
    }
  }
  return res;
}

2. Judge whether the values in object 1 are equal in object 2 and return true. If one value is not equal, return false. The newly added fields in objnew will not be processed, but only the fields in objPrep

objPrep Original object, objNew New object
arr Specify the in the array key No comparison, e.g['id'] (Optional)
let objPrep = {
    a: 1,
    b: 2
}
let objNew = {
    a: 11,
    b: 2
}
compareDataBlur(objPrep, objNew)
Inputoutput
compareDataBlur(objPrep, objNew)false
compareDataBlur(objPrep, objNew, ["a"])true
/*
  Judge whether the values in object 1 are equal in object 2, and return true,
  If one value is not equal, false is returned,
  objNew The newly added fields in objPrep are not processed, only the fields in objPrep are processed
  objPrep Original object, objNew, new object
  arr The key s in the specified array are not compared, such as ['userID '] (optional)
*/
export function compareDataBlur(objPrep: object, objNew: object, arr?: Array<string>) {
  if ((objPrep && !objNew) || (objNew && !objPrep)) {
    return false;
  }
  let flag = true;
  for (var key in objNew) {
    // objNew[key] has no value. No comparison is made
    if (objPrep.hasOwnProperty(key)) {
      let flag1 =
        objPrep[key] !== null && objPrep[key] !== undefined && objPrep[key] !== "";
      let flag2 =
        objNew[key] !== null && objNew[key] !== undefined && objNew[key] !== "";
      let flag3 = (arr || []).indexOf(key);
      if (flag3 == -1) {
        if (flag1 || flag2) {
          if (JSON.stringify(objPrep[key]) != JSON.stringify(objNew[key])) {
            console.log("diff", key, objPrep[key], objNew[key]);
            flag = false;
          }
        }
      }
    }
  }
  return flag;
}

4, Digital - common conversion methods

1. Judge whether it is empty. If it is not empty, it is true

notNull(value)
/*
Judge whether it is empty. If it is not empty, it is true
*/
export function notNull(value: any) {
  return !(!value && value !== 0);
}

2. Enter a positive number limit and return undefined if it cannot be parsed

explain:

The onChange method is recommended

Input input number limit e(value)

Dotnum (decimal places) (optional)

        inputOnlyNumber(e, dotNum = 2)

/*
Enter a positive number limit and return undefined if it cannot be parsed
input Enter the number of decimal places (nutdom)
*/
export function inputOnlyNumber(e: any, dotNum: number = 2, minusFlag?: boolean) {
  let value = e.replace(/[^\d.]/g, "");
  if (minusFlag) {
    value = value.replace(/[^\-?\d.]/g, "");
  }
  let str = `'${value}'`;
  let idx1 = str.indexOf(".");
  let idx0 = str.indexOf("00");
  // The first is the small input point, empty
  if (idx1 === 1) {
    value = "";
    return;
  }
  // Multiple zeros appear at the front, clear
  if (idx0 === 1) {
    value = "";
    return;
  }
  // Remove the first '.' Back point
  value = value
    .replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".");
  str = `'${value}'`;
  idx1 = str.indexOf(".");
  // Keep several decimal places when there is a decimal point
  if (idx1 != -1) {
    value = value.slice(0, value.indexOf(".") + (dotNum) + 1);
  }
  return value;
}

3. Digital thousands Division

let res = changeToThousand(num);
/*
Digital thousands Division
*/
export function changeToThousand(num: any) {
  if (!notNull(num)) {
    return num;
  }
  let resNum;
  num = (num + "").replace(/,/g, "");
  resNum = Number(num);
  if (resNum >= 0) {
    return (
      num && num.toString().replace(/^\d+/, (m: any) => m.replace(/(?=(?!^)(\d{3})+$)/g, ","))
    );
  } else {
    num = 0 - num;
    return (
      "-" +
      (num && num.toString().replace(/^\d+/, (m: any) => m.replace(/(?=(?!^)(\d{3})+$)/g, ",")))
    );
  }
}

4. Thousand bit string to normal number

let res = stringToThousand(num);
/*
Thousand bit string to normal number
*/
export function stringToThousand(num: any) {
  if (!notNull(num)) {
    return num;
  }
  return num.replace(/\,/g, "");
}

5. Class component specific method change method

explain:

Class component specific methods

The onChange method is recommended

Enter the change e input box value, obj={objKey: 'value of object', key: 'key value'},

For example: this state. Obj = {A: '1'}, then obj={objKey: 'obj', key: 'a'}

objKey does not exist. Set it directly to obj = {key: 'a'}, this state. a = '1'

Type type: time, inputNumber, and the rest are by default (optional)

cd fallback (optional)

changeFun(e, _this, obj, type, cd)
/* Class component specific methods
 Enter the change e input box value, obj={objKey: 'value of object', key: 'key value'},
For example: this state. Obj = {A: '1'}, then obj={objKey: 'obj', key: 'a'}
objKey There is no direct setting to obj = {key: 'a'}, this state. a = '1'
type Type: time, inputNumber, and the rest go by default
*/
export function changeFun(e: any, _this: any, obj: any, type?: string, cd?: (__e: any, __this: any, __obj: any, __type?: string) => void) {
  let val = e;
  if (type == "time") {
    val = backFormatDate(e, obj.dateFormat);
  } else {
    val = e && e.target ? e.target.value : e;
  }
  if (obj.objKey) {
    let dt = JSON.parse(JSON.stringify(_this.state[obj.objKey]));
    if (type == "inputNumber") {
      val =
        inputOnlyNumber(val, obj.dotNum) !== undefined
          ? inputOnlyNumber(val, obj.dotNum)
          : dt[obj.key];
    }
    dt[obj.key] = val;
    _this.setState(
      {
        [obj.objKey]: dt
      },
      () => {
        if (cd) {
          cd(e, _this, obj, type);
        }
      }
    );
  } else {
    if (type == "inputNumber") {
      val =
        inputOnlyNumber(val, obj.dotNum) !== undefined
          ? inputOnlyNumber(val, obj.dotNum)
          : _this.state[obj.key];
    }
    _this.setState(
      {
        [obj.key]: val
      },
      () => {
        if (cd) {
          cd(e, _this, obj, type);
        }
      }
    );
  }
}

I hope you can point out the deficiencies in time. Thank you.  

Keywords: Javascript TypeScript

Added by NDK1971 on Sun, 06 Mar 2022 04:31:19 +0200