前端代码小技巧

工作中经常会遇到一些小功能，可能需要些小技巧，掌握这些小技巧，可以有效的帮助实现业务功能，当然这些小技巧基本网上都有。

实现一个简单字符串加密，解密算法

利用charCodeAt获取字符的 Unicode 码，通过增加、减少偏移量进行加密解密。需要注意的是，超过 Unicode 码范围时需要循环到范围内（Unicode 码位范围是从 0 到 0x10FFFF , javascript 能处理的范围是 0 到 0xFFFF ）

function encode(str, padding = 5) {
  return !str ? str : str.split('').map(function(s) {
    var code = s.charCodeAt() + padding;
    if (code > 0xFFFF) {
      code = code - 0x10000;
    }
    return String.fromCharCode(code);
  }).join('');
}

function decode(str, padding = 5) {
  return !str ? str : str.split('').map(function(s) {
    var code = s.charCodeAt() - padding;
    if (code < 0) {
      code = code + 0x10000;
    }
    return String.fromCharCode(code);
  }).join('');
}

encode('javascript')  // 'of{fxhwnuy'
decode('of{fxhwnuy')  // 'javascript'

短横命名与驼峰命名转换

运用正则表达式 /(\w)(_)(\w)/g , 需要运用()分组来提前字符

function toCamel(str) {
  return str.replace(/(\w)(_)(\w)/g,( match,$1,$2,$3 )=> `${$1}${$3.toUpperCase()}`)
}
function toDash(str) {
  return str.replace(/([a-z])([A-Z])/g,( match,$1,$2 )=> `${$1}_${$2.toLowerCase()}`)
}

toCamel('my_first_name')  // 'myFirstName'
toDash('myFirstName')     // 'my_first_name'

给数字添加千分位

运用正则表达式 /\B(?=(\d{3})+(?!\d))/g , 匹配每个位置后面都只有三个数字的组合，不能再有多余数字

function addThousandSeparator(num) {
  var numParts = num.toString().split(".");
  numParts[0] = numParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return numParts.join(".");
}

addThousandSeparator('12345678.12') // '12,345,678.12'
// 第一次匹配成功的结果，找到 2 3 之间的位置，后面跟着 345 678 符合只有三个数字组合
// 第二次匹配成功的结果，找到 5 6 之间的位置，后面跟着 678 符合只有三个数字组合

国际化Api

const numberFormat = new Intl.NumberFormat('en-US');
numberFormat.format('12345678.12') // '12,345,678.12'

实现一个函数 where，它返回它被调用的时候所在的函数的名字。

正则表达式匹配 at xxx ( 第一个是 where 函数，第二个是调用where的函数

function where() {
  let reg = /\s+at\s(\S+)\s\(/g;
  let str = new Error().stack.toString();
  let res = reg.exec(str) && reg.exec(str);
  return res && res[1];
}

const func = ()=>{
    console.log(where())  // func
}
func()

使用 Promise 实现防止重复请求

const preventReqMore = (fn, p = null) => {
  return (...argv) => {
    p = p ? p : fn(...argv).finally(() => {
        p = null 
    })
    return p
  }
}
// 可以简写成一行
// const preventReqMore = (fn, p = null) => (...argv) => p ? p : (p = fn(...argv).finally(() => (p = null)))

let fetchReq = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Request completed');
      resolve();
    }, 1000);
  });
};
let fetchReqPrevented = preventReqMore(fetchReq);
fetchReqPrevented();  
fetchReqPrevented();  // 会被阻止，不会发起请求

Todo 持续更新