译者按: 试着不用if撸代码,是件很有趣的事,而且,万一你领会了什么是“数据即代码,代码即数据”呢?

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符、switch语句等)解决一些编程问题。

这样做有什么意义吗?

事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更好的方法。

当然,使用if语句没有任何不对的地方。但是,不使用if的话,有时候可以增加代码的可读性。这一点并不是绝对的,如果完全不使用if语句的话,代码可读性也许会更差。这需要你根据不同情况去判断。

而且,不用if的话不只是影响可读性。在这背后隐含着更加深刻的道理。通过了解本文的代码示例,你可以发现,如果不使用if语句的话,你的代码会更加接近代码即数据的概念。

另外,当你尝试不使用if语句去编程时,也是一件非常有意思的事情。

示例1: 统计数组中的奇数

假设我们有一个整数数组arrayOfIntegers,现在需要统计其中奇数的个数:

const arrayOfIntegers = [1, 4, 5, 9, 0, -1, 5];

使用if

let counter = 0;
arrayOfIntegers.forEach((integer) => {
const remainder = Math.abs(integer % 2);
if (remainder === 1) {
counter++;
}
}); console.log(counter);  

不用if

let counter = 0;

arrayOfIntegers.forEach((integer) => {
const remainder = Math.abs(integer % 2);
counter += remainder;
}); console.log(counter);

示例2: 判断工作日和周末不用if时,我们巧妙地利用了奇数与偶数的特性,它们除以2的余数分别是0和1。

给定一个日期(比如new Date()),判断它是工作日还是周末,分别返回”weekend”和”weekday”。

使用if

const weekendOrWeekday = (inputDate) => {
const day = inputDate.getDay(); if (day === 0 || day === 6) {
return 'weekend';
} return 'weekday'; // Or, for ternary fans:
// return (day === 0 || day === 6) ? 'weekend' : 'weekday';
}; console.log(weekendOrWeekday(new Date()));

不用if

const weekendOrWeekday = (inputDate) => {
const day = inputDate.getDay(); return weekendOrWeekday.labels[day] ||
weekendOrWeekday.labels['default'];
}; weekendOrWeekday.labels = {
0: 'weekend',
6: 'weekend',
default: 'weekday'
}; console.log(weekendOrWeekday(new Date()));

  

你是否发现if语句中其实隐含着一些信息呢?它告诉我们哪一天是周末,哪一天是工作日。因此,要去掉if语句的话,我们只需要把这些信息写入weekendOrWeekday.labels对象,然后直接使用它就好了。

广告: 如果你需要监控线上JavaScript代码的错误的话,欢迎免费使用Fundebug!

示例3: doubler函数

写一个doubler函数,它会根据参数的类型,进行不同的操作:

  • 如果参数是数字,则乘以2(i.e. 5 => 10-10 => -20);
  • 如果参数是字符串,则每个字符重复2次 (i.e. 'hello' => 'hheelloo');
  • 如果参数是函数,则调用2次;
  • 如果参数是数组,则将每一个元素作为参数,调用doubler函数
  • 如果参数是对象,则将每个属性值作为参数,调用doubler函数

使用switch

const doubler = (input) => {
switch (typeof input) {
case 'number':
return input + input;
case 'string':
return input
.split('')
.map((letter) => letter + letter)
.join('');
case 'object':
Object.keys(input)
.map((key) => (input[key] = doubler(input[key])));
return input;
case 'function':
input();
input();
}
}; console.log(doubler(-10));
console.log(doubler('hey'));
console.log(doubler([5, 'hello']));
console.log(doubler({ a: 5, b: 'hello' }));
console.log(
doubler(function() {
console.log('call-me');
}),
);

不用switch

可知,我将每一种参数类型对应的操作绑定到了doubler.operationsByType,这样不需要switch语句,就可以实现doubler函数了。

