专栏首页javascript艺术前端实用操作符,一些写代码的骚操作

前端实用操作符,一些写代码的骚操作

一些常用的操作符可以让你的前端代码更加简洁明了。本文整理一些 JS 中常用的运算符/操作符,其目的在于简化代码。

1、?? 操作符 空值合并/空判断

空值合并运算符 , 如果第一个参数不是null或者undefined,这个运算符将返回第一个参数,否则,它将返回第二个参数

null ?? 3      //3
undefined ?? 3 //3
7 ?? 3        //7
2、?. 操作符 null传导符(或链判断操作符)

在js,如果读取对象里的某个属性时,往往需要先判断对象是否存在,以防止报错。

let a = (obj && obj.name) || 'default';

以上代码可以使用 null 传导符简写为

let a = obj ?. name || 'default';
3、??= 操作符 逻辑空值赋值运算符

这个赋值操作符只有在当前值为空或未定义的情况下才会赋一个新的值。

let a = null
const b = 5
console.log(a ??= b)  // => 5
console.log(a = (a ?? b))   // => 5
4、三元运算符

val 为真,则 a 取值 ifTrue ,否则取值 ifFalse

const a = val ? ifTrue : ifFalse
5、~~ 操作符 双位运算符

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

Math.floor(4.9) === 4      //true
// 简写为:
~~4.9 === 4      //true

不过要注意,对正数来说 ~~ 运算结果与 Math.floor( ) 运算结果相同,而对于负数来说与Math.ceil( )的运算结果相同:

~~4.5                // 4
Math.floor(4.5)      // 4
Math.ceil(4.5)       // 5

~~-4.5        		// -4
Math.floor(-4.5)     // -5
Math.ceil(-4.5)      // -4
6、&&与 ||或 短路运算符

&&为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执行,否则返回最后一个真值

||为取真运算,从左到右依次判断,如果遇到一个真值,就返回真值,以后不再执行,否则返回最后一个假值

let param1 = expr1 && expr2
let param2 = expr1 || expr2
7、| 0 取整

对一个数字| 0可以取整,负数也同样适用,num | 0

1.3 | 0         // 1
-1.9 | 0        // -1
8、& 1 判断奇偶数

对一个数字& 1可以判断奇偶数,负数也同样适用,num & 1

const num=3;
!!(num & 1)                    // true
!!(num % 2)                    // true
9、_ 数值分割符

ES2021 引入了数值分割符 _ ,在数值组之间提供分隔,使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持,可以在浏览器里试起来。

let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了
console.log(number)             // 输出 100000000000000

此外,十进制的小数部分也可以使用数值分割符,二进制、十六进制里也可以使用数值分割符

0x11_1 === 0x111   // true 十六进制
0.11_1 === 0.111   // true 十进制的小数
0b11_1 === 0b111   // true 二进制
10、void 运算符

void 运算符 对给定的表达式进行求值,然后返回 undefined

可以用来给在使用立即调用的函数表达式(IIFE)时,可以利用 void 运算符让 JS 引擎把一个 function 关键字识别成函数表达式而不是函数声明。

function iife() { console.log('foo') }()       // 报错,因为JS引擎把IIFE识别为了函数声明
void function iife() { console.log('foo') }()  // 正常调用
~function iife() { console.log('foo') }()      // 也可以使用一个位操作符
(function iife() { console.log('foo') })()     // 或者干脆用括号括起来表示为整体的表达式

还可以用在箭头函数中避免传值泄漏,箭头函数,允许在函数体不使用括号来直接返回值。这个特性给用户带来了很多便利,但有时候也带来了不必要的麻烦,如果右侧调用了一个原本没有返回值的函数,其返回值改变后,会导致非预期的副作用。

const func = () => void customMethod()   // 特别是给一个事件或者回调函数传一个函数时

安全起见,当不希望函数返回值是除了空值以外其他值,应该使用 void 来确保返回 undefined,这样,当 customMethod 返回值发生改变时,也不会影响箭头函数的行为。

11、js操作符的优先级

JavaScript 运算符优先级,是描述在计算机运算计算表达式时执行运算的先后顺序。先执行具有较高优先级的运算,然后执行较低优先级的运算。例如,我们常说的先执行相乘和除,再执行加减运算。

圆括号用于改变由运算符优先级确定的计算顺序。这就是说,先计算完圆括号内的表达式,然后再将它的值用于表达式的其余部分。

