js常用小技巧黑科技 - javascript(js) commonly used skill

  • 小数取整:
  1.234 | 0
  ~~1.234
  1.234 >> 0
  • 妙用隐式转换:

    • 字符串转number:
      +'123'
    • new Date转时间戳:
      +new Date()
    • 数组/多维数组转为逗号分隔字符串(可用于多维数组转一维):
      ""+[1, 2 , 3, 3, [2, 3, 4]]
  • 解构:

    • 交换a,b的值:
      var a=1;
      var b=2;
      [a, b] = [b, a];
      console.log(a, b);
  • 扩展运算符:

    • 取数组最大值/最小值:
      Math.max(...[1,2,3])
      Math.min(...[1,2,3])
    • 生成时间:
      new Date(...[2018,6,4])
    • 字符串转数组:
      method 1: 
      [...'string']
      
      method 2: 
      Array.from('string')
    • 合并对象:
      let obj1 = {a:1, b:2};
      let obj2 = {b:3, c:4};
    
      {...obj1, ...obj2}
        等同于
      Object.assign(obj1, obj2)
  • 利用URL API获取url的query值
var url = new URL('http://localhost:8000/news?a=1&b=2&c=3');
var searchParams = url.searchParams;
for (let key of searchParams.keys()){
  console.log('====');
  console.log('key === ', key);
  console.log('value === ', searchParams.get(key))
}
  • 常用方法:

    • 数字前补0:
      function preFixNum(num, length) {
        return (Array(length).join('0') + num).slice(-length);
      }
    • 数组元素为对象的去重:
      [...new Set(arr.map(v => JSON.stringify(v)))].map(v => JSON.parse(v))
    • 数组求和:
      var arr = [1,2,3,4,5];
      
      method 1: 
      var sum = eval(arr.join('+'));
      
      method 2: 
      var sum = arr.reduce((prev,cur) => prev + cur);
    • 金钱格式化(千分):
      let money = 11111;
      
      method 1: 
      money.toLocaleString('en-US');
      
      method 2: 
      Intl.NumberFormat().format(money);
      
      method 3: 
      String(money).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    • 短路逻辑代替if:
      isTrue && console.log(1);
    • RGB to Hex:
      function RGBtoHEX(rgb){
        return ((1<<24) + (rgb.r<<16) + (rgb.g<<8) + rgb.b).toString(16).substr(1);
      }
    • 延时函数:
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
    • 生成指定长度数组:
      Array.from(new Array(10).keys());
    • 快速创建a标签:
      let a = '超链接'.link('https://github.com/TigerHee/shareJS');
      console.log('a === ', a)
  • 正则进阶:

    • 捕获括号:
      匹配 'tigerHee' 并且记住匹配项
      /(tigerHee)/
    • 非捕获括号:
      匹配 'tigerHee' 但是不记住匹配项
      /(?:tigerHee)/
    • 先行断言:
      匹配'tiger'仅仅当'tiger'后面跟着'Hee'
      /tiger(?=Hee)/
    • 后行断言:
      匹配'Hee'仅仅当'Hee'前面是'tiger'
      /(?<=tiger)Hee/
    • 正向否定查找:
      匹配'tiger'仅仅当'tiger'后面不跟着'java'
      /tiger(?!java)/

点击前往github获取更多知识点

谢谢您的star鼓励

阅读 703

推荐阅读