准则:

1.多重判断时使用 Array.includes

2.更少的嵌套,尽早 return

3.使用默认参数和解构

4.倾向于遍历对象而不是 Switch 语句

5.对 所有/部分 判断使用 Array.every & Array.some

1.多重判断时使用 Array.includes

例子:查询水果是什么

function test(value) {

  if (value== '苹果' || value== '香蕉') {
console.log('输入的是水果'+value);
}
}

当有很多时怎么办呢?,使用Array.includes (Array.includes)重写条件语句

function test(value) {

  const datas = ['苹果','香蕉','火龙果',芒果,];

  if (datas.includes(value)){

    console.log('输入的是水果'+value);

  }

}

2.更少的嵌套,尽早 Return

例子:判断值为空抛出错误为真继续进行

function test(value) {
 
const datas = ['苹果','香蕉','火龙果',芒果,];
  
if (value) {
       if (datas.includes(value)){
        console.log('输入的是水果'+value);
      }
    }else{
      console.log("输入内容有误,不是我这的水果");
return false
    } }

改进方法:去掉一层嵌套 判断为假先return

function test(value) {
if (!value) {
console.log("输入内容有误,不是我这的水果");
return false
}   const datas = ['苹果','香蕉','火龙果',芒果,];
  
if (datas.includes(value)){      console.log('输入的是水果'+value);    } }

3.使用默认参数和解构

JavaScript中我们总是需要检查 null / undefined的值和指定默认值

function test(fruit, quantity) {
if (!fruit) return;
// 如果 quantity 参数没有传入,设置默认值为 1
const q = quantity || 1; console.log(`We have ${q} ${fruit}!`);
} //test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

改进为更直观的形式:

function test(fruit, quantity = 1) {
// 如果 quantity 参数没有传入,设置默认值为 1
if (!fruit) return;
console.log(`We have ${quantity} ${fruit}!`);
} //test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

JS-条件语句5准则的更多相关文章

  1. 优化 JS 条件语句的 5 个技巧

    优化 JS 条件语句的 5 个技巧 原创: 前端大全 前端大全 昨天 (给前端大全加星标,提升前端技能) 编译:伯乐在线/Mr.Dcheng http://blog.jobbole.com/11467 ...

  2. JS条件语句优化

    1.对多个条件使用Array.includes eg: function test(fruit){                                                    ...

  3. 优化 JS 条件语句及JS 数组常用方法, ---- 看完绝对对日后开发有用

    前言: 日常所说的优化优化.最后我们到底优化了哪些,不如让我们从代码质量开始:个人觉得简洁简化代码其实觉得存在感挺强烈的QAQ 1. 获取URL中 ?后的携带参数: 这是我见过最简洁的了,若有更简洁的 ...

  4. js条件语句,用if...else if....else方程ax2+bx+c=0一元二次方程。求根

    if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if...else if... ...

  5. JAVAscript学习笔记 js条件语句 第三节 (原创) 参考js使用表 (2017-09-14 15:55)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js条件语句初步练习

    var a=18            if(a<10){                alert("便宜")            }            else{  ...

  7. js条件语句之职责链数组

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js中的条件语句

    //js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...

  9. js中的运算符和条件语句

    js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...

  10. JS一周游~(基础、运算符、条件语句)

    一.基础篇 JavaScript 基于浏览器(客户端).基于(面向)对象{没有继承}.事件驱动(要有对象).脚本语言(灵活多变) 1.作用 表单的验证,减轻服务端的压力 添加页面动画效果 动态更改页面 ...

随机推荐

  1. ubuntu查看系统负载和程序运行状况

    1,没有图形化界面 纯文字:top 美化的文字界面:htop 2,图形界面查看系统状态: gnome-system-monitor(或者在搜索界面中搜索system monitor) 3,jetson ...

  2. css实现移动端滚动条隐藏仍然可以滚动内容

    .g-panel { height: calc(100% - 112px); overflow: auto; &::-webkit-scrollbar { display: none; // ...

  3. LOJ138 类欧几里得算法

    类欧几里得算法 给出 \(T\) 组询问,每组用 \(n, a, b, c, k_1, k_2\) 来描述.对于每组询问,请你求出 \[ \sum_{x = 0} ^ {n} x ^ {k_1} {\ ...

  4. php设计模式之工厂方法实例代码

    实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...

  5. 配置yum仓库:yum install 软件

    1.一个重要模板: 进入/etc/yum.repos.d文件夹,新建一个xiaoxu.repo文件,其中xiaoxu可以根据需要来取名. [模板] vim  xiaoxu.repo [rhel]    ...

  6. 理解javaBean

    1:什么是JavaBean 组件?使用JavaBean 组件有什么优点?答案:现在软件开发都已经转向了基于组件的开发,目前具备代表性的组件技术有微软的COM.COM+,有Sun 的JavaBean 和 ...

  7. java 中使用logback日志,并实现日志按天分类压缩保存。

    以maven项目作为构建工具为例,首先引入使用logback需要的3个依赖,需要注意使用logback是需要引入slf4j-api的,因为logback是基于slf4j的 <!--logback ...

  8. JS高级---为内置对象添加原型方法

    为内置对象添加原型方法 我们能否为系统的对象的原型中添加方法, 相当于在改变源码   我希望字符串中有一个倒序字符串的方法 //我希望字符串中有一个倒序字符串的方法 String.prototype. ...

  9. 安装ipython[win/linux]

    首先以win7  64位系统, python2.7.9为例,linux见底部 1.下载材料http://files.cnblogs.com/files/smileyes/ipython-win64.z ...

  10. 浏览器渲染页面原理,reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...