细数JS中实用且强大的操作符&运算符

1,前言


博主收录了一些在实际开发过程中,很实用且方便的JS操作符,熟练掌握的话,不仅代码看上去高大上(实为装逼),而且简洁大方。

2,代码+应用


2.1,短路运算符 ||

从左往右
1,只要有一个条件为true时,结果就为true。
2,当两个条件都为false时,结果才为false。
3,当一个条件为true时,后面的条件不再判断。

注意:当数值参与逻辑或运算时,结果为true,会返回第一个为真的值;如果结果为false,会返回第二个为假的值;

console.log( 5 || 4 );//当结果为真时,返回第一个为真的值 所以此处打印的是5 
console.log( 0 || false );//当结果为假时,返回第二个为假的值 所以此处打印的是false

在实际开发中,可以利用这一特性,实现如下操作。

1,给某个变量设置初始值

var name = this.name || "张三";

2,判断某个值

// 如果age等于10或者等于20或者等于30都执行
if(age === 10 || age === 20 || age === 30){
	console.log(age)
}

2.2,短路运算符 &&

从左往右
1,两边条件都为true时,结果才为true。
2,如果有一个为false,结果就为false。
3,当第一个条件为false时,就不再判断后面的条件。

注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的值;如果结果为false,返回的会是第一个为假的值

在实际开发中,可以利用这一特性,实现如下操作。

1,如果某个值为true,则运行某个function

function pdd(){
   console.log("我是鹏多多");
};
var type = true;
type && pdd();//此时会执行pdd方法,打印出"我是鹏多多";

2,判断某个值

//如果age大于10并且小于20才会执行
if(age > 10 && age < 20){
	console.log(age)
}

2.3,零合并操作符 ??

零合并操作符 ?? 是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回右侧操作数,否则返回左侧操作数。
空值合并操作符一般用来为常量提供默认值,保证常量不为 null 或者 undefined,以前一般使用|| 来做这件事,比如本文2.1章的例子。然而,由于 || 是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值0''NaNnullundefined都不会被返回。这导致如果你使用 0''NaN 作为有效值,就会出现不可预料的后果。正因为 || 存在这样的问题,而 ?? 的出现就是解决了这些问题,?? 只会在左侧为 undefinednull 时才返回后者,?? 可以理解为是 || 的完善解决方案。

在实际开发中,可以利用这一特性,实现如下操作。

1,给某个变量设置初始值

undefined ?? '默认值'      //打印出 '默认值'
null ?? '默认值'          //打印出 '默认值'
false ?? '默认值'        //打印出 'false'
0 ?? '默认值'           //打印出 0
NaN ?? '默认值'        //打印出 NaN
'' ?? '默认值'        //打印出 ''

2,在赋值的时候,可以运用赋值运算符的简写 ??=

let pdd = {a: null, b: 10}
pdd.a ??= 20
pdd.b ??= 20
console.log(pdd)     // 输出 { a: 20, b: 10 }

2.4,可选链操作符 ?.

可选链操作符 ?. 允许读取位于连接对象链深处的属性的值,而不必验证链中的每个引用是否有效。?. 操作符的功能类似于.链式操作符,不同之处在于,在引用为null或者undefined的情况下不会引起错误,该表达式短路返回值是undefined

在实际开发中,可以利用这一特性,实现如下操作。

1,当尝试访问可能不存在的对象属性时

var obj = {
    a: '张三',
    b: {
		c: '李四'
    }
};
console.log(obj.b?.c)         // 输出 李四
console.log(obj.age?.c)      // 输出 undefined
console.log(obj.name?.())   // 不报错,输出 undefined

2,在不确定的情况下获取一个深度嵌套的子属性

var obj = {
	a:'李四',
	b:'王五',
	c:{
		name:"你猜我有没有"
	}
};
//原本的写法
if(obj && obj.c && obj.c.name){
	console.log("哈哈哈")
};
//使用可选链操作符的写法
if(obj?.c?.name){
	console.log("哈哈哈")
};

2.5,位运算符 & 和 |

位运算符是按位进行运算,& 与、| 或,使用位运算符时会抛弃小数位,我们可以利用| 0来给数字取整。也可以使用 & 1来判断奇偶数

在实际开发中,可以利用这一特性,实现如下操作。

1,取整

1.3 | 0          // 打印出 1
-1.9 | 0        // 打印出 -1

2,判断奇偶数

var num = 5
!!(num & 1)                    // true
!!(num % 2)                    // true

2.6,双位运算符 ~~

可以使用双位操作符来替代正数的 Math.floor( ),替代负数的 Math.ceil( )。双否定位操作符的优势在于它执行相同的操作运行速度更快,对正数来说~~运算结果与 Math.floor( ) 运算结果相同,而对于负数来说与 Math.ceil( ) 的运算结果相同。

在实际开发中,可以利用这一特性,实现如下操作。

1,取整

Math.floor(3.9) === 3      // true
~~3.9 === 3      		  // true
Math.ceil(-4.5) === -4   // true
~~-4.5 === -4   	    // true

2.7,逻辑运算符 !

!,可将变量转换成boolean类型,nullundefined和空字符串''取反都为true,其余都为false。一般来说会有好几种用法,!!!!=!==,下面来逐个说明。

在实际开发中,可以利用这一特性,实现如下操作。

1,利用!取反

let a = false;
console.log(!a);   //打印出true

在vue.js中,利用这一特性很容易就可以写一个开关函数

<div v-show="isShow">我是一个DIV</div>
show(){
	this.isShow = !this.isShow;
};

2,利用!!来做类型判断,判断变量a不等于nullundefined''才能执行的方法

var a;
if(a != null && typeof(a) != undefined && a != ''){
    //a有内容才执行的代码  
}

实际上我们只需要写一个判断表达

if(!!a){
    //a有内容才执行的代码...  
}

3,利用!=!==来判断两个值是否相等

一般来说都是用的全不等于!==,因为使用不等于!=的话,0 != ""返回的是false,原因是JS0''转化成布尔型都为false,所以推荐还是使用全不等于!==

var a = 0;
var b = 0;
var c = "0";
var d = '';
a != b       //false
a != c      // false    number和string的0 被判断为相等
a != d      // false	0和空字符串被判断为相等

a !== b    // false
a !== c   // true
a !== d   // true

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]],打印一下看看你得到了什么?


如果看了觉得有帮助的,我是@上进的鹏多多,欢迎 点赞 关注 评论;
END

面向百度编程

往期文章

个人主页

posted @ 2021-01-25 11:26  鹏多多  阅读(1706)  评论(0编辑  收藏  举报