JavaScript不常见但好用的运算符

前言

如果我问在JavaScript中,你用到的最常见的运算符是什么,你可能会回答以下几种:

+、 -、 */、 %、 =、 ?、 !、 &&、 ||、 >、 <

如果我问你知道但是不常用、不会用的运算符,你可能会回答以下几种:

&、 |、 ~、 ^、 ,

但以上都不是本文要说的内容,本文要说的是另外几种。

双感叹号!!

它并不能算是一种特殊的运算符,而是对非运算符!的两次连续调用。

对于它没什么好说的,懂得都懂。因为JavaScript具有隐式转换类型,像''0nullundefined会被转换为false。

但在一些源码当中为了好理解,也可能是让代码更加严谨,通常使用双感叹号来将一个的状态强制转换为boolean类型,用于后续更加严谨的判断。

空值合并运算符??

他的用法和||类似,都是在取值时用于判定。

不同的是 ||在前值为false时,才会去运算||后面的值。而??是在前值为 undefined 和 null 时才会运算后面的值。这也是他叫空值合并运算符的原因。

console.log(null ?? 'default string');  //  "default string"
console.log(undefined ?? 33); // 33
console.log(false ?? 22); // false
console.log("" ?? 11); // ""
console.log(0 ?? 42); // 0

使用场景大家应该都能想得到,和||有些类似,只不过他比||更细致。有点类似于ES6函数形参中默认赋值等于号的用法。

也相当于是对三目的一种省略,看起来也简洁明了一点。

// let person = data.xx ? data.xx : {name: 'NiGuang'}; 三目
let person = data.xx ?? {name: 'NiGuang'};

需要注意的是他不能与 && 或 || 运算符共用, 因为空值合并运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的)这种情况下会抛出 [SyntaxError] 。

可选链式运算符?.

首先要注意的是这个运算符不是问号?而是?.,后面多一个点,二者有本质上的区别。

可选链运算符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

当尝试访问可能不存在的对象属性时,可选链运算符将会使表达式更短、更简明。在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链运算符也是很有帮助的。

看完MDN的介绍还是不太明白?举个小例子告诉你怎么用!

 let grade = {data: {productList: []},resp: 'success',code: 1000
}// 以前获取层级深得数据,需要先用if判断每一层是否存在,不然会报错。
console.log(grade.data.productList[0].name);// VM2765:9 Uncaught TypeError: Cannot read properties of undefined (reading 'name') at <anonymous>:9:39let grade1 = {data: {},resp: 'success',code: 1000
}/** 使用了可选链式运算符之后直接写,如果在其中一层没找到会自动赋值为undefined,不再向 后查找,避免了使用if进行一层层判断。
*  当接口未按规定返回时,也不会报错阻塞程序导致白屏。
*  当然代价是你要对使用这个值进行判空处理,不然在用的时候undefined还是会报错。
*/
console.log(grade1.data?.productList[0]?.name); // undefined

~~

就这,就这?前面你说的我都见过,并且已经在用了。

那这个你见过吗?

它与前面的双感叹号相同,也不是一个特殊的运算符。而是对单一运算符的连续两次重复调用,即对位运算符~的两次调用。位运算我们不常用,不深入,就主要来看~~的作用。

作用

他可以用来对小数向下取整。

就这,就这?溜了,溜了,说了半天还以为什么东西,我直接Math.floor()完事。

兄弟先别走,如果Math.floor()能解决,那我当然不会说这个了。先说下我遇到他的经历。

经历

最近刷leetcode遇到这样一道题,求一个数的平方根,如果有小数就向下取整。例如8的平方根为2。

这一下给我整高兴了,这用JavaScript实现和 1 + 1等于几有什么区别?于是我就提交了Math.floor(Math.sqrt(x))

提交后显示运行时间为68 ms,击败79.59%的人,大部分人都采用了这种方法。看着这个接近80%的数字,我就在想那20%是用了什么方法比这个还快呢?带着好奇心我点开了用时最少的代码,就看到了~~(Math.sqrt(x))

与Math.floor()的异同

前面说了他是连续两次位运算,又介绍了我遇到他的经历。

那么它比Math.floor()的好处显而易见,那就是快快快。只用了40ms,比Math.floor()整整快了28ms。

负数也是向下取整

