前端代码小技巧

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

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

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

scss 复制代码
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 , 需要运用()分组来提前字符

javascript 复制代码
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 , 匹配每个位置后面都只有三个数字的组合,不能再有多余数字

scss 复制代码
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

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

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

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

javascript 复制代码
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 实现防止重复请求

javascript 复制代码
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 持续更新

相关推荐
江号软件分享35 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友9 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维