JavaScript 开发技巧

1、String

// ***** String *****
  /**
   * 金钱格式化
  */
  let money = num => num.toString().replace(/\B(?=(\d{4})+(?!\d))/g, '.')
  let m = money(20310421032)
  console.log(m); // 203.1042.1032

/**
   * 生成随机id
   *
   * toString() 有一个可选参数radix，就是进制。默认值为 10，可转换的基数 2-36。
   * 如果转换的基数大于 10，则会使用字母来表示大于 9的数字。
   * 例如，基数为 16的情况，则会使用 a-f的字母来表示 10-15。
   * 如果基数是 36，就会把数字表示为由 0-9 a-z 组成的 36进制字符串
  */
  let randomId = num => Math.random().toString(36).substr(3, num)
  let id = randomId(4)
  console.log(id); // xiw2

/**
   * 生成随机 hex 颜色值
  */
  let randomColor = () => '#' + Math.floor(Math.random() * '0xffffff').toString(16).padEnd(6, '0')
  let color = randomColor()
  console.log(color); // #c228c3

/**
   * 操作URL查询参数
  */
  let url = '?name=hh&id=12345&age=18'
  // let params = new URLSearchParams(location.search.replace(/\?/ig, ''))
  let params = new URLSearchParams(url.replace(/\?/ig, ''))
  console.log(params.has('age')); // true
  console.log(params.get('name')); // hh

2、Number

/**
   * 取整数
  */
  let num1 = ~~ 1.623232
  let num2 = 2.323243 | 0
  let num3 = 3.43243243 >> 0
  console.log(num1, num2, num3); // 1 2 3
  console.log(Math.floor(4.54543), Math.ceil(-5.543543)); // 4 -5

/**
   * 前、后 补任意字符
  */
  const startStr = (num, len) => num.toString().padStart(len, "a");
  const endStr = (num, len) => num.toString().padEnd(len, 'b')
  const start = startStr(169, 5);
  const end = endStr(26, 9)
  console.log(start, 'start'); // aa168
  console.log(end, 'end'); // 26bbbbbbb

/**
   * 转数值
  */
  let n1 = +null
  let n2 = +''
  let n3 = +false
  let n4 = +'123'
  let n5 = '123' * 1
  console.log(n1, n2, n3, n4, n5); // 0 0 0 123 123

/**
   * 时间戳
  */
  let time1 = +new Date('2021-5-28')
  let time2 = new Date('2021/5/28').getTime()
  console.log(time1, time2, time1 === time2); // 1622131200000 1622131200000 true

/**
   * 保留小数
  */
  let r = (n, m) => Math.round(n * 10 ** m) / 10 ** m
  let round = r(6.949243, 3)
  console.log(round); // 6.949

/**
   * 位运算
   * JavaScript 使用 32 位按位运算数
   * & 如果位数都是 1，则位运算返回 1
   * | 如果其中一位是 1， 则位运算返回 1
   * ^ 数位是不同的则返回 1
   * << 零填充的左移。一个或多个零数位从右被推入，最左侧的数位被移除
   * >>> 零填充的右移。一个或多个零数位从左侧被推入，最右侧的数位被移出
  */
  let and1 = 0 & 0
  let and2 = 0 & 1
  let and3 = 1 & 0
  let and4 = 1 & 1
  console.log(and1, and2, and3, and4); // 0 0 0 1

  let or_1 = 0 | 0
  let or_2 = 0 | 1
  let or_3 = 1 | 0
  let or_4 = 1 | 1
  console.log(or_1, or_2, or_3, or_4); // 0 1 1 1

  let xor_1 = 0 ^ 0
  let xor_2 = 0 ^ 1
  let xor_3 = 1 ^ 0
  let xor_4 = 1 ^ 1
  console.log(xor_1, xor_2, xor_3, xor_4); // 0 1 1 0

  // 5 的二进制 00000000000000000000000000000101
  let bit_1 = 5 << 1
  console.log(bit_1) // (10) 00000000000000000000000000001010

  let bit_2 = 5 >>> 1
  console.log(bit_2); // (2) 00000000000000000000000000000010

/**
   * 进制转换
  */
  let bin = (num) => (num >>> 0).toString(2)
  console.log(bin(10)); // 101

  let dec = (num) => parseInt(num, 2).toString(10)
  console.log(dec(1010)); // 10

