20个JS精简代码无形装逼集合,最为致命,记得收藏好

简介: 20个JS精简代码无形装逼集合,最为致命,记得收藏好

1、单行 If-Else 语句


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

例如


const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) {  
ageGroup = "An adult";
} else {  
ageGroup = "A child";
}
// SHORTHANDageGroup = 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)、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("Nothingfound")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")



4、防止崩溃的可选链


如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。

在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。例如:


graph TD;
A-->B;
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
B-->C;


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


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


let x = 1;
let y = 2;
// LONGER FORM
let temp = x;
x = y;
y = temp;
// SHORTHAND
[x, y] = [y, x];


6、将任何值转换为布尔值


在 JavaScript 中,你可以使用 !! 在 JS 中将任何内容转换为布尔值。

例如,这里有一些例子:


!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true
!!false   // false
!!0       // false
!!""      // false



7、扩展运算符


使用扩展运算符组合两个数组…:


const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);
// SHORTHAND
newArray = [...nums1, ...nums2];


也可以使用此语法代替将值推送到数组:

在这里插入代let numbers = [1, 2, 3];
// LONGER FORM
numbers.push(4);
numbers.push(5);
// SHORTHAND
numbers = [...numbers, 4, 5];


8、传播解构


使用扩展运算符将剩余元素分配给变量:


const student = {
  name: "Matt",  age: 23,  city: "Helsinki",  state: "Finland",};
  // LONGER FORMconst
   name = student.name;
   const age = student.age;
   const address = { city: student.city, state: student.state };
   // SHORTHAND
   const { name, age, ...address } = student;


相关文章
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
116 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
30天前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
141 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
80 3
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
770 4
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
178 6
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
410 1
|
3月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62