1. 带有多个条件的 if 语句

把多个值放在一个数组中,然后调用数组的 includes 方法。

  1. //longhand
  2. if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
  3. //logic
  4. }
  5. //shorthand
  6. if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
  7. //logic
  8. }

2. if 判断值是否存在

  1. // Longhand
  2. if (test1 === true) or if (test1 !== "") or if (test1 !== null)
  3. // Shorthand //检查空字符串、null或者undefined
  4. if (test1)

3. 用于多个条件判断的 && 操作符

  1. //Longhand
  2. if (test1) {
  3. callMethod();
  4. }
  5. //Shorthand
  6. test1 && callMethod();

4.延展操作符简化

  1. //longhand
  2. // 使用concat连接数组
  3. const data = [1, 2, 3];
  4. const test = [4 ,5 , 6].concat(data);
  5. //shorthand
  6. // 连接数组
  7. const data = [1, 2, 3];
  8. const test = [4 ,5 , 6, ...data];
  9. console.log(test); // [ 4, 5, 6, 1, 2, 3]

5.将字符串转成数字

  1. //Longhand
  2. let test1 = parseInt('123');
  3. let test2 = parseFloat('12.3');
  4. //Shorthand
  5. let test1 = +'123';
  6. let test2 = +'12.3';

6. 解构赋值

  1. //longhand
  2. const test1 = this.data.test1;
  3. const test2 = this.data.test2;
  4. const test2 = this.data.test3;
  5. //shorthand
  6. const { test1, test2, test3 } = this.data;

7.条件查找简化

  1. // Longhand
  2. if (type === 'test1') {
  3. test1();
  4. }
  5. else if (type === 'test2') {
  6. test2();
  7. }
  8. else if (type === 'test3') {
  9. test3();
  10. }
  11. else if (type === 'test4') {
  12. test4();
  13. } else {
  14. throw new Error('Invalid value ' + type);
  15. }
  16. // Shorthand
  17. var types = {
  18. test1: test1,
  19. test2: test2,
  20. test3: test3,
  21. test4: test4
  22. };
  23. var func = types[type];
  24. (!func) && throw new Error('Invalid value ' + type); func();

8.indexOf 的按位操作简化

在查找数组的某个值时,我们可以使用 indexOf() 方法。但有一种更好的方法,让我们来看一下这个例子。

  1. //longhand
  2. if(arr.indexOf(item) > -1) { // item found
  3. }
  4. if(arr.indexOf(item) === -1) { // item not found
  5. }
  6. //shorthand
  7. if(~arr.indexOf(item)) { // item found
  8. }
  9. if(!~arr.indexOf(item)) { // item not found
  10. }

