JS 4个超级实用的小技巧 提升开发效率


Posted in Javascript onOctober 05, 2021

1、短路判断

当只需要简单的if条件时,可使用此方法

let x = 0;
let foo = () => console.log('执行了');

if(x === 0){
  foo()
}

通过使用&&运算符来实现同样的if功能,如果&&之前的条件为false,则&&之后的代码将不会执行。

let x = 0;
let foo = () => console.log('执行了');

x === 0 && foo()

还可增加更多的if条件,不过这也会增加语句的复杂性,不建议超过2个以上条件。

let x = 0;
let y = 0;
let foo = () => console.log('执行了');

x === 0 && y === 0 && foo()

2、可选链操作符 ( ? )

我们经常会判断JS对象中是否存在某个key,因为有时不确定后台API返回的数据是否是正确的。

user对象中包含一个属性name的对象,name对象有一个属性firstName,使用user.name.firstName直接进行判断的话,如果name属性不存在的话就会报错,所以在判断之前还需要判断user.name是否存在,需要嵌套两层if判断。

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name){
  if(user.name.firstName){
    console.log('user对象 包含 firstName 字段')
  }
}

这时我们可以使用?操作符进行简化操作,如果user.name不存在,也将返回false,所以直接使用一层判断

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name?.firstName){
  console.log('user对象 包含 firstName 字段')
}

3、空值合并操作符 ( ?? )

与if/else相比来说,三元运算符更加简短。如果逻辑简单,使用起来很方便。

例如:

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ? 
    user.name.firstName : 
    'firstName 不存在'
}

console.log(foo())

首先使用?运算符来判读是否存在,存在即返回,不存在则返回false,进入后面的逻辑

使用??运算法使代码更加精简

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ?? 
  'firstName 不存在'
}
  
console.log(foo())

4、return终止函数

下面函数判断x的值,使用大量if else嵌套

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小于 1'
  } else {
    if(x > 1){
      return 'x 大于 1'
    }else{
      return 'x 等于 1'
    }
  }
}

console.log(foo())

这种if else嵌套可以删除else条件来简化代码,因为return语句将终止代码执行并返回函数。

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小于 1'
  }
  if(x > 1){
    return 'x 大于 '
  }
  return 'x 等于 1'
}

console.log(foo())

到此这篇关于JS 4个超级实用的小技巧 提升开发效率的文章就介绍到这了,更多相关4个实用JS小技巧 提升开发效率内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery中.add()的使用分析
Apr 26 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 #Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP7内核之Reference详解
2019/03/14 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python Trie树实现字典排序
2014/03/28 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python中if及if-else如何使用
2020/06/02 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
毕业自我评价范文
2013/11/17 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
财产公证书格式
2014/04/10 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
2014年校长工作总结
2014/12/11 职场文书
企业介绍信范文
2015/01/30 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS