JavaScript 代码学习 | 青训营笔记

47 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第9天

JavaScript 可以做许多神奇的事情哦!

1 如何随机布尔值 使用 Math.random()会返回0-1 之间的随机数,之后判断它是否大于 0.5,将会得到 50%概率为 true,false 的值

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
复制代码

判断一个日期是否是工作日 判断给定的日期是否是工作日

console.log(isWeekday(new Date(2021,0,11)));
//Result : true(周一)
console.log(isWeekday(new Date(2021,0,10)));
//Result : false(周日)
复制代码

反转字符串 有许多反转字符串的方法,这里使用一种最简单,使用了 split(),reverse()和 join()

const reverse = str =>str.split('').reverse().join('');
reverse('hello,world');
//Result: 'dlrow,olleh'
复制代码

判断当前标签页是否为可视状态 浏览器可以打开很多标签页,下面的代码就是判断当前标签页是否是激活的标签页

isBrowserTabInView();
复制代码

复杂判断的更优雅写法 image.png

通常我们所想到的办法是改写成 switch:

image.png 这样看起来清晰很多,这里有个小技巧,如果 case2 和 case3 的逻辑一样时,可以省去执行语句的 break,则 case2 的情况自动执行 case3 的逻辑

如果有人会这样想:

image.png 上面代码确实看起来更清爽了,这种方法的聪明之处在于:将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,在按钮点击的时候,通过对象属性查找的方式来进行逻辑判断,这种写法特别适合一元条件判断的情况。

是不是还有其他方法呢?

image.png 这种方法用到了 Map 对象,Map 和 Object 对象有什么区别呢?

一个对象的键只能是字符串或者 Sysbol,但一个 Map 的键,可以是任意值

可以通过 size 属性很容易地得到了一个 Map 的键值对个数,而对象的键值对个数只能手动确认

如果我们把问题升级一下,点击 按钮的时候只需要判断 status,现在还需要判断用户的身份

/**
 * 按钮点击事件
 * @param {number} status 活动状态:1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 * @param {string} identity 身份标识:guest客态 master主态
 */
const onButtonClick = (status,identity)=>{
  if(identity == 'guest'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'master') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}
复制代码

总结

本文已经教你了8种逻辑判断写法,包括:

  1. if/else
  2. switch
  3. 一元判断时:存到Object里
  4. 一元判断时:存到Map里
  5. 多元判断时:将condition拼接成字符串存到Object里
  6. 多元判断时:将condition拼接成字符串存到Map里
  7. 多元判断时:将condition存为Object存到Map里
  8. 多元判断时:将condition写作正则存到Map里

至此,本文也将告一段落,愿你未来的人生里,不只是有if/else/switch。