JavaScript技巧总结

1. 简化条件表达式

经常碰到这种情况,要判断某个变量是否为指定的某些值,用常规的逻辑表达式会很长。我的做法是把这些值放进数组里:

// 太长的逻辑表达式
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {//其他逻辑
}
// 简写
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {//其他逻辑
}

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;
console.log(test);

三元表达式可以做复杂的条件分支判断,不过牺牲了一些可读性:

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

3. 判空并赋默认值

Code Review 的时候我经常看到这样的代码,判断变量不是nullundefined''的时候赋值给第二个变量,否则给个默认值:

if (first !== null || first !== undefined || first !== '') {let second = first;
}
// 简写
let second = first || '';

4. 简写循环遍历

for 循环是最基本的,但是有点繁琐。可以用for...infor...of或者forEach代替:

// Longhand
for (var i = 0; i < testData.length; i++)// Shorthand
for (let i in testData) or  for (let i of testData)

数组遍历:

function testData(element, index, array) {console.log('test[' + index + '] = ' + element);
}[11, 24, 32].forEach(testData);
// 打印输出: test[0] = 11, test[1] = 24, test[2] = 32

4. 简化 switch

这个技巧也很常用,把switch  转换成对象的key-value形式,代码简洁多了:

// Longhand
switch (data) {case 1:test1();break;case 2:test2();break;case 3:test();break;// And so on...
}// Shorthand
var data = {1: test1,2: test2,3: test
};data[anything] && data[anything]();

5. 简化多行字符串拼接

如果一个字符串表达式过长,我们可能会拆成多行拼接的方式。不过随着 ES6 的普及,更好的做法是用模板字符串:

//longhand
const data = 'abc abc abc abc abc abc\n\t'+ 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abctest test,test test test test`

6. 善用箭头函数简化 return

ES6 的箭头函数真是个好东西,当函数简单到只需要返回一个表达式时,用箭头函数最合适不过了,return都不用写:

Longhand:
//longhand
function getArea(diameter) {return Math.PI * diameter
}
//shorthand
getArea = diameter => (Math.PI * diameter;
)

7. 简化分支条件语句

又是你,if...else if...else!跟switch类似,也可以用key-value形式简化:

// Longhand
if (type === 'test1') {test1();
}
else if (type === 'test2') {test2();
}
else if (type === 'test3') {test3();
}
else if (type === 'test4') {test4();
} else {throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {test1: test1,test2: test2,test3: test3,test4: test4
};var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

8. 重复字符串 N 次

有时候出于某种目的需要将字符串重复 N 次,最笨的方法就是用for循环拼接。其实更简单的方法是用repeat

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);

9. 指数运算

能省则省,低碳环保。

//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8

10. 数字分隔符

这是比较新的语法,ES2021 提出来的,数字字面量可以用下划线分割,提高了大数字的可读性:

// 旧语法
let number = 98234567// 新语法
let number = 98_234_567

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/89188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2001-2021年上市公司基于Jones 修正模型的盈余管理测度(含原始数据+stata 计算代码)

2001-2021年上市公司基于Jones 修正模型的盈余管理测度&#xff08;含原始数据stata 计算代码&#xff09; 1、时间&#xff1a;2001-2021 年 3、范围&#xff1a;沪深 A 股上市公司 4、指标&#xff1a;经营活动现金流、总资产、净利润、总收入、固定资产、应收账款、盈余管…

如何快速做跨业务测试?

当业务任务多且人力资源不充足的情况下&#xff0c;不同业务的同学可能需要去不同的业务进行临时支援&#xff0c;可能在时间方面有长有短&#xff0c;但是如何迈出第一步是很多人需要关心的一件事。 本文以实际跨业务测试经验&#xff08;订单业务测试人员如何测试售后业务&a…

什么是HTTP/2?它与HTTP/1.1相比有什么改进?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ HTTP/2 简介⭐ 主要的改进和特点⭐ 总结⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端…

javascript阻止右键默认行为,重新添加右键新菜单

EventUtil.addHandler(window,"load",function(event){var divdocument.getElementById("mydiv");//禁止右键默认行为EventUtil.addHandler(div,"contextmenu",function(event){var eventEventUtil.getEvent(event);EventUtil.preventDefault(ev…

梦想让生活得以忍受-寄语机器视觉工程师

我&#xff0c;曾梦想梦想走天涯&#xff0c;看看这世界的繁华&#xff0c;年少的心总有些轻狂&#xff0c;如今四海为家。 大家都听过这首歌&#xff0c;迎来很多打工人的共鸣&#xff0c;著名作家海明威曾说&#xff0c;“一个人可以被打败&#xff0c;但不可以被毁灭”&…

Web自动化测试 —— 如何进行Selenium页面数据及元素交互?啊哈

前言&#xff1a; Web自动化测试是一种常用的测试方式&#xff0c;通过在浏览器中模拟用户操作以及与页面元素的交互&#xff0c;可以有效地检验页面的功能性以及稳定性。Selenium是一款流行的Web自动化测试工具&#xff0c;在本篇文章中&#xff0c;我们将介绍如何使用Seleni…

Echarts 自适应不生效解决(CPK分析工具直方图为例)

示例代码为左上方的CPK分析直方图组件 <template><div ref="cpk" id="cpk" style="height: 300px; width: 100%"></div> </template><script> import * as echarts from "echarts"; import { deboun…

嵌入式工程师面试题

嵌入式工程师常见面试题目: 解释一下嵌入式系统中的中断和轮询的工作原理,并比较它们的优缺点。在嵌入式系统中,如何进行低功耗设计和优化?什么是嵌入式系统的实时性?你如何确保系统的实时性?描述一下嵌入式系统中的信号量、互斥锁和条件变量的作用和用法。在嵌入式系统中…

面试题库(十一):MQ和分布式事务

MQ mq 通知时,消费者没消费到怎么办简单聊聊消息中间件?你了解那些具体的消息中间件产品?mq的消费端是怎么处理的? 整理一下你的消费端的整个处理逻辑流程,然后说说你的ack是在哪里返回的。按照你这样画的话,如果数据库突然宕机,你的消息该怎么确认已经接收? 那如果发送…

Qt 编译纯c的C99的项目, error: undefined reference to `f()‘

