JS技巧

1、交换变量

    let [a, b] = [1,2]
    ;[a, b] = [b, a]

2、对setTimeout的进阶使用

    // 第一步：封装一个等待函数
    const wait = t => new Promise(resolve => setTimeout(() => resolve(), Number(t)))
    // 第二步：具体使用方式举例：(伪代码)
    async function getList(){
      console.log(1)
      await wait(3000) // 代码在此处阻塞3s，再运行后续代码
      console.log(2)
    }

3、逗号运算符，精简函数

    // 统计每个字符出现的次数
    function calcStrNum(str = ''){
        return str.split('').reduce((prev, item) => {
            prev[item] = prev[item] ? prev[item] + 1 : 1
            return prev
        }, {})
    }
    calcStrNum('xxaskdhsadkflhaiewzkksdfb')
    // ------> 改造。逗号运算符具有最低的优先级，紧跟代码后，可以直接用作返回值
   function calcStrNum(str = ''){
        return str.split('').reduce((prev, item) => (prev[item] = prev[item] ? prev[item] + 1 : 1, prev), {})
    }

4、函数柯里化

    const isType = type => val => type === Object.prototype.toString.call(val).slice(8, -1)
    const isArray = isType('Array')
    const isObject = isType('Object')
    const isNull = isType('Null')
    const isUndefined = isType('Undefined')
    const isFunction = isType('Function')
    const isRegExp = isType('RegExp')
    const isString = isType('String')
    const isNumber = isType('Number')
    const isDate = isType('Date')
    const isError = isType('Error')

5、安全获取深层次数据

    // 假定这样的数据
    const data = {
        person: {
            info: {
                name: '张三',
                address: '北京市朝阳区'
            }
        }
    }
    // 1、传统取值
    const address = data.person ? data.person.info ? data.person.info.address : '' : ''
    // 2、es10以上特性
    const address = data?.person?.info?.address ?? ''
    // 3、通用解决方案(封装一个函数解决)
    const isType = type => val => type === Object.prototype.toString.call(val).slice(8, -1)
    const isNull = isType('Null')
    const isUndefined = isType('Undefined')
    const safeGet = function (run, defaultVal = '') {
      try {
        const res = run()
        return isUndefined(res) || isNull(res) || res === '' ? defaultVal : res
      } catch(e) {
        return defaultVal 
      } 
    }
    safeGet(() => data.person.info.address, '')

6、时间日期格式化

const dateFormater = function (formater = 'YYYY-MM-DD hh:mm:ss', t = new Date()){
  const dt = new Date(t)
  let [Y, y, M, D, h, m, s] = [dt.getFullYear() + '', String(dt.getFullYear()).slice(2, 4), dt.getMonth() + 1, dt.getDate(), dt.getHours(), dt.getMinutes(), dt.getSeconds()]
  ;[M, D, h, m, s] = [`0${M}`.slice(-2), `0${D}`.slice(-2), `0${h}`.slice(-2), `0${m}`.slice(-2), `0${s}`.slice(-2)]
  return formater.replace(/YYYY|yyyy/g, Y)
                 .replace(/YY|yy/g, y)
                 .replace(/MM/g, M)
                 .replace(/DD/g, D)
                 .replace(/hh/g, h)
                 .replace(/mm/g, m)
                 .replace(/ss/g, s)
}
dateFormater('yyyyMMDD')

7、空值过滤

    const arr = [1,32,'', undefined, null, 123].filter(Boolean)

8、函数参数必填项校验

    function IsRequired() { throw new Error("param is required") }
    function Func(name = IsRequired()) {
        console.log("my name is " + name)
    }
    Func(); // "param is required"