写出更好的 JavaScript 条件语句
1. 使用 Array.includes 来处理多重条件
// 条件语句
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
}
function test(fruit) {
// 把条件提取到数组中
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (redFruits.includes(fruit)) {
console.log('red');
}
}
2. 少写嵌套,尽早返回
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; // 条件 1:fruit 必须有值
if (fruit) {
// 条件 2:必须为红色
if (redFruits.includes(fruit)) {
console.log('red'); // 条件 3:必须是大量存在
if (quantity > 10) {
console.log('big quantity');
}
}
} else {
throw new Error('No fruit!');
}
} // 测试结果
test(null); // 报错:No fruits
test('apple'); // 打印:red
test('apple', 20); // 打印:red,big quantity
/_ 当发现无效条件时尽早返回 _/ function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (!fruit) throw new Error('No fruit!'); // 条件 1:尽早抛出错误
if (!redFruits.includes(fruit)) return; // 条件 2:当 fruit 不是红色的时候,直接返回 console.log('red'); // 条件 3:必须是大量存在
if (quantity > 10) {
console.log('big quantity');
}
}
3. 相较于 switch,Map / Object 也许是更好的选择
function test(color) {
// 使用 switch case 来找到对应颜色的水果
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
} //测试结果
test(null); // []
test('yellow'); // ['banana', 'pineapple']
// 使用对象字面量来找到对应颜色的水果
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
}; function test(color) {
return fruitColor[color] || [];
}
或者,你也可以使用 Map 来实现同样的效果: // 使用 Map 来找到对应颜色的水果
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']); function test(color) {
return fruitColor.get(color) || [];
}
map()
方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }
]; function test(color) {
// 使用 Array filter 来找到对应颜色的水果 return fruits.filter(f => f.color == color);
}
4. 使用 Array.every 和 Array.some 来处理全部/部分满足条件
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]; function test() {
let isAllRed = true; // 条件:所有的水果都必须是红色
for (let f of fruits) {
if (!isAllRed) break;
isAllRed = (f.color == 'red');
} console.log(isAllRed); // false
}
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]; function test() {
// 条件:(简短形式)所有的水果都必须是红色
const isAllRed = fruits.every(f => f.color == 'red'); console.log(isAllRed); // false
}
清晰多了对吧?类似的,如果我们想要检查是否有至少一个水果是红色的,我们可以使用 Array.some 仅用一行代码就实现出来。
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]; function test() {
// 条件:至少一个水果是红色的
const isAnyRed = fruits.some(f => f.color == 'red'); console.log(isAnyRed); // true
}
本文参考掘金大佬Hopsken!
map()
方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
写出更好的 JavaScript 条件语句的更多相关文章
- 在用 JavaScript 工作时,我们经常和条件语句打交道,这里有5条让你写出更好/干净的条件语句的建议。
1.多重判断时使用 Array.includes 2.更少的嵌套,尽早 return 3.使用默认参数和解构 4.倾向于遍历对象而不是 Switch 语句 5.对 所有/部分 判断使用 Array.e ...
- [label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码
7 steps to better JavaScript 原文链接: http://www.creativebloq.com/netmag/7-steps-better-javascript-5141 ...
- 【译】写好JavaScript条件语句的5个技巧
译文 当我们写JavaScript代码时,经常会用到到条件判断处理,这里有5个技巧能使你写出更好.更简洁的条件语句. 1.使用Array.includes处理多种条件 让我们来看一下的例子: // c ...
- 使用Groovy+Spock轻松写出更简洁的单测
当无法避免做一件事时,那就让它变得更简单. 概述 单测是规范的软件开发流程中的必不可少的环节之一.再伟大的程序员也难以避免自己不犯错,不写出有BUG的程序.单测就是用来检测BUG的.Java阵营中,J ...
- JavaScript条件语句4--分支语句--if
JavaScript条件语句--分支语句 学习目标 1.掌握条件语句if 2.掌握prompt()的应用 3.掌握alert的应用 If语句 语法一: If(condition){ statement ...
- JavaScript条件语句-5--if语句的嵌套
JavaScript条件语句 学习目标 1.掌握length属性的应用 2.掌握if语句的嵌套 length 语法:string.length 功能:获取string字符串的长度 返回值:number ...
- 如何在 ASP.NET Core 中写出更干净的 Controller
你可以遵循一些最佳实践来写出更干净的 Controller,一般我们称这种方法写出来的 Controller 为瘦Controller,瘦 Controller 的好处在于拥有更少的代码,更加单一的职 ...
- JavaScript -- 条件语句和循环语句
if语句 在我们开发程序的时候,经常会遇到选择题,例如,年龄大于18,你就可以抽烟喝酒烫头,年龄小于18,你就只能吃饭喝水.在我们的代码中,我们可以用if语句来实现这种判断 语法一: if( cond ...
- JavaScript 条件语句
if语句 有些代码块只能在一定条件下运行,通过if.if else.else代码块,可以让你的代码按条件执行. // 控制流 var foo = true; var bar = false; ...
随机推荐
- css3--伪元素和伪类
1,定义 W3C定义:伪元素伪类 都可以向某些选择器设置特殊效果.(css2中定义) css3中的定义: 1).伪元素:在DOM树中创建了一些抽象元素(虚拟的容器).由两个冒号::开头(css2中并没 ...
- cocos2dx 用命令行进行编译的指令
cocos compile -p android -m release -s F:\cocosproj\antest --ap android-20 上面那条就是我常用的指令,这指令修改一下就成了你的 ...
- Uva12657 Boxes in a Line
题目链接:传送门 分析:每次操作都会花费大量时间,显然我们只需要关注每个元素的左边是啥,右边是啥就够了,那么用双向链表,l[i]表示i左边的数,r[i]表示i右边的数,每次操作模拟一下数组的变化就好了 ...
- 一位ACMer过来人的心得
http://blog.csdn.net/acm_cxlove/article/details/8079348
- linux命令与技巧
1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i
- 20180710使用gh
转自:http://www.ywnds.com/?p=14265 一.背景 GitHub正式宣布以开源的方式发布gh-ost:GitHub的MySQL无触发器在线更改表定义工具!下面是官方给出gh-o ...
- SiteMesh2-decorators.xml文件
SiteMesh默认使用decorators.xml作为装饰配置文件. decorators.xml顶层元素概览如下: <decorators> <decorator/> &l ...
- Android: 长按及松开处理
长按及松开处理 // 长按触发handle final Handler handler = new Handler(); final Runnable mLongPressed = new Runna ...
- velt-0.1.7开发: KernelConfig的问题
快乐虾 http://blog.csdn.net/lights_joy/(QQ群:Visual EmbedLinux Tools 375515651) 欢迎转载.但请保留作者信息 VELT的全称是Vi ...
- 数据库学习之简单的SQL语句
1.数据库的结构 1.1数据库 不同数据库叫做Catalog(在有的 DBMS 中也称为 Database,即数据库) .採用多 Catalog 以后能够给我们带 来例如以下优点: 便于对各个 Cat ...