const doubler = (input) => {
return doubler.operationsByType[typeof input](input);
}; doubler.operationsByType = {
number: (input) => input + input,
string: (input) =>
input
.split('')
.map((letter) => letter + letter)
.join(''),
function: (input) => {
input();
input();
},
object: (input) => {
Object.keys(input)
.map((key) => (input[key] = doubler(input[key])));
return input;
},
}; console.log(doubler(-10));
console.log(doubler('hey'));
console.log(doubler([5, 'hello']));
console.log(doubler({ a: 5, b: 'hello' }));
console.log(
doubler(function() {
console.log('call-me');
}),
);

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!

版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/11/06/write-javascript-without-if/

你试过不用if撸代码吗?的更多相关文章

  1. 你试过不用if写代码吗?

    我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符.switch语句等)解决一些编程问题.这样做有什么意义吗?事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更 ...

  2. SpringBoot代码生成器,从此不用手撸代码

    前言 通常在开始开发项目的时候,首先会建立好数据库相关表,然后根据表结构生成 Controller.Service.DAO.Model以及一些前端页面. 如果开发前没有强制的约束,而每个程序员都有自己 ...

  3. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  4. 为何你跟着滴滴D8级前端大神撸代码,技术却依旧原地踏步?

    引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...

  5. 原生java调用webservice的方法,不用生成客户端代码

    原生java调用webservice的方法,不用生成客户端代码 2015年10月29日 16:46:59 阅读数:1455 <span style="font-family: Aria ...

  6. 推荐一款最强Python自动化神器!不用写一行代码!

    搞过自动化测试的小伙伴,相信都知道,在Web自动化测试中,有一款自动化测试神器工具: selenium.结合标准的WebDriver API来编写Python自动化脚本,可以实现解放双手,让脚本代替人 ...

  7. iOS开发:集成支付宝(遇见的坑和便捷撸代码)

    开发iOS最重要的就是支付了,天朝之内最常用的就是支付宝了,下面就以自己的经历说明如何集成支付宝+遇见的坑. 首先,集成支付宝最好别使用Cocoapods,很多人都说使用起来很方便,可是我每次只要使用 ...

  8. python之购物车的编写(熬夜撸代码中。。。)

    购物车的编写对于我这种不是很精通函数的小白来说,简直太难了.各种坑,各种无奈啊!不过总算也是写出来了! 不多说,直接上代码! #!/usr/bin/env python#用户名 sanjiang#密码 ...

  9. 大家一起撸代码之——Hibernate各种主键生成策略与配置详解

    1.assigned 主键由外部程序负责生成,在 save() 之前必须指定一个.Hibernate不负责维护主键生成.与Hibernate和底层数据库都无关,可以跨数据库.在存储对象前,必须要使用主 ...

随机推荐

  1. 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  2. 【转】Asp.NetMve移除HTTP Header中服務器信息Server、X-AspNet-Version、X-AspNetMvc-Version、X-Powered-By:ASP.NET

    默認情況下Chrome中截獲的HTTP Header信息: Cache-Control: Content-Encoding:gzip Content-Length: Content-Type:text ...

  3. Android常用第三方支付

    移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...

  4. [Swift]Alamofire:设置网络请求超时时间【timeout】的两种方式

    两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...

  5. nginx服务器入门知识汇总

    IP-hash 就是根据IP进行hash计算,然后分配到对应的服务器,好处就是不用session同步,固定IP会固定访问一台服务器,缺点就是恶意攻击,会造成某台服务器压垮.提供的服务不同,面向的地区不 ...

  6. FileZilla 使用笔记

    FileZilla 使用了三年了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下 Tips,提高工作效率,方便以后查阅. 一.好用的功能 1.Site Manager - 站点管理器 ...

  7. 课程五(Sequence Models),第三周(Sequence models & Attention mechanism) —— 0.Practice questions:Sequence models & Attention mechanism

  8. Prometheus 入门与实践

    原文链接:https://www.ibm.com/developerworks/cn/cloud/library/cl-lo-prometheus-getting-started-and-practi ...

  9. w7 python35 输出中文乱码解决

    1.乱码纷争在python自带的控制台正常 但是cmd就跪了,用的vs code也是同样问题,不想以前学习python27那么单纯,前面加个#UTF就可以了 网上寻求解决办法 import io,sy ...

  10. [Maven]Maven如何得到单独的单元测试报告

    ----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...