把Cpp的后缀该为C是什么样的 尝试引用一个奇门排盘的c程序&#xff0c;在git上找到的叫cqm&#xff0c; 然后总是报错 error: undefined reference to f() 很是郁闷 于是新建了个项目试验一下&#xff0c;终于摸清了需要命名空间。 后来这么写就可以了 a.h namespace XX …

算法 比较版本号-(同向双指针)

牛客网: BM22 题目: 字符串以.连接&#xff0c;从左到右编号&#xff0c;比较版本号大小 思路: 按.切割为字符串数组&#xff0c;双指针p1, p2均初始化为坐标0, 将p1与 p2指向部分转为数字进行比较&#xff0c;如果为空则默认为0不从数组中取字符串&#xff0c;直到p1与p2都达…

二进制文件和文本文件

二进制文件是在计算机中以二进制格式存储的文件&#xff0c;它包含了一组按照特定格式组织的二进制数据。与之相对的是文本文件&#xff0c;文本文件使用**字符编码&#xff08;ASCII&#xff09;**来表示数据。 以下是一些常见的二进制文件的示例&#xff1a; 图像文件&#…

SpringMVC 学习(五)转发,重定向和传参

6. 转发和重定向 Spring MVC 的底层是 servlet&#xff0c;因此在 Spring MVC 中也存在转发和重定向的概念。 对于转发而言&#xff0c;其目的页面可以在 WEB-INF 目录下。重定向的目的页面不允许在 WEB-INF 目录下&#xff0c;因为重定向相当于用户再次发起一次请求&#xf…

HarmonyOS开发:解决DevEco Studio低版本导入高版本项目运行失败问题

前言 基于DevEco Studio 4.0 Beta2&#xff0c;hvigorVersion为3.0.2&#xff0c;开发了一个项目&#xff0c;上传到了远程仓库&#xff0c;当同事下载后&#xff0c;却始终无法运行&#xff0c;频繁报错&#xff0c;由于API都是使用的9&#xff0c;第一感觉就是开发环境不同&a…

Qt: 鼠标形状设置

设置全局鼠标形状 设置完毕后&#xff0c;整个APP的任何窗体&#xff0c;包括Dialog中的鼠标形状都会被修改为设定类型&#xff0c;某一个控件设定的鼠标形状将被替换。一般不建议使用 QCursor cursor;//创建鼠标对象 cursor.setShape(Qt::CursorShape::ClosedHandCursor);//…

9.25 校招 实习 内推 面经

绿泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 达闼机器人2024届校园招聘正式启动 校招 | 达闼机器人2024届校园招聘正式启动 2、2023校招总结--自动驾驶规控算法 - 10 2023校招总结--自动驾驶规控算法 - 10 3、校招 | 腾讯北极…

创建线程的4种方法

目录 一.前言 1.关于进程调度 (1)为什么要调度? (2)调度的真正对象 (3)调度的资源 2.线程 (1).线程的写法 (2)线程创建的方法 1.继承Thread (1)使用继承Thread,重写run的方式来创建线程 (2)继承Thread,使用匿名内部类 2.实现Runnable (1)使用实现Runnable,重写run…

算法 数组中的逆序对-(归并排序+递归回溯+双指针)

牛客网: BM20 题目: 求出数组中逆序对总数 思路: 使用归并排序思路&#xff0c;先分裂&#xff0c;再合并&#xff0c;合并的时候&#xff0c;左半段有序&#xff0c;右半段有序&#xff0c;如果左半段某个值大于右半段某个值 data[i] > data[j]&#xff0c; 则可通过j与右…

搭建本地git服务器及详细操作步骤

1.搭建本地git服务器 1.1环境 服务器&#xff1a;Ubuntu18.04 客户端&#xff1a;windows10_x64、Ubuntu20.04 无论是服务端还是客户端都需要先安装git Ubuntu安装方法&#xff1a; sudo apt update sudo apt install gitwindows安装方法&#xff1a; https://blog.csdn…

Android系统之编译Intel5.1问题解决

1.jdk问题: ************************************************************ You are attempting to build with the incorrect version of java.Your version is: openjdk version "1.7.0_75" OpenJDK Runtime Environment (build 1.7.0_75-b13) OpenJDK 64-Bit Se…