/**
   * 判断奇数、偶数
  */
  let oddOrEven2 = num => (num & 1) ? '奇' : '偶'
  console.log(oddOrEven2(-2), oddOrEven2(-1), oddOrEven2(0), oddOrEven2(1)); // 偶 奇 偶 奇

/**
   * 取最大、最小值
  */
  let a = [1, 2, 3, '20']
  let min = Math.min(...a)
  let max = Math.max(...a)
  console.log(min, max); // 1 20

/**
   * 区间随机数
  */
  let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
  let num4 = random(-1, 1)
  console.log(num4); // 1

3、Boolean

/**
   * 判断数据类型
   * 可判断类型：undefined、null、string、number、boolean、array、object、symbol、
   * date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap
  */
  function dataType(val, type) {
    let type1 = Object.prototype.toString.call(val).replace(/\[object (\w+)\]/, '$1').toLowerCase()
    return type ? type1 === type : type1
  }
  console.log(dataType('aaa')); // string
  console.log(dataType(1111)); // number
  console.log(dataType(false)); // boolean
  console.log(dataType([], 'array'), '0'); // true

/**
   * 判断空数组
  */
  let arr = []
  let arrFlag = Array.isArray(arr) && !arr.length
  console.log(arrFlag); // true

/**
   * 判断空对象
  */
  let obj = {}
  let objFlag = dataType(obj, 'object') && !Object.keys(obj).length
  console.log(objFlag); // true

　function Fun() {
    return 'fun'
  }

  /**
   * 为非假时执行
   * undefined、null、''、0、false、NaN
  */
  let flag = null
  console.log(!flag && Fun()); // fun

/**
   * 数组不为空时执行
  */
  let arr1 = []
  console.log(arr1.length && Fun()); // 0

/**
   * 对象不为空时执行
  */
  let obj1 = {}
  let o = Object.keys(obj1).length && Fun()
  console.log(o); // 0

/**
   * switch/case使用区间
  */
  let age = 300
  switch (true) {
    case isNaN(age):
      console.log('not a number!');
      break;
    case age < 18:
      console.log('yes');
      break;
    case age >= 18:
      console.log('no');
      break;

    default:
      console.log('please set your age');
      break;
  }

3、Array

/**
   * 数组克隆
  */
  let arr_1 = [0, 1, 2, 3]
  let arr_2 = [...arr_1, 0, 4, 'a']
  console.log(arr_2); // [0, 1, 2, 3, 0, 4, "a"]

/**
   * 数组合并
  */
  let arr_3 = [0, 1, 2]
  let arr_4 = [3, 4, 'b']
  let arrList = [...arr_3, ...arr_4]
  console.log(arrList); // [0, 1, 2, 3, 4, "b"]

/**
   * 数组去重
  */
  let arr_a = [1, 1, 2, 2, null, null]
  let arr_5 = [...new Set([...arr_a, 3, 3, 2, null])]
  console.log(arr_5); // [1, 2, null, 3]

/**
   * 数组清空
  */
  let arr_b = [1, 2, 3]
  arr_b.length = 0
  console.log(arr_b); // []

/**
   * 数组截断
  */
  let arr_c = ['1', '2', '3', '4']
  arr_c.length = 2
  console.log(arr_c); // ["1", "2"]

/**
   * 交换赋值
  */
  let aa = 1
  let bb = 3
  [aa, bb] = [bb, aa]
  console.log(aa, bb); // 3 1

/**
   * 过滤空值 (undefined、null、''、0、false、NaN)
  */
  let arr_d = [1, 'a', undefined, null, '', 0, false, NaN, 1, 2, 'a', 'b'].filter(Boolean)
  console.log(arr_d); // [1, "a", 1, 2, "a", "b"]

/**
   * 异步累计
  */
  async function Func(deps) {
    return deps.reduce(async(t, v) => {
      const dep = await t
      const version = await Todo(v)
      dep[v] = version
      return dep
    }, Promise.resolve({}))
  }
  // const result = await Func() // 需要在 async 包围下使用

