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 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
学习vue.js条件渲染
Dec 03 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python实现移动木板小游戏
2020/10/09 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
学生违反校规检讨书
2014/10/28 职场文书
转让协议书
2015/01/27 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
数据库连接池
2021/04/06 MySQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记