第二个区别就是再对负数取整时,Math.floor()是按照数学上的小去取整(负数值越大越小),而~~依然是抹掉零头式取整。

console.log(Math.floor(-2.8)); // -3
console.log(~~-2.8); // -2

>>

这种一看就是个位运算符,他的名字叫右移运算符。如果不是刷leetcode,大概他我也一辈子不会遇到他吧。以下是MDN关于他的介绍:

右移运算符( >> )将一个操作数的二进制表示形式向右移动指定位数,该操作数可以是数值或者 BigInt 类型。右边移出位被丢弃,左边移出的空位补符号位(最左边那位)。该操作也称为“符号位传播右移”(sign-propagating right shift)或“算术右移”(arithmetic right shift),因为返回值的符号位与第一个操作数的符号位相同。

看不懂不要紧,在我所见到的场景中,大家使用它最多的地方就是求二分法中间值的索引。

在求中间值时要注意左边是两个数的加和,右边永远是1.

例如下面的例子

// 求(2,7)的中间值
console.log(Math.floor(2 + (7 - 2) / 2));  // 4
console.log(Math.floor((2 + 7) / 2));  // 4
console.log((2 + 7) >> 1);  // 4

同样它的好处依然是 快快快,在leetcode中用时排名靠前的JavaScript算法,基本都使用了位运算。它可以快到帮你超越10%的对手。

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 动态规划(最后一块石头的重量II、目标和、一和零)

1049.最后一块石头的重量II 力扣题目链接(opens new window) 题目难度&#xff1a;中等 有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < …

FlinkOnYarn 监控 flink任务

Flink任务一般为实时不断运行的任务&#xff0c;如果没有任务监控, 任务异常时无法第一时间处理会比较麻烦。 这里通过调用API接口方式来获取参数&#xff0c;实现任务监控。 Flink任务监控&#xff08;基于API接口编写shell脚本&#xff09; 一 flink-on-yarn 模式 二 编写she…

用友移动管理系统 upload任意文件上传漏洞

产品介绍 用友移动系统管理系统是用友公司推出的一款移动办公解决方案&#xff0c;旨在帮助企业实现移动办公、提高管理效率和员工工作灵活性。 漏洞描述 用友移动系统管理系统/mobsm/common/upload等接口存在任意文件上传漏洞&#xff0c;未经授权攻击者通过漏洞上传任意文…

Python---爬虫学习(详细注释/优化)

from bs4 import BeautifulSoup import re # 正则表表达式文字匹配 import urllib.request, urllib.error # 指定url&#xff0c;获取网页数据 import xlwt findlink re.compile(ra href"(.*?)">) # 电影链接 findImageSrc re.compile(r<img.*src"(…

Flutter组件GridView使用介绍

介绍 GridView 是 Flutter 中用于创建网格布局的滚动小部件。它可以创建多列布局&#xff0c;并且每个网格单元可以包含一个小部件。 GridView 提供了几种构造函数来创建不同类型的网格布局&#xff1a; GridView&#xff1a;最通用的构造函数&#xff0c;完全自定义网格布局…

C++系列十六:类与对象

一、引言 在C编程中&#xff0c;类&#xff08;Class&#xff09;和对象&#xff08;Object&#xff09;是核心概念&#xff0c;它们为程序员提供了一种组织和封装数据及操作的方法。类作为对象的模板或蓝图&#xff0c;定义了对象的属性和行为。对象则是类的实例&#xff0c;…

怎么在unity3D工程中导入Newtonsoft.Json

打开 Unity 编辑器。 转到菜单栏的 “Window”&#xff08;窗口&#xff09;选项&#xff0c;然后选择 “Package Manager”&#xff08;包管理器&#xff09; 在搜索框中输入 “Newtonsoft Json” 进行搜索。 注意&#xff1a;要选择Unity Registry 在搜索结果中&#xf…

triton教程1:前言、安装、跑官方例子与推荐视频

一、为啥用triton&#xff1f; 之前部署使用过tensorrt视频流硬解码前后处理硬件&#xff08;cuda&#xff09;加速&#xff0c;已经是工业化、商业化的一套标准流程了&#xff0c;现在面临的挑战是&#xff1a; 多模型管理&#xff08;一个小公司所有算法工程师的模型推理都…

GC6109——双通道5V低电压步进电机驱动芯片,低噪声、低振动,应用摄像机,机器人等产品中

