20个不容错过的ES6技巧

前言

大家好,我是 xieyezi,好久不见,我又重新回归掘金啦, 这次为大家整理了20个使用频率很高的ES6代码块,希望大家喜欢😊

文中代码对应的详细注释和具体使用方法都放在我的 github 上,源代码在底部连接

1. 打乱数组顺序

79bc193d76281bc219f93bed8b55b4d3.png
code1.png

2. 去除数字之外的所有字符

a719e90f21c6ff63e3634b4b6e369250.png
code20.png

3. 反转字符串或者单词

9ffc7309d8079b5e936aa1c97caf6d02.png
code2.png

4. 将十进制转换为二进制或十六进制

5bc1b1a68b66db2e14a40cc7946a4f49.png
code3.png

5. 合并多个对象

e5b20e84ab000b6744761453fb3903b0.png
code4.png

6. ===== 的区别

e899ad1ae3d29becb23f875e4a2e2f58.png
code5.png

7. 解构赋值

5e01a7867526f8b50c0a30923175ea72.png
code6.png

8. 交换变量的值

db09ffbc6ebef4194bd581ccb6d9b72e.png
code7.png

9-1. 判断回文字符串

b31e84e08d907d3de199fd8ccf916509.png
code21.png

回文字符串: 正着写和反着写都一样的字符串 (特别感谢\@浮生阁阁主[1]勘误)

9-2 判断两个字符串是否为互相排列

297c0d86e3b123faa8d14446ed1e9939.png
code8.png

判断两个字符串是否为互相排列: 给定两个字符串,一个是否是另一个的排列

10. 可选链操作符

57b53d43340ce45e5c2a46d94c709bce.png
code9.png

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

例如:

if (res && res.data && res.data.success) {   
   //code
} 
复制代码

相当于:

if (res?.data?.success) {
  // code
}
复制代码

11. 三目运算符

e426f8eb61b450e6dbccf8227eb05fbd.png
code10.png

12. 从数组中随机选择一个值

0c85cc7016f99e72fa0babbb22494963.png
code11.png

13. 冻结对象

ffaf5643e242702d0ded523b02347aa3.png
code12.png

14. 删除数组重复的元素

465ad29192a28fac3823efd37f78d30f.png
code13.png

15. 保留指定位小数

49b8294a7d16a41216495114718df993.png
code14.png

16. 清空数组

2b0ae3c7e8420b4276ef2db072dd8dff.png
code15.png

17. 从 RGB 转换为 HEX

6c92ff7bfbfdacd2d06ffc4ebdf69624.png
code16.png

18. 从数组中获取最大值和最小值

024232a1b031e7ace381a4cec96bf0c3.png
code17.png

19. 空值合并运算符

26e35ed603b3f24ba5eca2a28ec41c2d.png
code18.png

MDN: 空值合并操作符??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。

20. 过滤数组中值为 false 的值

d08b1db60efd000d98cc4212398b386e.png
code19.png

源码

20个不容错过的ES6技巧[2]

以上,码字作图很辛苦,还望不要吝啬手中的赞,你的点赞是我继续更新的最大动力😊!

关于本文

作者:Xieyezi

https://juejin.cn/post/7083145771461115941

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值