写出更好的 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; ...
随机推荐
- Linux下挂载新磁盘
Linux的硬盘识别: 一般使用”fdisk -l”命令可以列出系统中当前连接的硬盘 设备和分区信息.新硬盘没有分区信息,则只显示硬盘大小信息. 1.关闭服务器加上新硬盘 2.启动服务器,以r ...
- Diango REST framework 视图继承图
- CentOS 6 Yum本地源配置
#cd /etc/yum.repos.d #rm CentOS-Base.repo CentOS-Base.repo 是yum 网络源的配置文件(默认) #vi CentOS-Media.repo C ...
- Python数据分析与展示(1)-数据分析之表示(2)-NumPy数据存取与函数
NumPy数据存取与函数 数据的CSV文件存取 CSV文件 CSV(Comma-Separated Value,逗号分隔值) CSV是一种常见的文件格式,用来存储批量数据. 将数据写入CSV文件 np ...
- C. Day at the Beach
codeforces 599c C. Day at the Beach One day Squidward, Spongebob and Patrick decided to go to the be ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- MYSQL常用的字符串函数
#字符串函数 #返回字符串的字符数量,对于此例而言,结果为5SELECT CHAR_LENGTH('计算机编程'); #合并字符串,对于此例而言,结果为‘我喜欢计算机’SELECT CONCAT('我 ...
- 多Tabs的横向滚动插件(支持Zepto和jQuery)
一. 效果图 二. 功能介绍 1. 支持横向移动 2. 支持点击Tab后该Tab居中 3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小. 三. 使用说明 1. 在你的html中添加T ...
- Windows下Redis的安装与部署
1.下载地址:https://github.com/MSOpenTech/redis/releases 2.下载zip的包,下载后放到需要安装的目录进行解压操作,列如:F:\Redis\Redis-x ...
- event loop js事件循环 microtask macrotask
转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...