首页 >头条 >强推:20个值得收藏的ES6小技巧

强推:20个值得收藏的ES6小技巧

青灯夜游
青灯夜游转载
2022-04-19 11:05:113713浏览

本篇文章整理分享ES6小技巧,为大家整理了20个使用频率很高的ES6代码块,希望大家喜欢!

1. 打乱数组顺序

1.png

【相关推荐:javascript学习教程

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

2.png

3. 反转字符串或者单词

3.png

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

4.png

5. 合并多个对象

5.png

6. <span style="font-size: 18px;">===</span><span style="font-size: 18px;">==</span> 的区别

6.png

7. 解构赋值

7.png

8. 交换变量的值

8.png

9-1. 判断回文字符串

9-1.png

回文字符串: 正着写和反着写都一样的字符串

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

9-2.png

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

10. 可选链操作符

10.png

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

例如:

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

相当于:

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

11. 三目运算符

11.png

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

12.png

13. 冻结对象

13.png

14. 删除数组重复的元素

14.png

15. 保留指定位小数

15.png

16. 清空数组

16.png

17. 从 <span style="font-size: 18px;">RGB</span> 转换为 <span style="font-size: 18px;">HEX</span>

17.png

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

18.png

19. 空值合并运算符

19.png

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

20. 过滤数组中值为 <span style="font-size: 18px;">false</span> 的值

20.png

源码

https://github.com/xieyezi/vuepress-blog/blob/master/docs/front-end/ES6-20个经常使用的技巧.md

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

【相关视频教程推荐:web前端

声明:
本文转载于:weixin。如有侵权,请联系admin@php.cn删除