/**
   * 统计数组成员个数
  */
  let arr_e = [0, 1, 1, 2, 3, 3]
  let count = arr_e.reduce((t, v) => (t[v] = t[v] ? ++t[v] : 1, t), {})
  console.log(count); // {0: 1, 1: 2, 2: 1, 3: 2}

/**
   * 解构数组嵌套
  */
  let arr_f = [0, 1, [2, 3, [4, 5]]]
  let [a1, b1, [c1, d1, [e1, f1]]] = arr_f
  console.log(a1, b1, c1, d1, e1, f1); // 0 1 2 3 4 5

/**
   * 解构数组成员别名
  */
  let arr_g = [0, 1, 2]
  let {0: a2, 1: b2, 2: c2} = arr_g
  console.log(a2, b2, c2); // 0 1 2

/**
   * 解构数组成员默认值
  */
  let [a3, b3, c3 = 3, d3 = 4] = arr_g
  console.log(a3, b3, c3, d3); // 0 1 2 4

/**
   * 随机获取数组成员
  */
  let arr_h = [0, 1, 2, 'a', 'b', 'c']
  let randomItem = arr_h[Math.floor(Math.random() * arr_h.length)]
  console.log(randomItem); // b

/**
   * 创建指定长度数组
  */
  let arr_i = [...new Array(3).keys()]
  console.log(arr_i); // 0 1 2

/**
   * 创建值相同的，指定长度数组
  */
  let arr_j = [...new Array(4).fill('a')]
  console.log(arr_j); // ['a', 'a', 'a', 'a']

/**
   * reduce 代替 map 和 filter
  */
  // let arr_g = [0, 1, 2]
  let mapArr = arr_g.map(m => m * 2)
  let reduceArr = arr_g.reduce((t, v) => (t.push(v * 2), t), [])
  console.log(mapArr, reduceArr); // [0, 2, 4] [0, 2, 4]

  let filterArr = arr_g.filter(f => f > 0)
  let reduceF = arr_g.reduce((t, v) => (v > 0 && t.push(v), t), [])
  console.log(filterArr, reduceF); // [1, 2] [1, 2]

  let arrM = arr_g.map(m => m * 2).filter(f => f > 2)
  let arrR = arr_g.reduce((t, v) => (v = v *2, v > 2 && t.push(v), t), [])
  console.log(arrM, arrR); // [4] [4]

4、Object

/**
   * 克隆对象
  */
  let object = {a: 0, b: 1, c: 2}
  let obj_1 = {...object, d: '4'}
  let obj_2 = JSON.parse(JSON.stringify(object))
  console.log(obj_1, obj_2); // {a: 0, b: 1, c: 2, d: "4"} {a: 0, b: 1, c: 2}

/**
   * 合并对象
  */
  let obj_3 = {...obj_1, ...obj_2}
  console.log(obj_3); // {a: 0, b: 1, c: 2, d: "4"}

/**
   * 对象字面量(可用于获取环境变量)
  */
  let evn = 'prod'
  let link = {
    dev: 'development',
    test: 'testing',
    prod: 'production'
  }[evn]
  console.log(link); // production

/**
   * 对象变量属性
  */
  let flag1 = false
  let obj_4 = {
    a: 0,
    b: 1,
    [flag ? 'c' : 'x']: 2
  }
  console.log(obj_4); // {a: 0, b: 1, x: 2}

/**
   * 创建纯空对象
  */
  let obj_5 = Object.create(null)
  Object.prototype.a = 0
  console.log(obj_5); // {}

/**
   * 过滤对象无用属性
  */
  let obj_6 = {rest: 'rest', x: 'x', y: 'y'}
  let {rest, ...rest_1} = obj_6
  console.log(rest_1); // {x: "x", y: "y"}

/**
   * 解构对象属性嵌套
  */
  let obj_7 = {a: 0, b: '1', c: {d: 2, e: '3'}}
  let {c: {d, e}} = obj_7
  console.log(d, e); // 2 '3'

/**
   * 解构对象属性别名
  */
  let {rest: rest_3, x, y: y1} = obj_6
  console.log(rest_3, x, y1); // rest x y

/**
   * 解构对象属性默认值
  */
  let obj_8 = {v: 'v', p: 'p', k: 'k'}
  let {v, p = 8, z = 9} = obj_8
  console.log(v, p, z); // v p 9

