20个简洁的 JS 代码片段

2023-11-18

20个简洁的 JS 代码片段

1、单行 If-Else 语句

这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句,而不是在多行上编写 if-else。

例如:


const age = 12;
let ageGroup;


// LONG FORM
if (age > 18) {
   
  ageGroup = "An adult";
} else {
   
  ageGroup = "A child";
}
// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";
但是,不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。

2、从数组中删除重复项

在 JavaScript 中,Set 是一个集合,它允许你仅存储唯一值。这意味着删除任何重复的值。
因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
困惑吗?让我解释一下它是如何工作的:
1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
2)、展开运算符…将任何可迭代对象转换为数组。这意味着将集合转换回数组。[…new Set(numbers)]

3、 较短的 If-Else 的空合并

这也是 if-else 的简写。
你可以使用看涨合并,而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??,如果没有定义左侧返回右侧。如果是,则返回左侧:

let maybeSomething;


// LONG FORM
if(maybeSomething){
   
  console.log(maybeSomething)
} else {
   
  console.log("Nothing found")
}



//SHORTHAND
console.log(maybeSomething ?? "Nothing found")

4、防止崩溃的可选链

如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。
在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。
例如:

const student = {
   
  name: "Matt",
  age: 27,
  address: {
   
    state: "New York"
  },
};


// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined


// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

5、在没有第三个变量的情况下交换两个变量

在 JavaScript 中,你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个:

let x = 1;
let y = 2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

20个简洁的 JS 代码片段 的相关文章

随机推荐

  • cuda求矩阵每一行最大值

    2 完成一个尺寸512 512的二维数组的每一行最大值的并行程序实现数据类型设置为float 需要完成4个版本 1 不使用共享内存 只使用全局内存 采用具有分支发散的并行归约 include cuda runtime h include d
  • Spring Cloud OAuth2 搭建授权服务器 + 客户端 + 令牌中继

    SpringBoot 版本2 1 4 RELEASE Spring Cloud版本Greenwich RELEASE 说明 token采用redis存储 用户信息采用数据库存储 oauth2官网整合springboot的例子 含服务端配置和
  • OpenJDK源码阅读-Oop&Klass

    文章目录 oop klass OBJECT hierarchy metadata hierarchy klass hierarchy oop classDiagram description klass classDiagram descr
  • Android Studio 4.0 gradle-6.1.1-all.zip 下载速率太慢或失败解决办法

    今天在家里电脑上新装了Android Studio 4 0 gradlegradle 6 1 1 all zip 下载速度实在是太慢了 后来尝试在https downloads gradle dn com distributions gra
  • python编程语言的优缺点-python语言的特点(优缺点)总结

    BEGIN 优点 1 简单 设计原则 简单 优雅 明确 易于学习 较少的关键字 结构简单 易于阅读 python代码定义更清晰 易于维护 源代码容易维护 2 广泛的开源库 丰富的第三方库 3 互动模式 支持互动模式 可从终端输入执行代码并得
  • 深入理解java反射机制

    一 java的核心机制 java有两种核心机制 java虚拟机 JavaVirtual Machine 与垃圾收集机制 Garbage collection Java虚拟机 是运行所有Java程序的抽象计算机 是Java语言的运行环境 在其
  • 如何学习大数据

    文章目录 每日一句正能量 前言 一 什么是大数据 二 大数据的应用领域 三 社会对大数据的人才需求 四 大数据的学习路线 后记 每日一句正能量 多数人认为 一旦达到某个目标 人们就会感到身心舒畅 但问题是你可能永远达不到目标 把快乐建立在还
  • 看到了一个 蒙特卡洛方法 随机数得出 圆周率的c++ 源码

    package bt6 import java util Random 看到了一个 蒙特卡洛方法 随机数得出 圆周率的c 源码 复制过来 一个Java版的见笑了 author suifeng public class PITest publ
  • sqlmap过SQLi-LABS靶场 11-20关

    第11关 后面基本都是post注入了 不过我们用的是神器sqlmap 我们先随便输入 然后bp抓包 把抓到的包保存问txt格式 然后在sqlmap 指定他 用 r sqlmap py r C Users Administrator Desk
  • 记录shardingsphere 5.0.0的一个问题

    shardingsphere的一个问题 最近shardingsphere更新了5 0 0版本 加入了很多新特性 所以我在自己的练习项目中想启动配置启动一下 但是并不是那么顺利 升级之后就直接无法启动了 根据错误栈提示是找不到一个名为Mode
  • Android studio 模拟器启动黑屏解决办法附图详细

    Android studio 模拟器启动黑屏解决办法附图详细 问题描述 原因分析 android模拟器在创建时 一般默认设置为热启动 所以每次关闭模拟器时 会提示保存当前运行界面状态 若选择取消 则下一次启动会以最近一次保存的状态启动显示
  • Pycharm安装CV2

    1 win r 然后输入cmd进入中端 安装的指令用 pip install opencv python i http mirrors aliyun com pypi simple trusted host mirrors aliyun c
  • husky hooks 不起作用的解决方法

    问题 在项目实际应用过程中遇到过一次 husky hooks 不生效的问题 这里记录下 问题表现 问题比较直观 通过 huksy install 之后 git commit 时 pre commit 设置的 hooks 不起作用 重新安装
  • 最详细的Vivado安装教程

    V i v a d o 安 装
  • Date类型与字符串的相互转换

    Date时间类型与字符串的相互转换 Test public void date throws ParseException 一 Date时间类型转字符串 1 获取当前时间 Date date new Date 2 设定时间格式 下面两行可以
  • 2017蓝桥杯C++A组题解集合

    总结 蓝桥杯的题目大多数都是暴利或者dfs bfs解出来的 注意往这上面思考 下面是赛题的链接 https wenku baidu com view 951dab772a160b4e767f5acfa1c7aa00b52a9d2d html
  • 程序发生run time error原因及解决方案

    程序发生run time error原因及解决方案 runtime error现象即产生原因 属于运行时错误 当程序运行到一半 程序发生崩溃 1 数组过小 2 除数为零 3 大数组定义在函数内 4 指针越界 5 还有可能是程序抛出了未接收的
  • angular Model 指令

    ng model指令用于绑定应用程序数据到HTML控制器 input select textarea 的值 可以将输入域的值域AngularJS创建的变量绑定 并且支持双向绑定 如下例子 div name div
  • elementUI使用el-upload上传文件写法总结及避坑,上传图片/视频到本地/服务器以及回显+删除

    Element Upload 上传 Element Upload官方文档 el upload 具体细节只看官方文档 本篇主要介绍避坑点和用法总结 注意点以及坑 本地上传想要回显图片视频 使用on success是没办法再在上传后获取到本地文
  • 20个简洁的 JS 代码片段

    20个简洁的 JS 代码片段 1 单行 If Else 语句 这是许多编程语言的共同特征 你可以使用三元运算符用一行代码编写整个语句 而不是在多行上编写 if else 例如 const age 12 let ageGroup LONG F