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

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

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

[[424579]]

1、单行If-Else语句

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

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

输出

  1. True 

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

  1. 10 <100 ?console.log(“True”):console.log(“False”) 

输出:

  1. True 

通常,三元运算符遵循以下简单模式:

  1. condition ? trueExpression : falseExpression 

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

2、合并数组

你可以使用传播运算符(...)将一个数组的元素扩展为另一个数组,例如:

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

输出:

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

3、从阵列中删除重复项

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

输出:

  1. [1, 20, 3, 9] 

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

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

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

正因为如此,在JavaScript中,你可以将任何值转换为true和false与一元运算符(!):

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

输出:

  1. true false false true 

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

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

输出:

  1. 2 1 

6、将数字转换为字符串

  1. const num = 1 +“”;console.log(typeof num); console.log(num); 

输出:

  1. string1 

7、将字符串转换为数字

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

输出:

  1. number 84 

8、将变量嵌入到字符串

通过使用反引号(`)将字符串括起来并将变量插入之间,将变量整齐地嵌入到字符串之间${}:

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

输出:

  1. I'm 41 years old 

9、将字符串拆分为数组

要将字符串拆分为数组,可以使用扩展运算符(...):

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

输出:

  1. ["T""e""s""t"

10、可选链接

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

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

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

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

  1. const data = {test:{value:1}}if(data && data.test){ console.log(data.test.value); } 

输出:

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

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

输出:

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

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

输出:

  1. undefined 

加餐:提高JSON的可读性

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

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

  • 替换功能,用于过滤显示的JSON。在这种情况下,可以是null,因为我们不需要它。

一个空格值,可以是所需空格的数目或字符串。在这种情况下,让我们使用制表符('\t')缩进JSON对象以使其看起来不错:

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

输出:

  1. "a""A""b""B"

结论

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

责任编辑:未丽燕 来源: web前端开发
相关推荐

2015-10-08 08:53:46

PHP代码片段

2011-07-07 10:35:53

htaccess

2023-06-16 16:34:25

JavaScripWeb 开发

2024-01-04 16:46:58

JavaScript开发

2023-11-03 16:02:00

JavaScript开发

2020-11-16 16:04:42

CSS设计代码

2015-11-02 09:25:07

jQuery代码片段

2011-11-23 09:21:43

jQuery

2022-06-08 08:55:15

JavaScript代码前端

2011-07-14 10:07:19

PHP

2024-04-09 00:00:00

Java代码片段

2015-10-29 10:30:41

C#程序员实用代码

2023-10-09 14:48:06

2023-10-10 16:16:05

JavaScrip开发

2023-05-22 15:53:06

JavaScrip代码素材

2011-07-11 10:16:07

JavaScript

2015-08-19 09:15:11

C#程序员实用代码

2023-12-26 14:28:08

JavaScript开发

2019-07-02 10:36:30

JavaScript硬件开发

2021-03-15 08:13:19

JavaScript开发代码
点赞
收藏

51CTO技术栈公众号