JavaScript骚操作之操作符
栏目: JavaScript · 发布时间: 5年前
内容简介:每到周末我都会问自己,怎么安排?于是我写了个程序跑了一下看上去没有什么问题,但总感觉代码有点臃肿,能不能稍微简约一点?换成三目运算符后
每到周末我都会问自己,怎么安排?于是我写了个程序跑了一下
if (hasMoney) { console.log('周末嗨翻天'); } else { console.log('周末睡一天'); } 复制代码
看上去没有什么问题,但总感觉代码有点臃肿,能不能稍微简约一点?
换成三目运算符后
hasMoney ? console.log('周末嗨翻天') : console.log('周末睡一天'); 复制代码
look,当hasMoney为true的时候,嗨翻天,为false的时候的睡一天。这种操作符在我们的根据简单的判断条件赋值的时候非常有用
let weekendPlan = hasMoney ? '周末嗨翻天' : '周末睡一天'; 复制代码
如此,我们的代码就不会充斥着大量的if判断条件句,还能略显骚气。但是,别骚过度了
val = simpleCondition ? 1 : simpleConditionAgain ? 2 : simpleConditionAgainAndAgain ? 3 : 4; 复制代码
上面的例子有点为了装逼而装逼的感觉,在代码可读性方面有点糟糕,即使换成了if条件句也不甚美观;像这种情况,可以使用switch语句或者策略模式的设计思想优化。
逻辑与操作符 &&
如果有钱的话,周末就去嗨翻天,但没钱的情况还没有想好要干嘛(虽然没钱的情况干不了什么),常规操作为
if (hasMoney) { console.log('周末嗨翻天'); } 复制代码
这个时候使用三目运算符改写的话
hasMoney ? console.log('周末嗨翻天') : undefined; 复制代码
有点奇怪,我们不得不写个undefined去告诉程序判断条件为false的时候应该怎么做。使用逻辑与操作符就可以避免这个问题
hasMoney && console.log('周末嗨翻天'); 复制代码
逻辑与操作符会使用Boolean函数判断每一个条件(表达式)是否为true,当所有的判断条件都为true的情况下,就会返回最后的表达式的运算结果;但是如果有判断条件为false的话,就会返回第一个判断条件为false的运算结果
true && console.log('It is true'); // It is true true && false && console.log('It is true'); // 返回 false true && 0 && console.log('It is true'); // 返回 0 true && undefined == null && console.log('It is true'); // It is true, 表达式undefined == null的运算结果为false true && undefined === null && console.log('It is true'); // 返回 false, 表达式undefined === null的运算结果为false 复制代码
所以在react中使用逻辑与操作符渲染元素的时候,一定要注意
render() { return ( <Fragment>{ data.length && data.map(item => <span>{ item }</span>) }</Fragment> ); } // 当没有数据的时候,页面会渲染出一个0 复制代码
上面的例子的本意是当有数据的时候就将数据渲染出来,没有数据的时候,不做任何操作。但是逻辑与操作符会将第一个为false的表达式的运算结果返回,导致返回了个0!
逻辑或操作符 ||
说到逻辑与操作符,就不得不提它的好基友:逻辑或操作符。考虑下面的场景
// 当自身为undefined时,赋值为0,否则还是赋值为自身 val = val !== undefined ? val : 0; 复制代码
使用三目运算符去处理上述例子的逻辑时,我们需要显式的判断val是否为空的,然后再决定变量val是否应该等于本身。那么本着能省就省的原则,我们可以使用逻辑或操作符
val = val || 0; 复制代码
逻辑或操作符,其会将第一个表达式的运算结果传入Boolean函数,如果Boolean函数返回true,就会返回这个运算结果;否则将会尝试下一个,直到结束;如果所有的表达式的运算结果对应的布尔值都为false,则返回最后一个表达式的运算结果
故此操作符在向下兼容、设置函数参数的默认值时非常有用
// ES5设置函数默认值 function testFunc(arg1) { arg1 = arg1 || 1; // do something else } let a = 1, b = 2, c = null; console.log(a || b || c); // 1 console.log(0 || b || c); // 2 console.log(0 || false || c); // null 复制代码
note: 故此猜想,if条件句里面使用逻辑或、逻辑与操作符,实际上也只是返回表达式的运算结果,然后再隐式调用了Boolean函数得到一个最终的布尔值
逻辑取反 !
上文说到,有钱的周末可以为所欲为,没钱的周末,估计也就只能选择睡一天了。这种情况下,如果使用hasMoney作为判断标准,我们的代码是这样的
hasMoney === false && console.log('周末睡一天'); 复制代码
当hasMoney不是一个布尔值的时候,hasMoney === false语句就会一直返回false,造成有钱的假象。所以我们必须的将hasMoney转换成一个布尔值才能判断,恰好取反操作符可以同时给我们做这两件事
!hasMoney && console.log('周末睡一天'); 复制代码
这样就能在没钱的时候睡一天了。
取反操作符能够将一个非Boolean类型的值转化为Boolean类型的值且取反
!true && console.log('666'); // 返回false !!true && console.log('666'); // 666 {} && console.log('666'); // 报错 !{} && console.log('666'); // 返回false !!{} && console.log('666'); // 666 复制代码
按位取反操作符 ~
加入我们需要判断一个数组里面是否存在某个元素,在ES6里面可以使用includes
let arr = ['we', 'are', 'the', 'BlackGold', 'team']; arr.includes('the') && console.log('in'); // in 复制代码
但是这个方法有比较大的限制:没办法传入一个筛选函数。
let arr = ['we', 'are', 'the', 'BlackGold', 'team']; arr.includes(element => element === 'the') && console.log('in'); // 返回false 复制代码
这种情况下,我们通常可以使用findIndex方法
let arr = ['we', 'are', 'the', 'BlackGold', 'team']; arr.findIndex(element => element === 'the') !== -1 && console.log('in'); // in 复制代码
由于findIndex方法返回的索引是从0开始的,所以我们必须得判断其返回的索引是否不等于-1或者是大于等于0。如果使用按位取反操作符,将不需要显示去判断
let arr = ['we', 'are', 'the', 'BlackGold', 'team']; ~arr.findIndex(element => element === 'we') && console.log('in'); // in ~arr.findIndex(element => element === 'the') && console.log('in'); // in 复制代码
按位取反操作符,顾名思义,就是将变量的每一个比特位取反:0->1、1->0
console.log(~-1); // 0 转换为Boolean值即为false console.log(~0); // -1 转换为Boolean值即为true console.log(~1); // -2 转换为Boolean值即为true 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Android RxJava 操作符详解系列:条件 / 布尔操作符
- C语言中点操作符(.)和箭头操作符(->)的不同之处
- JS操作符拾遗
- 浅谈JavaScript位操作符
- rxjs switchMap操作符
- TypeScript keyof 操作符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。