//按位 ( ~ ) 运算符将返回 true(-1 除外),反向操作只需要!~。另外,也可以使用 include() 函数。

  1. if (arr.includes(item)) { // 如果找到项目,则为true}

9.Object.entries()

  1. const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
  2. const arr = Object.entries(data);
  3. console.log(arr);
  4. /** Output:
  5. [ [ 'test1', 'abc' ],
  6. [ 'test2', 'cde' ],
  7. [ 'test3', 'efg' ]
  8. ]
  9. **/

附上完整链接:https://mp.weixin.qq.com/s/uZpcgmDBTnO5ljGzJAhL2Q

不可错过的JS代码优化技巧(持续更新)的更多相关文章

  1. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...

  2. PLSQL Developer 11 使用技巧(持续更新)

    PLSQL Developer 11 使用技巧 (持续更新) 目录(?)[-] 首先是我的颜色配置 常用快捷键 提升PLSQL编程效率 按空格自动替换 关闭Window窗口 PLSQL 实用技巧 TI ...

  3. 个人在 laravel 开发中使用到的一些技巧(持续更新)

    1.更高效率地查询:使用批量查询代替 foreach 查询(多次 io 操作转换为一次 io操作) 如果想要查看更详尽的介绍,可以看看这篇文章 什么是 N+1 问题,以及如何解决 Laravel 的 ...

  4. [Tools] Eclipse使用小技巧-持续更新

    [背景] 使用之中发现一些eclipse使用的小技巧,记录下来供以后查阅   Eclipse保存preferences,并导入到其他workspaces The Export wizard can b ...

  5. Vue.js 牛刀小试(持续更新~~~)

    一.前言 这个系列的文章开始于今年9月从上一家公司辞职后,在找工作的过程中,觉得自己应该学习一些新的东西,从前几章的更新日期也可以看出,中间隔了很长的时间,自己也经历了一些事情,既然现在已经稳定了,就 ...

  6. 107个JS常用方法(持续更新中)

    1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...

  7. chrome调试技巧--持续更新

    1.开始调试:右键审查元素 2.按钮功能: 调出控制台: 切换开发环境全屏还是嵌入: 清空当前显示: 将压缩 js 文件格式化缩进规整的文件: 3.常用页面功能: 查看.编辑(双击)HTML: 查看选 ...

  8. markdown常用语法使用笔记+使用技巧(持续更新......)

    参考引用内容: 简书教程 一 基本语法 1. 标题 语法: 在想要设置为标题的文字前面加#来表示,一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字 ...

  9. Vim使用技巧(持续更新)

    好记性不如烂笔头,在这里记录一些Vim使用技巧 vim配置 "拷贝同步到系统剪切板" set clipboard=unnamed "显示行号" set nu & ...

  10. Intellij 常用技巧-持续更新

    1.快速输入 System.out.println(); sout [TAB] 2.删除Module ctrl+alt+shift+s 调出  Project Structure ,也可点击菜单Fil ...

随机推荐

  1. python APScheduler用法

    参考: https://blog.csdn.net/weixin_44799217/article/details/127353134 https://blog.csdn.net/weixin_428 ...

  2. etcd 入门

    服务注册与服务发现 三部分的作用: 注册中心:记录服务和服务地址的映射关系 服务提供者:将服务注册到服务中心 服务发现者:对服务中心的服务进行调用 简单易懂的 raft 算法 Raft算法是一个一致性 ...

  3. CCCC L3-032 关于深度优先搜索和逆序对的题应该不会很难吧这件事 【树状数组】

    https://pintia.cn/problem-sets/994805046380707840/exam/problems/1518582895035215872 题意 给你一棵树,给定树根,要求 ...

  4. 4-发票校验-不可能为条目1000 DIF确立帐户-消息号 M8147

    SPRO-->物料管理-->评估和科目设置-->科目确定-->无向导的科目确定-->配置自动记帐(OBYC)

  5. 查询正在执行的SQL的数据库名和表名

    创建限制0.5个CPU和0.5G内存的MySQL容器 docker run -itd --name mysql --cpu-quota=50000 --memory 512M --rm -p 3306 ...

  6. 解题报告:Codeforces 768B Code For 1

    Codeforces 768B Code For 1 题义 有一个序列,刚开始,只有1个数\(n\),接着按照以下规则变化找到序列中任意一个\(>1\)的数\(p\),将他变为 \(\lfloo ...

  7. k8s_使用k8s部署博客系统-PV PVC(二)

    PV和PVC PV(PersistentVolume)在声明的时候需要指定大小和续写模式:["ReadWriteMany","ReadWriteOnce",&q ...

  8. 微信小程序笔记_02

    在微信小程序中使用Echarts组件 github源码地址:https://github.com/ecomfe/echarts-for-weixin gitcode源码地址:https://gitco ...

  9. bladex 通用日志不入库,日志无法使用

    公司最近要记录操作日志,然后用的是bladex脚手架.想起来刚好有自带的日志管理功能,然后就很happy的将日志功能授权给了管理员. 也就是那几个通用日志.接口日志.错误日志. 结果人傻了,根本不会记 ...

  10. MySQL日常工具的安装

    安装PT工具 #安装依赖 yum -y install perl-DBI perl-DBD-MySQL perl-Time-HiRes perl-IO-Socket-SSL perl-Digest-M ...