其实在运算过程中,和其他语言一样,最好直接带上括号,如var a = 1; a = (a + 100) >>(a+1); 和 var a = 1; a = a + 100>>a+1;结果都是25,运算顺序也一样,前面的可读性更好吧?

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:zhangjing

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 代码详解——MATLAB出图:Figure的一些骚操作

    在很多期刊,尤其是国内期刊的写作要求中,对于图片很有可能会有一些奇奇怪怪的要求,例如:

    路径跟踪快讯
  • Python一行代码就能实现的骚操作

    在使用 Python 的过程中,每当遇到一行代码就解决很实际问题的场景,我都惊呼 Python 生态牛逼,今天就来分享下这种一行代码就可以搞定的 6 个骚操作,...

    somenzz
  • 逆向趣事:那些封印在代码中的骚操作

    在逆向一些正常或恶意软件时,有时会遇到一些作者封印在代码中的骚操作,有趣又另类,甚至可以作为检测规则来应用,今天就来聊聊这些骚操作。

    泉哥
  • Python骚操作:一行代码实现探索性数据分析

    在使用数据前,我们首先要做的是观察数据,包括查看数据的类型、数据的范围、数据的分布等。dataprep.eda是个非常不错的工具,它可以帮你快速生成数据概览。d...

    统计学家
  • 一些冷门的js操作0.前言1.数组2.位操作符2.1字符串转数字2.2更多的操作3. 构造类

    大家学习的时候,一开始小白,然后接触到进阶的东西的时候,发现一切得心应手,有的人可能开始说精通了。突然有一天,发现了一些基于很基础的东西的骚操作,就开始怀疑人生...

    lhyt
  • Shell脚本中字符串的一些常用操作

    ${string:position:length} 在${string}中, 从位置${position}开始提取长度为${length}的子串

    卡尔曼和玻尔兹曼谁曼
  • 干货|Windows下进程操作的一些C++代码

    因为要获取进程第一个参数选择TH32CS_SNAPPROCESS来获取系统中所有的进程,具体可以参考[CreateToolhelp32Snapshot]:htt...

    HACK学习
  • 如何使用管道操作符优雅的书写R语言代码

    本文将跟大家分享如果在R语言中使用管道操作符优化代码,以及管道函数调用及传参的注意事项。 使用R语言处理数据或者分析,很多时候免不了要写连续输入输出的代码,按照...

    数据小磨坊
  • pycharm 实现本地写代码,服务器运行的操作

    python代码作为脚本语言,其实最好直接使用vim在字符界面里面直接编写,这才是正道,但是作初学者,其实直接在服务器上写代码是很不习惯的,所以我这边希望能写一...

    砸漏
  • 骚操作|如何利用 IDEA 高效找出全部未被使用的代码

    不得不说 idea 真的很强大,认真花一些时间,好好研究研究 idea 可以让你编写代码更加的高效,并且 idea 时不时会给你一些惊喜的

    zhisheng
  • HDFS之使用Java客户端对文件的一些操作

    孙晨c
  • 漫画:骚操作系列(一文让你学会如何用代码判断"24"点)

    “24点”是一种数学游戏,正如象棋、围棋一样是一种人们喜闻乐见的娱乐活动。它始于何年何月已无从考究,但它以自己独具的数学魅力和丰富的内涵正逐渐被越来越多的人们所...

    程序员小浩
  • 总结了一些算法二叉树操作的干货 (附Python代码)

    导读:二叉树是一种经典的数据结构,其概念本身不难理解,但因其结构的特殊性,许多操作都有着非常精妙的技巧。结合最近LeetCode中的一些相关题目,简要记录一些个...

    程序IT圈
  • 小白秒变大神--windows窗口+装B神器大全 两部曲

    在现代生活中,电脑已经普及到方方面面。无论是休闲娱乐,还是上班办公,它都陪在我们身边,成为我们生活中不可分割的一部分。

    C you again 的博客
  • 收集一些实用的电脑使用习惯和操作技巧

    今天小编收集一些实用的电脑使用习惯和操作技巧,希望对大家能有所帮助! . (一)运行命令功能篇

    IT技术分享社区
  • 不会吧不会吧,你不会还不知道这些提高JS代码质量的骚操作吧?

    程序的健壮性是指程序在执行时,在局部发生错误的情况下,不影响整个系统的运行,而且我们能够很快的定位到发生错误的位置。我们通常使用以下几种方式来保证程序的健壮性。

    AlbertYang
  • 干货 | 结构体、联合体嵌套使用的一些实用操作

    结构体、联合体是C语言中的构造类型,结构体我们平时应该都用得很多。但是,对于联合体,一些初学的朋友可能用得并不多,甚至感到陌生。我们先简单看一下联合体:

    嵌入式与Linux那些事
  • 奇葩程序员:使用python“奇技淫巧”的骚操作,大开眼界

    随着深度学习、机器学习等技术的火热发展,python 作为一种面向对象的动态类型语言也跟着火了起来。 不少计算机科班出身的同学,在大学期间学习的多是 C++或 ...

    汤贤
  • 学会这些(滑动关机、应用多开、QQ微信消息攻击、表白神器),逼格瞬间提升1000倍

    时隔多天,今天又和大家见面了。上期分享的关于计算窗口的一些基本操作,你可以点击《关于Windows窗口的这些骚操作,Are you know?》查看。本期为老铁...

    C you again

扫码关注云+社区

领取腾讯云代金券