译者按: 试着不用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. Android 关于解决MediaButton学习到的media控制流程

    问题背景:话机连接了头戴式的耳机,在通话过程中短按按钮是挂断电话,长按按钮是通话静音.客户需求是把长按改成挂断功能,短按是静音功能. android版本:8.1 在通话中,测试打印信息,可以看到but ...

  2. Javascript高级编程学习笔记(76)—— 表单(4)选择文本

    文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...

  3. vis.js没有中文文档,个人在项目中总结的一些中文配置

    ##vis.js var options = { nodes:{//节点配置 borderWidth: 1,//节点边框的宽度,单位为px borderWidthSelected: 2,节点被选中时边 ...

  4. Java核心技术及面试指南 流程控制方面的面试题答案

    2.2.5.1 switch语句能否作用在byte上,能否作用在long上,能否作用在String上? 1 switch里可以用char,byte,short,int这些基本类型,以及它们的封装类.  ...

  5. springboot项目部署云服务器

    Springboot项目部署云服务器 springboot项目部署云服务器还是挺简单的 首先你要有java运行环境,就是jdk的安装,如果还没有装没有参考安装:阿里云ECS建网站(建站)超详细全套完整 ...

  6. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  7. 微信小程序:防止多次点击跳转(函数节流)和防止表单组件输入内容多次验证(函数防抖)

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...

  8. iOS逆向开发(1):基础工具 | ssh | scp | socat

    小白:小程,我一直想问,什么是逆向来着?是逆向行驶吗? 小程:理解为逆向行驶也没错.一般的项目是从无到有,而逆向是从已有的状态入手,分析出已有的流程与结构的手段. iOS上的逆向开发,是一件有趣的事情 ...

  9. Linux软件包管理之yum在线管理

    目录 1.yum在线管理 2.网络 yum 源 3.光盘 yum 源搭建步骤 ①.挂载光盘 ②.让网络 yum 源失效 ③.修改光盘yum源文件 ④.输入yum list 可以查看光盘yum源里面的软 ...

  10. 【Go】go get 自动代理

    原文链接:https://blog.thinkeridea.com/201903/go/go_get_proxy.html 最近发现技术交流群里很多人在询问 go get 墙外包失败的问题,大家给了很 ...