JS-条件语句5准则
准则:
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准则的更多相关文章
- 优化 JS 条件语句的 5 个技巧
优化 JS 条件语句的 5 个技巧 原创: 前端大全 前端大全 昨天 (给前端大全加星标,提升前端技能) 编译:伯乐在线/Mr.Dcheng http://blog.jobbole.com/11467 ...
- JS条件语句优化
1.对多个条件使用Array.includes eg: function test(fruit){ ...
- 优化 JS 条件语句及JS 数组常用方法, ---- 看完绝对对日后开发有用
前言: 日常所说的优化优化.最后我们到底优化了哪些,不如让我们从代码质量开始:个人觉得简洁简化代码其实觉得存在感挺强烈的QAQ 1. 获取URL中 ?后的携带参数: 这是我见过最简洁的了,若有更简洁的 ...
- js条件语句,用if...else if....else方程ax2+bx+c=0一元二次方程。求根
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if...else if... ...
- JAVAscript学习笔记 js条件语句 第三节 (原创) 参考js使用表 (2017-09-14 15:55)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js条件语句初步练习
var a=18 if(a<10){ alert("便宜") } else{ ...
- js条件语句之职责链数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中的条件语句
//js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...
- js中的运算符和条件语句
js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...
- JS一周游~(基础、运算符、条件语句)
一.基础篇 JavaScript 基于浏览器(客户端).基于(面向)对象{没有继承}.事件驱动(要有对象).脚本语言(灵活多变) 1.作用 表单的验证,减轻服务端的压力 添加页面动画效果 动态更改页面 ...
随机推荐
- ubuntu查看系统负载和程序运行状况
1,没有图形化界面 纯文字:top 美化的文字界面:htop 2,图形界面查看系统状态: gnome-system-monitor(或者在搜索界面中搜索system monitor) 3,jetson ...
- css实现移动端滚动条隐藏仍然可以滚动内容
.g-panel { height: calc(100% - 112px); overflow: auto; &::-webkit-scrollbar { display: none; // ...
- LOJ138 类欧几里得算法
类欧几里得算法 给出 \(T\) 组询问,每组用 \(n, a, b, c, k_1, k_2\) 来描述.对于每组询问,请你求出 \[ \sum_{x = 0} ^ {n} x ^ {k_1} {\ ...
- php设计模式之工厂方法实例代码
实现不修改原代码,扩展新功能 <?php header("Content-type:text/html;charset=utf-8"); /** * db接口 * 实现连接数 ...
- 配置yum仓库:yum install 软件
1.一个重要模板: 进入/etc/yum.repos.d文件夹,新建一个xiaoxu.repo文件,其中xiaoxu可以根据需要来取名. [模板] vim xiaoxu.repo [rhel] ...
- 理解javaBean
1:什么是JavaBean 组件?使用JavaBean 组件有什么优点?答案:现在软件开发都已经转向了基于组件的开发,目前具备代表性的组件技术有微软的COM.COM+,有Sun 的JavaBean 和 ...
- java 中使用logback日志,并实现日志按天分类压缩保存。
以maven项目作为构建工具为例,首先引入使用logback需要的3个依赖,需要注意使用logback是需要引入slf4j-api的,因为logback是基于slf4j的 <!--logback ...
- JS高级---为内置对象添加原型方法
为内置对象添加原型方法 我们能否为系统的对象的原型中添加方法, 相当于在改变源码 我希望字符串中有一个倒序字符串的方法 //我希望字符串中有一个倒序字符串的方法 String.prototype. ...
- 安装ipython[win/linux]
首先以win7 64位系统, python2.7.9为例,linux见底部 1.下载材料http://files.cnblogs.com/files/smileyes/ipython-win64.z ...
- 浏览器渲染页面原理,reflow、repaint及其优化
浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - ...