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

我已经为所有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);

输出：

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 84

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"}

结论

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

本文名称：10个清晰实用更显专业的JavaScript代码片段
新闻来源：http://www.shufengxianlan.com/qtweb/news24/2924.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容