前言
大家好,我是 xieyezi,好久不见,我又重新回归掘金啦, 这次为大家整理了20个使用频率很高的ES6代码块,希望大家喜欢😊
文中代码对应的详细注释和具体使用方法都放在我的
github
上,源代码在底部连接
1. 打乱数组顺序
![79bc193d76281bc219f93bed8b55b4d3.png](https://img-blog.csdnimg.cn/img_convert/79bc193d76281bc219f93bed8b55b4d3.png)
2. 去除数字之外的所有字符
![a719e90f21c6ff63e3634b4b6e369250.png](https://img-blog.csdnimg.cn/img_convert/a719e90f21c6ff63e3634b4b6e369250.png)
3. 反转字符串或者单词
![9ffc7309d8079b5e936aa1c97caf6d02.png](https://img-blog.csdnimg.cn/img_convert/9ffc7309d8079b5e936aa1c97caf6d02.png)
4. 将十进制转换为二进制或十六进制
![5bc1b1a68b66db2e14a40cc7946a4f49.png](https://img-blog.csdnimg.cn/img_convert/5bc1b1a68b66db2e14a40cc7946a4f49.png)
5. 合并多个对象
![e5b20e84ab000b6744761453fb3903b0.png](https://img-blog.csdnimg.cn/img_convert/e5b20e84ab000b6744761453fb3903b0.png)
6. ===
和 ==
的区别
![e899ad1ae3d29becb23f875e4a2e2f58.png](https://img-blog.csdnimg.cn/img_convert/e899ad1ae3d29becb23f875e4a2e2f58.png)
7. 解构赋值
![5e01a7867526f8b50c0a30923175ea72.png](https://img-blog.csdnimg.cn/img_convert/5e01a7867526f8b50c0a30923175ea72.png)
8. 交换变量的值
![db09ffbc6ebef4194bd581ccb6d9b72e.png](https://img-blog.csdnimg.cn/img_convert/db09ffbc6ebef4194bd581ccb6d9b72e.png)
9-1. 判断回文字符串
![b31e84e08d907d3de199fd8ccf916509.png](https://img-blog.csdnimg.cn/img_convert/b31e84e08d907d3de199fd8ccf916509.png)
回文字符串: 正着写和反着写都一样的字符串 (特别感谢\@浮生阁阁主[1]勘误)
9-2 判断两个字符串是否为互相排列
![297c0d86e3b123faa8d14446ed1e9939.png](https://img-blog.csdnimg.cn/img_convert/297c0d86e3b123faa8d14446ed1e9939.png)
判断两个字符串是否为互相排列: 给定两个字符串,一个是否是另一个的排列
10. 可选链操作符
![57b53d43340ce45e5c2a46d94c709bce.png](https://img-blog.csdnimg.cn/img_convert/57b53d43340ce45e5c2a46d94c709bce.png)
MDN: 可选链操作符(
?.
)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?.
操作符的功能类似于.
链式操作符,不同之处在于,在引用为空(nullish ) (null
或者undefined
) 的情况下不会引起错误,该表达式短路返回值是undefined
。与函数调用一起使用时,如果给定的函数不存在,则返回undefined
例如:
if (res && res.data && res.data.success) {
//code
}
复制代码
相当于:
if (res?.data?.success) {
// code
}
复制代码
11. 三目运算符
![e426f8eb61b450e6dbccf8227eb05fbd.png](https://img-blog.csdnimg.cn/img_convert/e426f8eb61b450e6dbccf8227eb05fbd.png)
12. 从数组中随机选择一个值
![0c85cc7016f99e72fa0babbb22494963.png](https://img-blog.csdnimg.cn/img_convert/0c85cc7016f99e72fa0babbb22494963.png)
13. 冻结对象
![ffaf5643e242702d0ded523b02347aa3.png](https://img-blog.csdnimg.cn/img_convert/ffaf5643e242702d0ded523b02347aa3.png)
14. 删除数组重复的元素
![465ad29192a28fac3823efd37f78d30f.png](https://img-blog.csdnimg.cn/img_convert/465ad29192a28fac3823efd37f78d30f.png)
15. 保留指定位小数
![49b8294a7d16a41216495114718df993.png](https://img-blog.csdnimg.cn/img_convert/49b8294a7d16a41216495114718df993.png)
16. 清空数组
![2b0ae3c7e8420b4276ef2db072dd8dff.png](https://img-blog.csdnimg.cn/img_convert/2b0ae3c7e8420b4276ef2db072dd8dff.png)
17. 从 RGB
转换为 HEX
![6c92ff7bfbfdacd2d06ffc4ebdf69624.png](https://img-blog.csdnimg.cn/img_convert/6c92ff7bfbfdacd2d06ffc4ebdf69624.png)
18. 从数组中获取最大值和最小值
![024232a1b031e7ace381a4cec96bf0c3.png](https://img-blog.csdnimg.cn/img_convert/024232a1b031e7ace381a4cec96bf0c3.png)
19. 空值合并运算符
![26e35ed603b3f24ba5eca2a28ec41c2d.png](https://img-blog.csdnimg.cn/img_convert/26e35ed603b3f24ba5eca2a28ec41c2d.png)
MDN: 空值合并操作符(
??
)是一个逻辑操作符,当左侧的操作数为null
或者undefined
时,返回其右侧操作数,否则返回左侧操作数。
20. 过滤数组中值为 false
的值
![d08b1db60efd000d98cc4212398b386e.png](https://img-blog.csdnimg.cn/img_convert/d08b1db60efd000d98cc4212398b386e.png)
源码
20个不容错过的ES6技巧[2]
以上,码字作图很辛苦,还望不要吝啬手中的赞,你的点赞是我继续更新的最大动力😊!
关于本文
作者:Xieyezi
https://juejin.cn/post/7083145771461115941