GC6109是双通道5V低电压步进电机驱动器&#xff0c;具有低噪声、低振动的特点&#xff0c;特别适用于相机的变焦和对焦系统&#xff0c;万向节和其他精密、低噪声的STM控制系统。该芯片为每个通道集成了256微步驱动器。带SPl接口&#xff0c;用户可以方便地调整驱动器的参数。内…

SpringCloudAlibaba微服务架构实战派上下册技术交流!

另外我的新书RocketMQ消息中间件实战派上下册&#xff0c;在京东已经上架啦&#xff0c;目前都是5折&#xff0c;非常的实惠。 https://item.jd.com/14337086.html​编辑https://item.jd.com/14337086.html “RocketMQ消息中间件实战派上下册”是我既“Spring Cloud Alibaba微…

Nginx介绍与安装

目录 nginx服务 1、Nginx 介绍 2、为什么选择 nginx 3、IO多路复用 1、I/O multiplexing【多并发】 2、一个请求到来了&#xff0c;nginx使用epoll接收请求的过程是怎样的? 3、异步&#xff0c;非阻塞 4、nginx 的内部技术架构 5、yum安装部署nginx和配置管理 1.获取…

【Leetcode】242. 有效的字母异位词

【Leetcode】242. 有效的字母异位词 题目链接代码 题目链接 【Leetcode】242. 有效的字母异位词 代码 func isAnagram(s string, t string) bool {// 如果s串跟t串的长度不等&#xff0c;则一定为falseif len(s) ! len(t) {return false}// 创建map统计s串每个字符出现的个数…

spark相关

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…

MySQL运维实战(3.3) 管理数据库(database)

作者&#xff1a;俊达 引言 数据库的创建和管理是构建可靠数据的关键&#xff0c;关系到所存储数据的安全与稳定。在 MySQL 这个强大的关系型数据库系统中&#xff0c;数据库的创建与管理需要精准的步骤和妥善的配置。下面&#xff0c;将深入探讨如何使用MySQL 来管理数据库&…

PHP企业物资管理系统源码带文字安装教程

PHP企业物资管理系统源码带文字安装教程 技术架构 主要框架 : PHP7.0 laravel5.4  mysql5.5.36 composer1.3.2(依赖管理) 前端 : jquery bootstrap jstree&#xff08;树形结构&#xff09; echart&#xff08;图表&#xff09; layer&#xff08;弹出层&#xff09; 企…

JavaScript递归技巧的前世今生:深入解析递归及其与堆栈的关系

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 递归作为一种能够用简洁的方式定义复杂对象的编程技巧,在计算机科学中被广泛应用。它借助系…

OpenHarmony南向之LCD显示屏

OpenHarmony南向之LCD显示屏 概述 LCD&#xff08;Liquid Crystal Display&#xff09;驱动&#xff0c;通过对显示器上下电、初始化显示器驱动IC&#xff08;Integrated Circuit&#xff09;内部寄存器等操作&#xff0c;使其可以正常工作。 HDF Display驱动模型 LCD器件驱…

示例说明 Makefile 中的 $(@F),及其用法示例$$dir $@ $< $^ %.c

备忘一个不错的开源编辑器CudaText 下载网址&#xff1a; CudaText - Browse /release at SourceForge.net CudaText 主页&#xff1a; CudaText - Home 1&#xff0c;含义及验证 在 Makefile 中&#xff0c;$(F) 表示当前规则的目标文件名&#xff08;不包括路径部分&…

都2024年了,FP卖家还不知道AB站怎么玩?

自从开始写FP独立站各种运营技巧和黑科技的文章&#xff0c;经常都会有朋友来私V&#xff0c;询问怎么进行AB站跳转。 可能是现在平台对于FP商家的限制越来越多&#xff0c;再加上如今到处都是“内卷”的电商环境&#xff0c;让FP商家生存越来越艰难&#xff0c;今天就着重讲一…

【踩坑】JDK1.8 AudioSystem 无法关闭流的问题

文章目录 一、前言二、开始狼人杀嫌疑人1&#xff1a;嫌疑人2&#xff1a; 三、复盘Jdk8原生bug解决方法和原理解析 一、前言 做了一个基于文字转语言的小接口&#xff0c;想删除本地wav文件来着&#xff0c;结果发现删除不了。 很明显被占用了&#xff0c;还是被Java占用了……