江苏龙网

  1. 主页 > 生活百科 > >

JavaScript优雅写法及骚操作

JavaScript

昨天看权威指南的时候看到一个个人觉得很优雅的写法，便想着记录一下（我的梦想就是写一手富有诗意的优雅代码）在Js世界中，有些操作会让你无法理解，但是却无比优雅 。如有错误，欢迎批评指正！（看前先点赞，养成好习惯哈哈哈）

JavaScript优雅写法及骚操作

文章插图
 
1、 判断为空
  • 直白写法
if(a == undefined) a = [];if(params.success){params.success(res);}
  • 优雅写法
a = a || [];params.success&¶ms.success(res);//注意事项1、if内不能出现var、=等赋值定义语句，才可以使用优雅写法2、if内可以有多个方法调用，但必须方法内有true返回值（此用法意义不大）
问题：我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂.
2、多条件判断
  • 小白写法
var Statistics = function(){console.log('执行')}switch (currentTab){case 0:Statistics();break;case 1:Statistics();break;case 2:Statistics();break;case 3:Statistics();break;
  • 优雅写法
//将判断条件作为对象的属性名，将处理逻辑作为对象的属性值var Statistics = function(){console.log('执行')}const comparativeTotles = new Map([[0,Statistics],[1,Statistics],[2,Statistics],[3,Statistics]])let map = function(val){return comparativeTotles.get(val)}let getMap= map(1); //如果查找不到返回undefinedif(!getMap){console.log('查找不到')}else{concaozuole.log('执行操作')getMap()}
  • if else
/** * 按钮点击事件 * @param {number} status 活动状态：1开票中 2开票失败 3 开票成功 4 商品售罄 5 有库存未开团 * @param {string} identity 身份标识：guest客态 master主态 */const onButtonClick = (status, identity) => {if (identity == 'guest') {if (status == 1) {//函数处理} else if (status == 2) {//函数处理} else if (status == 3) {//函数处理} else if (status == 4) {//函数处理} else if (status == 5) {//函数处理} else {//函数处理}} else if (identity == 'master') {if (status == 1) {//函数处理} else if (status == 2) {//函数处理} else if (status == 3) {//函数处理} else if (status == 4) {//函数处理} else if (status == 5) {//函数处理} else {//函数处理}}}
  • 改完后
//利用数组循环的特性，符合条件的逻辑都会被执行，那就可以同时执行公共逻辑和单独逻辑 。const functionA = ()=>{/*do sth*/}// 单独业务逻辑const functionB = ()=>{/*do sth*/}// 单独业务逻辑const functionC = ()=>{/*send log*/}// 公共业务逻辑const actions = new Map([['guest_1', () => { functionA }],['guest_2', () => {functionB }],['guest_3', () => { functionC }],['guest_4', () => { functionA }],['default', () => { functionC}],//...]) /** * 按钮点击事件 * @param {string} identity 身份标识：guest客态 master主态* @param {number} status 活动状态：1开票中 2开票失败 3 开票成功 4 商品售罄 5 有库存未开团 */const onButtonClick = (identity, status) => {let action = actions.get(`${identity}_${status}`) || actions.get('default')action.call(this)}三、'骚'操作 
1. 生成随机ID// 生成长度为10的随机字母数字字符串Math.random().toString(36).substring(2);2. 每秒更新当前时间【JavaScript优雅写法及骚操作】setInterval(()=>document.body.innerhtml=new Date().toLocaleString().slice(10,18))3. 生成随机 16 进制 颜色 码 如 # ffffff'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');4. 返回键盘// 用字符串返回一个键盘图形(_=>[..."`1234567890-=~~QWERTYUIOP[]~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}|`,m+=y+(x+'').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join``)()5. 优雅的取整var a = ~~2.33----> 2var b = 2.33 | 0----> 2var c = 2.33 >> 0----> 26.优雅的金钱格式化1、使用正则实现var test1 = '1234567890'var format = test1.replace(/B(?=(d{3})+(?!d))/g, ',')console.log(format) // 1,234,567,8902、使用骚操作function formatCash(str) {return str.split('').reverse().reduce((prev, next, index) => {return ((index % 3) ? next : (next + ',')) + prev})}console.log(format) // 1,234,567,890


推荐阅读


上一篇：淘宝怎么查看往年账单 淘宝年度账单怎么查询2020

下一篇：普联环境旧衣回收靠谱吗 旧衣服回收项目靠谱吗