不要再写indexOf>-1了,太LOW啊🤔

JavaScript提供了很多原生好用的操作符,在开发过程中如果能合理的使用肯定能达到事半功倍的效果。我们的目标是能少些一个字符,绝不多写 😁

背景

在日常开发中,我们经常会遇到需要检查字符串中是否包含某个子串的情况。通常的做法是使用indexOf()方法,并与-1比较,但这种方法在可读性方面并非最佳。下面我们来看看,如何利用原生操作符使代码更加简洁、易读。

按位非操作符(~)

使用~操作符

rust 复制代码
if (~str.indexOf("subStr")) {
  // 子字符串存在
} else {
  // 子字符串不存在
}

原理分析~操作符

为什么使用~操作符后,就不用写>-1了呢?我们来看看其背后的隐式转换和~操作符原理

  • 不存在时得到的结果是: ~-1

step1. 转成32位的二进制:11111111111111111111111111111111

注:在二进制中**-1**表示为所有位都是1的二进制数

step2. 按位取反:00000000000000000000000000000000

  • 存在时得到的结果,假设是3

step1. 转成32位的二进制00000000000000000000000000000011

step2. 按位取反11111111111111111111111111111100

step3. 二进制到十进制的转换

取反后得到的是一个新的二进制数,但这个二进制数以1开头,表示它是一个负数。在计算机中,负数通常使用补码形式表示,所以我们需要将这个二进制数转换为它的补码对应的十进制数。

补码的计算过程是:

  1. 取反(已经在步骤2里完成了)。
  2. 加1。
markdown 复制代码
11111111111111111111111111111100
+                                 1
-----------------------------------
11111111111111111111111111111101

得到的新二进制数仍然是负数的补码表示,它对应的十进制数是-4。

小结:这个过程也可以简单的通过数学表达式来表示:~N = -N - 1,可以理解为这个操作符是赔了夫人又折兵
梳理

  1. 使用~str.indexOf(xxx)后得到的结果一定是小于等于0的数字
  2. 而if括号内的表单式会将数字隐式转换为布尔值
  3. 因此只有~-1 ==> 0 ==> false,其它情况都是true

非常有趣的隐式转换

为什么加!后,结果不变

less 复制代码
[] == 0      // true
![] == 0      // true

分析:

在[] == 0中,对于复杂类型转化过程是先执行toString再通过Number转成数字,因此结果是Number([].toString())==0

在![] == 0中,![]优先执行将数组转成布尔值再取反返回false,再转成数字,因此结果也是0

为什么"5">15为false,而"5">"15"为true

原因是:两个字符串数字比较的不是数字本身,而是通过charCodeAt获取到的Unicode编码的索引:

非常容易踩坑的引用类型隐式转换

less 复制代码
[] == [] //false(引用地址不一样、无异议)
[] == ![] //true(比较的转化后的数字)

{} == {} //false同上
{} ==!{} //false,哈哈和上面的数组对比结果是相反的

小结:隐式转换有时候容易让人产生误解,但也是有迹可循,把握住要点、就不会出错,如果大家有遇到什么有意思的隐式转换,欢迎留言讨论。。。

总结

充分了解掌握操作符和隐式转换的行为有助于我们编写更可靠、更易于维护 的代码。但在实际开发中,应合理的使用隐式转换,并在可能引起混淆的地方采用显式类型转换,以提高代码的清晰度和稳定性。

另外,合理的使用操作符可以帮助我们编写更简洁的代码,还可以提高代码的可读性 ( 如+操作符快捷转换数字、??控制合并操作符对处理数字0非常有用)。

相关推荐
涵信6 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安7 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板12 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩13 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真19 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记