细数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， ''， NaN， null， undefined都不会被返回。这导致如果你使用 0、''、NaN 作为有效值，就会出现不可预料的后果。正因为 || 存在这样的问题，而 ?? 的出现就是解决了这些问题，?? 只会在左侧为 undefined、null 时才返回后者，?? 可以理解为是 || 的完善解决方案。

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

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类型，null、undefined和空字符串''取反都为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不等于null，undefined和''才能执行的方法

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


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

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


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

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

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


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

---

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；

END

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• 微信小程序request请求的封装
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金

细数JS中实用且强大的操作符&运算符的更多相关文章

1. 细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一

   细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一(转) ADO.NET Entity Framework        ADO.NET Entity Framework 是微软以 ADO.N ...

2. 关于JS中涉及的常用类型转换及运算符表达式

   JS中的常用类型转换(一般用强制转换):1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); ...

3. JS中的逻辑运算符&&、||，位运算符|，&

   1.JS中的||符号: 运算方法: 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值. 只要“||”前面为true,不管“||”后面是true还是fals ...

4. Python笔记·第四章—— 细数Python中的数据类型以及他们的方法

   一.数据类型的种类及主要功能 1.数字类型 数字类型主要是用来计算,它分为整数类型int和浮点类型float 2.布尔类型 布尔类型主要是用于判断,它分为真True和False两种 3.字符串类型 字 ...

5. 细数Python中的数据类型以及他们的方法

   一.数据类型的种类及主要功能 1.数字类型 数字类型主要是用来计算,它分为整数类型int和浮点类型float 2.布尔类型 布尔类型主要是用于判断,它分为真True和False两种 3.字符串类型 字 ...

6. js中splice()的强大(删除，插入或替换数组的元素)

   1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数( ...

7. 细数C++中的for循环

   1.for(;;)这个是最基础最简单的for循环,从刚开始学习C语言的时候就知道的.for(int i = 0; i < 10; ++i){ }2.foreach完整的是for each(obj ...

8. JS中全等和相等操作符的区别和比较规则

   一.两者的区别 相等:先强制转换变量类型,再比较 全等:不转换类型,一旦类型不同,就是不全等. 二.相等和不相等的比较规则 1.操作符中有布尔值时: 比较前先将之转换为数值 false => 0 ...

9. js中的 &equals;&equals; 与 &equals;&equals;&equals; 、永远不要使用 &equals;&equals;

   前言: 很久没有复习基础了,所以导致做项目的时候被坑,咳咳,基础还是很重要的. === 是没有强制类型转换的,和其他大部分语言的 == 是一样的.而js中 == 是有类型转换的,这也是js饱受诟病的原 ...

随机推荐

1. MySQL数据类型-decimal详解

   from:http://www.linuxidc.com/Linux/2013-07/88032.htm 1.首先,对于精度比较高的东西,比如money,我会用decimal类型,不会考虑float, ...

2. 初次使用erlang的concurrent

   如果不是它骇人听闻的并行性能,几乎不会考虑去学习这么一门语言.因为它的并行,我看到的是一块用软件写出来的电路板,是的,它几乎就是把电脑变成了一个可以自由编写逻辑的芯片. 例程来自这里:http://w ...

3. 单步调试 step into&sol;step out&sol;step over 区别

   step into:单步执行,遇到子函数就进入并且继续单步执行(简而言之,进入子函数): step over:在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子函数整个执行完再停止, ...

4. UI5&lowbar;UINavigation传值

   // // AppDelegate.m // UI5_UINavigation传值 // // Created by zhangxueming on 15/7/7. // Copyright (c) ...

5. 【原】&period;Net之美学习笔记-第1章-1&period;1&period;1值类型

   结构还有一个特性:调用结构上的方法前,需要对其所有的字段进行赋值.

6. Python 一路走来 HTML CSS Javascript

   前端三把利器 HTML          -标签 (成对写不容易忘记闭合)                     自闭和标签           标签里写个 xx=xx, 表示标签的属性       ...

7. &lbrack;C&num; 设计模式&rsqb; Iterator - 迭代器模式：我与一份奥利奥早餐的故事

   Iterator - 迭代器模式 目录 前言 回顾 UML 类图 代码分析 抽象的 UML 类图 思考 前言 这是一包奥利奥(数组),里面藏了很多块奥利奥饼干(数组中的元素),我将它们放在一个碟子上慢 ...

8. 将1~n个整数按照字典序进行排序

   题意:给定一个整数n,给定一个整数k,将1~n个整数按字典顺序进行排序,返回排序后第k个元素. 题目链接:HDU6468 多组输入,T<=100,n<=1e6 分析:这个题和之前做的模拟出 ...

9. &period;net 加密与解密

   public class Encrypts { /// <summary> /// 构造方法 /// </summary> public Encrypts() { } /// ...

10. JavaScript之打印页面局部区域

    /** * [print part area of html page] * @Author JohnnyZen * @DateTime 2017-10-23 * @copyright [johnny ...