译者按: 试着不用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. 剑指offer面试题15:链表中倒数第K个节点

    题目:输入一个链表,输出该链表的倒数第K个节点.为了符合大多数人的习惯,本题从1开始计数,即链表尾节点是倒数第一个节点. 解题思路: 解法一:一般情况下,单向链表无法从后一个节点获取到它前面的节点,可 ...

  2. 谈谈npm依赖管理

    引言 现在的前端开发几乎都离不开nodejs的包管理器npm,比如前端在搭建本地开发服务以及打包编译前端代码等都会用到.在前端开发过程中,经常用到npm install来安装所需的依赖,至于其中的技术 ...

  3. C++内存读写例子

    /************************************************************* // 声明头文件 #ifndef LyShark__h #define L ...

  4. 虚拟机安装mysql

    安装mysql8.0方法:  1.首先,ubuntu安装mysql8.0(此版本比较好装),所以要先更新一下源,去MySQL官网http://dev.mysql.com/downloads/repo/ ...

  5. 第二节:Web前端-ASP.NET之C#基础

    第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...

  6. Web发展简史(精编故事版,贤来给你讲故事)

    Web发展简史 一. Web发展简史之隔壁老王的故事 有一个人叫隔壁老王,老王有一个爱好就是爱看电影.有一天,这个隔壁老王想看一部电影,可是电脑里面存储的电影太多了,他费了老大劲才从里面找到,觉得很不 ...

  7. Mybatis优缺点

    优点:SQL写在XML中,便于统一管理和优化 提供映射标签,支持对象和数据库的orm字段关系映射 可以对SQL进行优化      缺点: SQL工作量大 mybagtis移植姓不好 不支持级联

  8. g++编译的makefile模板库和脚本

    编译C++文件,特别是多文件的时候,经常要找模板,这里为了后面方便,就自己做了一个模板. makefile模板:Makefile # Object files to either reference ...

  9. 涨姿势:Spring Boot 2.x 启动全过程源码分析

    目录 SpringApplication 实例 run 方法运行过程 总结 上篇<Spring Boot 2.x 启动全过程源码分析(一)入口类剖析>我们分析了 Spring Boot 入 ...

  10. iOS----KVC和KVO 详解

    一. KVC 1.KVC介绍 KVC 就是键值编码(key-value-coding). 2.KVC 的主要作用: (1)通过键值路径为对象的属性赋值.主要是可以为私有的属性赋值. AppleView ...