绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
20个不容错过的ES6技巧
2022-04-26 16:27:27
前言

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

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

1. 打乱数组顺序

code1.png

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

code20.png

3. 反转字符串或者单词

code2.png

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

code3.png

5. 合并多个对象

code4.png

6. ===== 的区别

code5.png

7. 解构赋值

code6.png

8. 交换变量的值

code7.png

9-1. 判断回文字符串

code21.png

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

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

code8.png

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

10. 可选链操作符

code9.png

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

例如:

if (res && res.data && res.data.success) {   
   //code

复制代码

相当于:

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

11. 三目运算符

code10.png

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

code11.png

13. 冻结对象

code12.png

14. 删除数组重复的元素

code13.png

15. 保留指定位小数

code14.png

16. 清空数组

code15.png

17. 从 RGB 转换为 HEX

code16.png

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

code17.png

19. 空值合并运算符

code18.png

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

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

code19.png

源码

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

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


关于本文

作者:Xieyezi

https://juejin.cn/post/7083145771461115941


分享好友

分享这个小栈给你的朋友们,一起进步吧。

趣谈前端
创建时间:2020-07-15 17:32:01
一个重度代码洁癖者,有对前端生态的总结,思考和探索。内容涵盖了笔者多年对vue,react,node,webpack以及javascript框架设计的探索和经验。公众号 - 趣谈前端
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • xujiang
    栈主

小栈成员

查看更多
  • ?
  • victoria_ltt
  • asdjlk1
  • LCR_
戳我,来吐槽~