5、Function

/**
   * 自执行函数
  */
  // let Func_1 = function() {
  //   console.log('fun_1');
  // }()

  (function() {
    console.log('fun_2');
  })()

  // (function() {
  //   console.log('fun_3');
  // }())

  // [function() {
  //   console.log('fun_4');
  // }()]

  // + function() {
  //   console.log('fun_5');
  // }()
  // - function() {
  //   console.log('fun_6');
  // }()
  // ~ function() {
  //   console.log('fun_7');
  // }()
  // ! function() {
  //   console.log('fun_8');
  // }()

  // new function() {
  //   console.log('1');
  // }
  // new function() {
  //   console.log('2');
  // }()
  // void function() {
  //   console.log('3');
  // }()
  // typeof function() {
  //   console.log('4');
  // }()
  // delete function() {
  //   console.log('5');
  // }()

  // 1, function() {
  //   console.log('6');
  // }()
  // 1 ^ function() {
  //   console.log('7');
  // }()
  // 1 > function() {
  //   console.log('8');
  // }()

/**
   * 隐式返回值
   * 只能用于 单语句返回值箭头函数 ，如果返回值是对象必须使用（）包住
  */
  let f_1 = name => 'i love ' + name, name
  console.log(f_1('yy')); // i love yy

/**
   * 一次性函数
   * 适用于运行一些只需执行一次的初始化代码
  */
  function f_2() {
    console.log('f_x');
    fun_2 = function() {
      console.log('f_y');
    }
    // console.log(fun_2());
  }
  console.log(f_2()); // f_x undefined

/**
   * 惰性载入函数
   * 函数内判断分支较多较复杂时可大大节约资源开销
  */
  function F_3(a, b) {
    if (a === b) {
      console.log('a');
    } else {
      console.log('b');
    }
  }
  console.log(F_3(1, 2)); // b undefined

  function F_4(a, b) {
    if (a === b) {
      Func_4 = function() {
        console.log('a_4');
      }
    } else {
      Func_4 = function() {
        console.log('b_4');
      }
    }
    return Func_4()
  }
  console.log(F_4(1, 1)); // a_4 undefined

/**
   * 检测非空参数
  */
  function isRequired() {
    console.error('params is required !');
    // throw new Error('params is required !')
  }
  function F_5(name = isRequired()) {
    console.log('i love ' + name);
  }
  console.log(F_5()); // params is required !
  console.log(F_5('mm')); // i love mm

/**
   * 优雅处理错误信息
  */
  try {
    Func_6()
  } catch (e) {
    console.error(e.message);
    // location.href = "https://www.cnblogs.com/" + e.message;
  }
　　

// 处理 async await 参数
  function asyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err])
  }
  async function F_7() {
    let [err, res] = await asyncTo() // async 包围下使用
    console.log(err, res);
  }
  F_7()

/**
   * 优雅处理多个函数返回值
  */
  function F_8() {
    return Promise.all([
      fetch('/user'),
      fetch('/list')
    ])
  }
  // let [user, list] = await F_8() // 在 async 下使用

 /**
   * 深拷贝
  */
  function deepCopy(data, val) {
    var val = val || {}
    for (const i in data) {
      if (typeof data[i] === 'object') {
        val[i] = data[i].constructor === Array ? [] : {}
        deepCopy(data[i], val[i])
      } else {
        val[i] = data[i]
      }
    }
    return val
  }

 

6、DOM

/**
   * 自适应页面
   * 页面基于一张设计图但需要做多款机型自适应，元素尺寸使用 rem 设置
  */
  function auto(width = 750) {
    let target = document.documentElement
    target.clientWidth >= 600
      ? target.style.fontSize = '80px'
      : target.style.fontSize = target.clientWidth / width * 100 + 'px'
  }
  auto()

/**
   * 过滤 XSS
  */
  function filterXss(content) {
    let el = document.createElement('div')
    el.innerText = content
    let res = el.innerHTML
    el = null
    console.log(res); // <p>2233</p>
    return res
  }
  filterXss('<p>2233</p>')

/**
   * 存取 Localstorage
  */
  localStorage.setItem('item', JSON.stringify('{item: 11111}'))
  let local = JSON.parse(localStorage.getItem('item'))
  console.log(local);