举报网站建设运行汇报,优良的定制网站建设制作商,seopc流量排行榜企业,wordpress适合做什么网站吗大家好#xff0c;我是若川。今天推荐一篇相对简单些的文章。大家应该都知道了我最近组织了源码共读活动#xff0c; 有小伙伴表示读源码上瘾#xff0c;也很有收获。工作0-5年都可以参与。感兴趣可以加我微信 ruochuan12 私信 源码 进群。1. 数值分割符 _2. 逗号运算符 ,3.… 大家好我是若川。今天推荐一篇相对简单些的文章。大家应该都知道了我最近组织了源码共读活动 有小伙伴表示读源码上瘾也很有收获。工作0-5年都可以参与。感兴趣可以加我微信 ruochuan12 私信 源码 进群。1. 数值分割符 _2. 逗号运算符 ,3. 零合并操作符 ??4. 可选链操作符 ?.5. 私有方法/属性6. 位运算符 与 7. 位运算符 与 |8. 双位运算符 ~~9. 短路运算符 与 ||10. void 运算符11. 其他常用操作符12. 操作符优先级JS 里的操作符大家每天都在使用还有一些 ES2020、ES2021 新加的实用操作符这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外还会介绍 JS 里一些不常用但是很强大的操作符下面我们一起来看看吧1. 数值分割符 _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 二进制
2. 逗号运算符 ,什么逗号也可以是运算符吗是的曾经看到这样一个简单的函数将数组的第一项和第二项调换并返回两项之和function reverse(arr) {return [arr[0], arr[1]][arr[1], arr[0]], arr[0] arr[1]
}
const list [1, 2]
reverse(list) // 返回 3此时 list 为[2, 1]
逗号操作符对它的每个操作数求值从左到右并返回最后一个操作数的值。expr1, expr2, expr3...
会返回最后一个表达式 expr3 的结果其他的表达式只会进行求值。3. 零合并操作符 ??零合并操作符 ?? 是一个逻辑操作符当左侧的操作数为 null 或者 undefined 时返回右侧操作数否则返回左侧操作数。expr1 ?? expr2
空值合并操作符一般用来为常量提供默认值保证常量不为 null 或者 undefined以前一般使用 || 来做这件事 variable variable || bar。然而由于 || 是一个布尔逻辑运算符左侧的操作数会被强制转换成布尔值用于求值。任何假值0 NaN null undefined都不会被返回。这导致如果你使用 0、、NaN 作为有效值就会出现不可预料的后果。正因为 || 存在这样的问题而 ?? 的出现就是解决了这些问题?? 只会在左侧为 undefined、null 时才返回后者?? 可以理解为是 || 的完善解决方案。可以在浏览器中执行下面的代码感受一下undefined || default // default
null || default // default
false || default // default
0 || default // defaultundefined ?? default // default
null ?? default // default
false ?? default // false
0 ?? default // 0
另外在赋值的时候可以运用赋值运算符的简写 ??let a {b: null, c: 10}
a.b ?? 20
a.c ?? 20
console.log(a) // 输出 { b: 20, c: 10 }
4. 可选链操作符 ?.可选链操作符 ?. 允许读取位于连接对象链深处的属性的值而不必验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符不同之处在于在引用为 null 或者 undefined 的情况下不会引起错误该表达式短路返回值是 undefined。当尝试访问可能不存在的对象属性时可选链操作符将会使表达式更短、更简明。const obj {a: foo,b: {c: bar}
}console.log(obj.b?.c) // 输出 bar
console.log(obj.d?.c) // 输出 undefined
console.log(obj.func?.()) // 不报错输出 undefined
以前可能会通过 obj obj.a obj.a.b 来获取一个深度嵌套的子属性现在可以直接 obj?.a?.b 即可。可选链除了可以用在获取对象的属性还可以用在数组的索引 arr?.[index]也可以用在函数的判断 func?.(args)当尝试调用一个可能不存在的方法时也可以使用可选链。调用一个对象上可能不存在的方法时版本原因或者当前用户的设备不支持该功能的场景下使用可选链可以使得表达式在函数不存在时返回 undefined 而不是直接抛异常。const result someInterface.customFunc?.()
5. 私有方法/属性在一个类里面可以给属性前面增加 # 私有标记的方式来标记为私有除了属性可以被标记为私有外getter/setter 也可以标记为私有方法也可以标为私有。class Person {getDesc(){ return this.#name this.#getAge()}#getAge(){ return this.#age } // 私有方法get #name(){ return foo } // 私有访问器#age 23 // 私有属性
}
const a new Person()
console.log(a.age) // undefined 直接访问不到
console.log(a.getDesc()) // foo 23
6. 位运算符 与 有符号右移操作符 将第一个操作数向右移动指定的位数多余的位移到右边被丢弃高位补其符号位正数补 0负数则补 1。因为新的最左位与前一个最左位的值相同所以符号位最左位不会改变。(0b1111).toString(2) // 11
(-0b1111).toString(2) // -100 感觉跟直觉不一样
正数的好理解负数怎么理解呢负数在计算机中存储是按照补码来存储的补码的计算方式是取反加一移位时将补码形式右移最左边补符号位移完之后再次取反加一求补码获得处理后的原码。-111 // 真值
1 0000111 // 原码高位的0无所谓后面加不到
1 1111001 // 补码
1 1111100 // 算数右移
1 0000100 // 移位后求补码获得原码
-100 // 移位后的真值
一般我们用 来将一个数除 2相当于先舍弃小数位然后进行一次 Math.floor10 1 // 5
13 1 // 6 相当于
13.9 1 // 6
-13 1 // -7 相当于
-13.9 1 // -7
无符号右移操作符 将符号位作为二进制数据的一部分向右移动高位始终补 0对于正整数和算数右移没有区别对于负数来说由于符号位被补 0成为正数后就不用再求补码了所以结果总是非负的。即便右移 0 个比特结果也是非负的。(0b1111).toString(2) // 11
(-0b1111).toString(2) // 1111111111111111111111111111100
可以这样去理解-111 // 真值
1 000000000000000000000000000111 // 原码
1 111111111111111111111111111001 // 补码
0 111111111111111111111111111100 // 算数右移由于右移后成为正数就不要再求补码了
1073741820 // 移位后的真值
左移运算符 与之类似左移很简单左边移除最高位低位补 0(0b11111111111111111111111111111001).toString(2) // -1000
(0b11111111111111111111111111111001).toString(2) // -1000
PSJS 里面没有无符号左移而且其他语言比如 JAVA 也没有无符号左移。7. 位运算符 与 |位运算符是按位进行运算 与、| 或、~ 非、^ 按位异或: 1010 |: 1010 ~: 1010 ^: 10100110 0110 0110---- ---- ---- ----0010 1110 0101 1100
使用位运算符时会抛弃小数位我们可以利用这个特性来给数字取整比如给任意数字 上二进制的 32 个 1或者 | 上 0显而易见后者简单些。所以我们可以对一个数字 | 0 来取整负数也同样适用1.3 | 0 // 1
-1.9 | 0 // -1
判断奇偶数除了常见的取余 % 2 之外也可以使用 1来判断二进制数的最低位是不是 1这样除了最低位之外都被置 0取余的结果只剩最低位是不是很巧妙。负数也同样适用const num 3
!!(num 1) // true
!!(num % 2) // true
8. 双位运算符 ~~可以使用双位操作符来替代正数的 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
PS注意 ~~(num/2) 方式和 num 1 在值为负数时的差别9. 短路运算符 与 ||我们知道逻辑与 与逻辑或 || 是短路运算符短路运算符就是从左到右的运算中前者满足要求就不再执行后者了。可以理解为 为取假运算从左到右依次判断如果遇到一个假值就返回假值以后不再执行否则返回最后一个真值|| 为取真运算从左到右依次判断如果遇到一个真值就返回真值以后不再执行否则返回最后一个假值let param1 expr1 expr2
let param2 expr1 || expr2
短路运算符因此可以用来做很多有意思的事比如给变量赋初值let variable1
let variable2 variable1 || foo
如果 variable1 是真值就直接返回了后面短路就不会被返回了如果为假值则会返回后面的foo。也可以用来进行简单的判断取代冗长的if语句let variable param param.prop
// 有了可选链之后可以直接 param?.prop
如果 param 如果为真值则返回 param.prop 属性否则返回 param 这个假值这样在某些地方防止 param 为 undefined 的时候还取其属性造成报错。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. 其他常用操作符三元表达式很简单了大家经常用expr ? expr1 : expr2 如果 expr 为真值则返回 expr1否则返回 expr2赋值运算符简写加法赋值 、减法赋值 -、乘法赋值 *、除法赋值 /、求幂赋值 **、按位或复制 |、按位与赋值 、有符号按位右移赋值 、无符号按位右移赋值 、逻辑空赋值 ?? ....求幂运算符var1 ** var2 相当于 Math.pow结果为 var1 的 var2 次方12. 操作符优先级正因为有操作符优先级所以 variable 1, 2 的含义是将变量先赋值为 1再返回数字 2而不是变量赋值给 1, 2 的返回值 2这是因为 运算符的优先级高于 , 逗号运算符。再比如表达式 6 - 2 * 3 0 1- * 这四个运算符优先级最高的 * 先运算然后 - 运算符结果为 0 运算符优先级高于 而 true 1 的结果为 1所以这就是运算的结果。下面的表将运算符按照优先级的不同从高20到低1排列但这个不是最新的至少没包括可选链建议参考这个表[1]或者 MDN[2]。运算符优先级参考文档运算符优先级 - JavaScript | MDN[3]JS 中可以提升幸福度的小技巧[4]4个未听说过的强大JavaScript操作符聊聊JavaScript中的二进制数[5]PS本文收录在在下的博客 Github - SHERlocked93/blog[6] 系列文章中欢迎 star~参考资料[1]运算符优先级 - JavaScript | MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence[2]JS 中可以提升幸福度的小技巧: https://juejin.cn/post/6844903641468403726[3]聊聊JavaScript中的二进制数: https://zhuanlan.zhihu.com/p/22297104最近组建了一个杭州的前端交流群如果你是在杭州工作可以加我微信 ruochuan12 私信 杭州 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历面对 this 指向丢失尤雨溪在 Vuex 源码中是怎么处理的老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
