10个清晰实用的JavaScript代码片段

22 篇文章 1 订阅

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、合并数组

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

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""nullundefinedNaN,和false总是假 。

其他一切都为真。

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

 const bool1 = !0;        // true
const bool2 = !100;      // false
const bool3 = !"test";   // false
const bool4 = !!"test";  // 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);   // string
console.log(num);  // 1

 7、将字符串转换为数字

const numStr = "124";
const num = +numStr;
console.log(typeof num);
console.log(num);  // 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); 
}

输出:

 1

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

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

输出:

 1

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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
StarUML是一款广泛使用的建模工具,可以帮助我们设计、绘制和分析各种软件系统。它支持多种编程语言,其中包括JavaScriptJavaScript是一种脚本语言,广泛应用于Web前端开发。通过StarUML,我们可以在建模过程中使用JavaScript语言来描述和定义系统的行为和功能。 使用StarUML进行JavaScript建模可以带来多项好处。首先,通过将JavaScript与StarUML的图形化界面结合使用,我们可以更清晰地展示和分析系统的架构和设计。在建模过程中,我们可以使用图表、类图、序列图等各种工具来描述JavaScript代码的组织结构和关系,从而更好地理解和掌握整个系统的流程和逻辑。 此外,StarUML还支持通过插件扩展其功能,我们可以使用现有的或自定义的插件来支持JavaScript建模。这些插件可以提供额外的功能和工具,帮助我们更高效地进行JavaScript建模。例如,某些插件可以生成JavaScript代码片段或模板,帮助我们更快速地编写代码。 总之,StarUML是一个强大的建模工具,通过它我们可以在建模过程中使用JavaScript语言来描述和定义系统的行为和功能。这样可以更好地展示系统的架构和设计,并且可以通过插件扩展其功能,提高建模的效率。尽管StarUML在设计和分析软件方面有很多优点,但我们在使用之前也需要了解其使用方法和限制,以确保正确使用和解释建模结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值