译者按: 试着不用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. java数据结构面试问题—快慢指针问题

    上次我们学习了环形链表的数据结构,那么接下来我们来一起看看下面的问题, 判断一个单向链表是否是环形链表? 看到这个问题,有人就提出了进行遍历链表,记住第一元素,当我们遍历后元素再次出现则是说明是环形链 ...

  2. 几分钟几张图教你学会如何使用UML

    很多初次接触UML的朋友们可能会感觉它各种各样的线条.关系.描述等晦涩难懂.本篇文章简单介绍了一下其中几个图,用最朴实的语言结合上图片来让你一眼就能理解他们,如果您在阅读的过程种发现错误之处恳请您在评 ...

  3. 第八篇: 服务链路追踪(Spring Cloud Sleuth)

    一.简介 一个分布式系统由若干分布式服务构成,每一个请求会经过多个业务系统并留下足迹,但是这些分散的数据对于问题排查,或是流程优化都很有限.   要能做到追踪每个请求的完整链路调用,收集链路调用上每个 ...

  4. WHERE 子句用于规定选择的标准

    WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句. (也称条件查询语句) 语法SELECT 列名称 FROM 表名称 WHERE 列 运算符 值 下面的& ...

  5. python(leetcode)-48旋转图像

    给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1: 给定 m ...

  6. netty入坑第一步:了解netty和编写简单的Echo服务器和客户端

    早期java API通过原生socket产生所谓的"blocking",大致过程是这样 这种的特点是每次只能处理一个请求,如果要实现多个请求并行,就还要分配一个新的线程来给每个客户 ...

  7. document.getElementsByClassName返回的是一个数组

    转载自:https://www.cnblogs.com/shark1100913/p/6713327.html   document.getElementsByClassName("a&qu ...

  8. Api 文档管理系统 RAP2 环境搭建

    Api 文档管理系统 RAP2 环境搭建  发表于 2018-03-27 |  分类于 Api |  评论数: 4|  阅读次数: 4704  本文字数: 4.8k |  阅读时长 ≍ 9 分钟 RA ...

  9. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  10. Code Complete-13/7/23

    What is "construction"?    Hava u ever  used construction paper to make some things?What i ...