2021年你需要了解的13 种JavaScript 代码技巧

凝雪探世界 等级 365 0 0

1. 多表达式多 if 判断

我们可以在数组中存储多个值,并且可以使用数组include方法。

`// 长`
`if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {` `//logic``}`
`// 短`
`if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {` `//logic``}`

2. 简写 if else

如果 if-else 的逻辑比较降低,可以使用下面这种方式镜像简写,当然也可以使用三元运算符来实现。

`// 长`
`let test: boolean;``if (x > 100) {` `test = true;``} else {` `test = false;``}`
`// 短`
`let test = (x > 10) ? true : false;``
// 也可以直接这样`
`let test = x > 10;`

3. 合并变量声明

当我们声明多个同类型的变量时,可以像下面这样简写。

`// 长` 
`let test1;``let test2 = 1;`
`// 短`
`let test1, test2 = 1;`

4. 合并变量赋值

当我们处理多个变量并将不同的值分配给不同的变量时,这种方式非常有用。

`// 长` 
`let test1, test2, test3;``test1 = 1;``test2 = 2;``test3 = 3;`
`// 短`
`let [test1, test2, test3] = [1, 2, 3];`

5. && 运算符

如果仅在变量值为 true 的情况下才调用函数,则可以使用 && 运算符。

`// 长`
`if (test1) {` `callMethod();` `}` 
`// 短`
`test1 && callMethod();`

6. 箭头函数

`// 长`
`function add(a, b) { ``return a + b;` `}`
`// 短`
`const add = (a, b) => a + b;`

7. 短函数调用

可以使用三元运算符来实现这些功能。

`const fun1 = () => console.log('fun1');`
`const fun2 = () => console.log('fun2');`
`// 长`
`let test = 1;``if (test == 1) {` `fun1();``} else{` `fun2();``}`
`// 短`
`(test === 1? fun1:fun2)();`

8. Switch 简记法

我们可以将条件保存在键值对象中,并可以根据条件使用。

`// 长`
`switch (data) {`
 `case 1:` `test1();`
 `break;`
 `case 2:` `test2();`
 `break;` `case 3:` 
 `test();` `break;` 
`// And so on...``}`
`// 短`
`const data = {` 
`1: test1,` 
`2: test2,` 
`3: test``};`
`data[something] && data[something]();`

9. 默认参数值

`// 长`
`function add(test1, test2) {` 
`if (test1 === undefined)` 
`test1 = 1;` 
`if (test2 === undefined)` 
`test2 = 2;` `return test1 + test2;``}`
`// 短`
`const add = (test1 = 1, test2 = 2) => (test1 + test2);`

10. 扩展运算符

`// 长-合并数组`
`const data = [1, 2, 3];`
`const test = [4 ,5 , 6].concat(data);`
`// 短-合并数组`
`const data = [1, 2, 3];`
`const test = [4 ,5 , 6, ...data];`
`// 长-拷贝数组`
`const test1 = [1, 2, 3];``const test2 = test1.slice()`
`// 短-拷贝数组`
`const test1 = [1, 2, 3];``const test2 = [...test1];`

11. 模版字符串

`// 长`
`const welcome = 'Hi ' + test1 + ' ' + test2 + '.'`
`// 短`
``const welcome = `Hi ${test1} ${test2}`;``

12. 简写对象

`let test1 = 'a';` 
`let test2 = 'b';`
`// 长` 
`let obj = {test1: test1, test2: test2};` 
`// 短` 
`let obj = {test1, test2};`

13. 在数组中查找最大值和最小值

`const arr = [1, 2, 3];`
 `Math.max(…arr); 
// 3`
`Math.min(…arr); // 1`
收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
js 数组 转为树形结构
需要转换为树形的数组 var data { "orderById":null, "platformCommissionProportion":1, "name":"添加剂", "pid":13, "id":26
js 时间处理
时间戳转formdate格式 13 || 16 位 javascript function timeStampToFormdate(timestamp) { if (timestamp) { return ' } var date timestamp.toString(
图文并茂讲清楚 JavaScript 内存管理
作为一个 JavaScript 的开发者,大多数情况下你可能不会担心内存管理问题,因为 JavaScript 引擎会帮你处理这些。但是在开发过程中,你或多或少的会遇到一些相关的问题,比如内存泄漏等,只有了解了内存分配的工作机制,你才会知道如何去解决这些问题。 在这篇文章中,我将会向你介绍 内存分配 和 垃圾收集 的机制,以及如何避免一些 常见的内存泄漏 的
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
干净架构最佳实践
干净架构介绍 Bob 大叔在 2012 年的一篇博文 The Clean Architecture(https://blog.cleancoder.com/unclebob/2012/08/13/thecleanarchitecture.html) 中提出了一种适用于复杂业务系统的软件架构方式。在干净架构出现之前,已经有一些其它架构
2021年你需要了解的13 种JavaScript 代码技巧
1\. 多表达式多 if 判断 我们可以在数组中存储多个值,并且可以使用数组include方法。 // 长if (x 'abc' || x 'def' || x 'ghi' || x 'jkl') { //logic}// 短if ('abc', 'def', 'ghi', 'jkl'
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
Node.js 如何处理 ES6 模块
Node.js 如何处理 ES6 模块作者: 日期: 学习 JavaScript 语言,你会发现它有两种格式的模块。一种是 ES6 模块,简称 ESM;另一种是 Node.js 专用的 CommonJS 模块,简称 CJS。这两种模块不兼容。很多人使用 Node.js,只会用require()加载模块,遇到 ES6
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
如何避免JavaScript类型转换
你是否经历过JavaScript中的某些值比较没有得到预期结果的情况?看下面的情况:即使[]0结果为真,if[]条件也没有根据结果执行。有没有想过为什么会这样?本文主要说明这些值比较的工作原理以及影响它们的因素。在深入解释之前,大家要熟悉一个概念:类型转换。 什么是 JavaScript 类型转换?这也称为类型强制。对于不熟悉此概念的人来说,它只是将值从一种
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
一篇文带你了解JDK 13新特性,保姆级教程!!!
JDK 13新特性介绍 1.1 JDK 各版本主要特性回顾 JDK Version 1.019960123 Oak(橡树) 初代版本,伟大的一个里程碑,但是是纯解释运行,使用外挂JIT,性能比较差,运行速度慢。 JDK Version 1.119970219 JDBC(Java DataBase Connectivity); 支持内部类; R