不可错过的JS代码优化技巧(持续更新)
1. 带有多个条件的 if 语句
把多个值放在一个数组中,然后调用数组的 includes 方法。
- //longhand
- if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
- //logic
- }
- //shorthand
- if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
- //logic
- }
2. if 判断值是否存在
- // Longhand
- if (test1 === true) or if (test1 !== "") or if (test1 !== null)
- // Shorthand //检查空字符串、null或者undefined
- if (test1)
3. 用于多个条件判断的 && 操作符
- //Longhand
- if (test1) {
- callMethod();
- }
- //Shorthand
- test1 && callMethod();
4.延展操作符简化
- //longhand
- // 使用concat连接数组
- const data = [1, 2, 3];
- const test = [4 ,5 , 6].concat(data);
- //shorthand
- // 连接数组
- const data = [1, 2, 3];
- const test = [4 ,5 , 6, ...data];
- console.log(test); // [ 4, 5, 6, 1, 2, 3]
5.将字符串转成数字
- //Longhand
- let test1 = parseInt('123');
- let test2 = parseFloat('12.3');
- //Shorthand
- let test1 = +'123';
- let test2 = +'12.3';
6. 解构赋值
- //longhand
- const test1 = this.data.test1;
- const test2 = this.data.test2;
- const test2 = this.data.test3;
- //shorthand
- const { test1, test2, test3 } = this.data;
7.条件查找简化
- // 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.indexOf 的按位操作简化
在查找数组的某个值时,我们可以使用 indexOf() 方法。但有一种更好的方法,让我们来看一下这个例子。
- //longhand
- if(arr.indexOf(item) > -1) { // item found
- }
- if(arr.indexOf(item) === -1) { // item not found
- }
- //shorthand
- if(~arr.indexOf(item)) { // item found
- }
- if(!~arr.indexOf(item)) { // item not found
- }
//按位 ( ~ ) 运算符将返回 true(-1 除外),反向操作只需要!~。另外,也可以使用 include() 函数。
if (arr.includes(item)) {
// 如果找到项目,则为true
}
9.Object.entries()
- const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
- const arr = Object.entries(data);
- console.log(arr);
- /** Output:
- [ [ 'test1', 'abc' ],
- [ 'test2', 'cde' ],
- [ 'test3', 'efg' ]
- ]
- **/
附上完整链接:https://mp.weixin.qq.com/s/uZpcgmDBTnO5ljGzJAhL2Q
不可错过的JS代码优化技巧(持续更新)的更多相关文章
- fastadmin 后台管理框架使用技巧(持续更新中)
fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...
- PLSQL Developer 11 使用技巧(持续更新)
PLSQL Developer 11 使用技巧 (持续更新) 目录(?)[-] 首先是我的颜色配置 常用快捷键 提升PLSQL编程效率 按空格自动替换 关闭Window窗口 PLSQL 实用技巧 TI ...
- 个人在 laravel 开发中使用到的一些技巧(持续更新)
1.更高效率地查询:使用批量查询代替 foreach 查询(多次 io 操作转换为一次 io操作) 如果想要查看更详尽的介绍,可以看看这篇文章 什么是 N+1 问题,以及如何解决 Laravel 的 ...
- [Tools] Eclipse使用小技巧-持续更新
[背景] 使用之中发现一些eclipse使用的小技巧,记录下来供以后查阅 Eclipse保存preferences,并导入到其他workspaces The Export wizard can b ...
- Vue.js 牛刀小试(持续更新~~~)
一.前言 这个系列的文章开始于今年9月从上一家公司辞职后,在找工作的过程中,觉得自己应该学习一些新的东西,从前几章的更新日期也可以看出,中间隔了很长的时间,自己也经历了一些事情,既然现在已经稳定了,就 ...
- 107个JS常用方法(持续更新中)
1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...
- chrome调试技巧--持续更新
1.开始调试:右键审查元素 2.按钮功能: 调出控制台: 切换开发环境全屏还是嵌入: 清空当前显示: 将压缩 js 文件格式化缩进规整的文件: 3.常用页面功能: 查看.编辑(双击)HTML: 查看选 ...
- markdown常用语法使用笔记+使用技巧(持续更新......)
参考引用内容: 简书教程 一 基本语法 1. 标题 语法: 在想要设置为标题的文字前面加#来表示,一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字 ...
- Vim使用技巧(持续更新)
好记性不如烂笔头,在这里记录一些Vim使用技巧 vim配置 "拷贝同步到系统剪切板" set clipboard=unnamed "显示行号" set nu & ...
- Intellij 常用技巧-持续更新
1.快速输入 System.out.println(); sout [TAB] 2.删除Module ctrl+alt+shift+s 调出 Project Structure ,也可点击菜单Fil ...
随机推荐
- python APScheduler用法
参考: https://blog.csdn.net/weixin_44799217/article/details/127353134 https://blog.csdn.net/weixin_428 ...
- etcd 入门
服务注册与服务发现 三部分的作用: 注册中心:记录服务和服务地址的映射关系 服务提供者:将服务注册到服务中心 服务发现者:对服务中心的服务进行调用 简单易懂的 raft 算法 Raft算法是一个一致性 ...
- CCCC L3-032 关于深度优先搜索和逆序对的题应该不会很难吧这件事 【树状数组】
https://pintia.cn/problem-sets/994805046380707840/exam/problems/1518582895035215872 题意 给你一棵树,给定树根,要求 ...
- 4-发票校验-不可能为条目1000 DIF确立帐户-消息号 M8147
SPRO-->物料管理-->评估和科目设置-->科目确定-->无向导的科目确定-->配置自动记帐(OBYC)
- 查询正在执行的SQL的数据库名和表名
创建限制0.5个CPU和0.5G内存的MySQL容器 docker run -itd --name mysql --cpu-quota=50000 --memory 512M --rm -p 3306 ...
- 解题报告:Codeforces 768B Code For 1
Codeforces 768B Code For 1 题义 有一个序列,刚开始,只有1个数\(n\),接着按照以下规则变化找到序列中任意一个\(>1\)的数\(p\),将他变为 \(\lfloo ...
- k8s_使用k8s部署博客系统-PV PVC(二)
PV和PVC PV(PersistentVolume)在声明的时候需要指定大小和续写模式:["ReadWriteMany","ReadWriteOnce",&q ...
- 微信小程序笔记_02
在微信小程序中使用Echarts组件 github源码地址:https://github.com/ecomfe/echarts-for-weixin gitcode源码地址:https://gitco ...
- bladex 通用日志不入库,日志无法使用
公司最近要记录操作日志,然后用的是bladex脚手架.想起来刚好有自带的日志管理功能,然后就很happy的将日志功能授权给了管理员. 也就是那几个通用日志.接口日志.错误日志. 结果人傻了,根本不会记 ...
- MySQL日常工具的安装
安装PT工具 #安装依赖 yum -y install perl-DBI perl-DBD-MySQL perl-Time-HiRes perl-IO-Socket-SSL perl-Digest-M ...