【JS基础】积累一些if语句的另类写法

前言

今天就来水一篇博客哈哈，积累一些自己遇到的if语句另类写法，后续会补充。

if()不需要{}

这个是比较基础的了，如果if的执行语句只有一句，就可以把{}省略掉。

if (bool) xxxxxx
else if (bool) xxxxxxx
else xxxxxxx

if (bool) return fn()

用比较运算符代替

例如比较运算符里的 == 或者 === 举例啊

let str = 'a'
if (str == 'a') {
  str = true
}

// 用 == 或者 === 来代替if

str = (str == 'a') // 是不是一眼就看明白了

给个简单的应用场景，比如后端给你返回一个多选项控件使用的数组

let data = {
  { name: '小米', age: 12, pick: '1' },
  { name: '小刚', age: 16, pick: '1' },
  { name: '小红', age: 19, pick: '0' },
  ....
}
// pick代表是否选中，1代表没选中，0代表选中

而你使用的UI组件对于选中和非选中只认布尔值，需要转化pick字段

data.forEach(item => item = (item == '0'))

是不是比if来if去的简洁多了

用算数运算符代替

例如算数运算符中的 % ，直接举例啊。

在传给后端的一个参数中，有个参数 idx ，必须为1或则0。这个参数对应JS中的num变量，但这个num被固定死为1或者2，如果用if来写参数的整理逻辑会是

let idx = 0
if (num == 2) {
  idx = 1
}
...
params = {
  ...
  idx: idx,
  ...
}

这个时候就很适合用 % 代替

params = {
  ...
  idx: (num + 1) % 2,
  ...
}

是不是看懂了呀，这个%可以用的很妙的，这里只举简单例子。

用逻辑运算符代替

主要是历用逻辑运算符的 “短路” 特性， 啥是短路就不说了哈。

if (bol) console.log('执行')
// 可替换
bol && console.log('执行') 
bol && (str = '1') // 如果右边是赋值语句，需要用括号围起

if (arr) {
	return  arr.map()...
} else {
    return []
}
// 可以这样写
let brr = (arr || []).map(...) // 注意，一定要用个变量来接收

三目运算符

这个就是基础了，本身就是用来代替if写一些简单逻辑的

num >= 60 ? alert("及格") : alert("不及格")  
//如果 ？前面的表达式结果为true，执行 ？后面的语句。如果 ？前面的表达式结果为false，执行 ：后面的语句。

还可以嵌套着写，自己稍微琢磨一下

return num > 0 ? 'red' : num == 0 ? '' : 'green';

赋值可以这样写

Price = Price === 'low'? 'high' : 'low';
// 让Price等于，当原来为low时，赋值high，原来不是low时，赋值low

// 觉得有点懵可以这样子看，后面Price === 'low'? 'high' : 'low'才是运算符

还可以结合逻辑运算符写，比如&&，举个对象数组去重的例子

let arr = [
	{a:1},
	{a:1},
	{a:2},
	{a:1},
	{a:2},
	]
let obj = {}
arr = arr.reduce((tmp, item)=>{
  obj[item.a] ? '' : obj[item.a] = true && tmp.push(item)
  return tmp
}, [])
console.log(arr)

对变量是否为空取布尔值

如果你想判断一个变量为不为空，可能会：

let hasName = name? true : false

其实可以：

let hasName = !!name

if条件会转换成false的变量

为0，-0，空字符串，null，underfined，NaN。

---

就先这样，未来继续补充~