10个清晰实用更显专业的JavaScript代码片段

青旅半醒 2022-09-14 15:22 132阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

我已经为所有JavaScript程序员收集了一些最酷，最有用的速记代码清单。使用这些代码清单，可以使你的代码看起来更专业。

# **1、单行If-Else语句** #

你可能熟悉这样的常规if-else语句：

if (10 < 100) {  console.log("True");} else {  console.log("False");}

输出

True

但是，你知道吗，你可以通过使用三元运算符，以更短，更简洁的方式编写上面的代码？

10 <100 ？console.log（“True”）：console.log（“False”）

输出：

True

通常，三元运算符遵循以下简单模式：

condition ? trueExpression : falseExpression

三元运算符也可以链接在一起以形成更长的链。但是，它通常会使代码变得很冗长。明智地使用它们，不会使事情变得更复杂。

# **2、合并数组** #

你可以使用传播运算符（...）将一个数组的元素扩展为另一个数组，例如：

const numbers = [10, 20, 30, 40];const allNumbers = [...numbers, 50, 60, 70, 80];console.log(allNumbers);

输出：

[10, 20, 30, 40, 50, 60, 70, 80]

# **3、从阵列中删除重复项** #

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)];console.log(uniqueNumbers);

输出：

[1, 20, 3, 9]

# **4、将任何内容转换为布尔值** #

除了true和false之外，JavaScript还将其他类型视为真或假。

*  0，""，null，undefined，NaN，和false总是假 。
 *  其他一切都是真实的。

正因为如此，在JavaScript中，你可以将任何值转换为true和false与一元运算符（!）：

const bool1 = !0;        // trueconst bool2 = !100;      // falseconst bool3 = !"test";   // falseconst bool4 = !!"test";  // trueconsole.log(bool1, bool2, bool3, bool4);

输出：

true false false true

# **5、交换两个变量而没有第三个** #

let x = 1;let y = 2;[x, y] = [y, x];console.log(x, y);

输出：

2 1

# **6、将数字转换为字符串** #

const num = 1 +“”;console.log（typeof num）; console.log（num）;

输出：

string1

# **7、将字符串转换为数字** #

const numStr = "124";const num = +numStr;console.log(typeof num);console.log(num);

输出：

number 124

# **8、将变量嵌入到字符串** #

通过使用反引号（\`）将字符串括起来并将变量插入之间，将变量整齐地嵌入到字符串之间$\{\}：

const age = 41;const sentence = `I'm ${age} years old`;console.log(sentence);

输出：

I'm 41 years old

# **9、将字符串拆分为数组** #

要将字符串拆分为数组，可以使用扩展运算符（...）：

const str = "Test"const strAsArr = [...str]console.log(strAsArr)

输出：

["T", "e", "s", "t"]

# **10、可选链接** #

***“可选的链接运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。” — MDN Web文档***

假设你有一个data对象，并且想要安全地访问data.test.value。首先，你需要检查：

*  data 是否被定义。
 *  data.test 是否被定义。

在data.test.value，你可以调用之前，因为，你显然无法读取undefined属性。

const data = {test：{value：1}}if（data && data.test）{   console.log（data.test.value）; }

输出：

幸运的是，使用可选链接的方法，你可以简单明了地编写上面的代码：

const value = data?.test?.value;console.log(value)

输出：

现在，你还可以安全地尝试访问不存在的属性，而不会出现问题：

console.log(data?.this?.does?.not?.exist?.for?.sure)

输出：

undefined

# **加餐：提高JSON的可读性** #

我确定你以前用过JSON.stringify()。但是，你可能不使用它的一种方法是对JSON数据进行整齐缩进。

让我们看看如何完成此任务。该JSON.stringify()方法接受两个可选参数：

*  替换功能，用于过滤显示的JSON。在这种情况下，可以是null，因为我们不需要它。
    
     *  一个空格值，可以是所需空格的数目或字符串。在这种情况下，让我们使用制表符（'\\t'）缩进JSON对象以使其看起来不错：

const readableJSON = JSON.stringify({ a: 'A', b: 'B' }, null, '\t');console.log(readableJSON);

输出：

{      "a": "A",      "b": "B"}

# **结论** #

我希望，我今天分享的这些技巧对你有用。如你还有什么问题，你可以在留言区与我一起分享探讨，同时，你如果还有其他好的方法，你也可以分享出来，一起学习进步。

感谢阅读。

> 作者：web前端开发https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/115774671

![337503ce457924f183efa8027f402dd9.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![3944f2ba23de901dd57184b833f84f26.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![e3732ff5d5586d527b64c81ed9491b3b.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![91d29e20d0cc1523da8f71e9b8c0e8d3.png][]

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![0821c7a9eefd42fd0b1cd67380307517.png][]

![c742c32a1e6765a98d0b723be0745baf.png][]

点个**在看**支持我吧

![129773b38935db593473aec4b9a3911d.gif][]

[337503ce457924f183efa8027f402dd9.png]: /images/20220828/c92b75bbab2d40e1b59c8c96b4d0866e.png
[Link 1]: https://blog.csdn.net/abcdefg90876/article/details/120258736
[3944f2ba23de901dd57184b833f84f26.png]: /images/20220828/77f48b447ea741d99f759c5e4000f00b.png
[Link 2]: https://blog.csdn.net/LuckyWinty/article/details/120329069
[e3732ff5d5586d527b64c81ed9491b3b.png]: /images/20220828/874bbd9cd9664efca71872cad1ce7c26.png
[2020]: https://blog.csdn.net/qianduan167/article/details/106813305
[91d29e20d0cc1523da8f71e9b8c0e8d3.png]: /images/20220828/118b1903928a41b6aa38f5c10e7e0ec9.png
[0821c7a9eefd42fd0b1cd67380307517.png]: /images/20220828/87a16bc3ba04444fadb98b612bce3639.png
[c742c32a1e6765a98d0b723be0745baf.png]: /images/20220828/8568b2afbcc6423789b27dabeaa4c0d5.png
[129773b38935db593473aec4b9a3911d.gif]: /images/20220828/3f2592dcc0874f3f9cfe2541adb7cc6a.png