关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程教程 > 技术文章 > 正文

写好JavaScript条件语句的5个技巧

guanshanw 2023-08-22 03:06 38 浏览 0 评论

1、使用Array.includes处理多种条件

让我们来看一下的例子:

// conditionfunction test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}}

一眼看去,以上的例子貌似没有什么问题。但是,如果我们加入更多的红色水果,比如车厘子(cherry)和蔓越橘(cranberries)?那就要使用||写更多的条件判断了。

写好JavaScript条件语句的5个技巧

为了解决以上问题,我们可以使用Array.includes来重写以上的条件判断。看以下例子:

function test(fruit) {
// extract conditions to array
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}}

将这些“红色水果”(条件)提取到数组里面,这样写就会看起来很简洁了。

2、减少嵌套,尽早return

下面我们增加两个条件判断来扩展下上一个例子:

  • 如果没有水果则抛出异常
  • 如果数量超出10则输出水果数量
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 // condition 1: fruit must has value
 if (fruit) {
 // condition 2: must be red
 if (redFruits.includes(fruit)) {
 console.log('red');
 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
 }
 } else {
 throw new Error('No fruit!');
 }
}
// test results
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity

看着以上的代码,发现以下的问题:

  • 一个过滤无效条件的if/else语句
  • 嵌套三级 if条件语句
  • 我个人遵循的一般规则:在处理无效条件时尽早return
/_ return early when invalid conditions found _/
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 // condition 1: throw error early
 if (!fruit) throw new Error('No fruit!');
 // condition 2: must be red
 if (redFruits.includes(fruit)) {
 console.log('red');
 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
 }
}

通过这种写法,可以减少一层嵌套。当if语句很长的时候,这种写法就比较好。(试想一下,你需要滚动到很底部才能看到else语言,这样不酷)。

我们也可以用相反的条件判断和尽早返回来减少if语句嵌套,看以下第二个条件是如何处理的。

/_ return early when invalid conditions found _/
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
 if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
 console.log('red');
 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
}

通过在第二个条件里取反的条件来判断,现在的代码释放了一个嵌套。当我们要写很长的逻辑以及想停止更一步的过程时,这种方法很凑效。

但是,这样写并不是硬性的,要看具体的场景。有时候,你要问下自己,这样的写法(没有嵌套)是否比之前那种(在条件2嵌套)更好或者更具可读性。

对我来说,我只会远离之前的那种写法(在条件2嵌套),注意有以下两个原因:

  • 对比嵌套if语句,这种写法更短,更简洁
  • 取反的条件判断可能招致更多的思考过程(增加认知负荷)

因此,始终旨在减少嵌套和及时及早返回(return),但是不要过度去这样做。如果感兴趣可以查看以下的一篇相关文章和在StackOverflow的关于这主题的更多讨论:

  • 避免else,尽早return
  • StackOverflow关于if/else代码风格的讨论

3、使用函数默认参数和解构

我猜以下的代码你看起来应该很熟悉了,我们仍然需要在执行JavaScript时检查空值(undefined或null)。

function test(fruit, quantity) {
 if (!fruit) return;
 const q = quantity || 1; // if quantity not provided, default to one
 console.log(`We have ${q} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

事实上,我们可以消除变量p来分配函数默认参数。看以下例子:

function test(fruit, quantity = 1) { // if quantity not provided, default to one
 if (!fruit) return;
 console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

是不是看起来很简单,很直观?请记住,每个参数都有自己的默认函数参数。例如,我们也可以为fruit分配默认值(即以上代码的第一个参数):

function test(fruit = 'unknown', quantity = 1)

另外一个问题来了:如果fruit参数是Object类型怎么办?我们可以指定默认值吗?

function test(fruit) { 
 // printing fruit name if value provided
 if (fruit && fruit.name) {
 console.log (fruit.name);
 } else {
 console.log('unknown');
 }
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

看看上面的例子,我们想要打印出fruit的名称如果值存在的话,否则打印出“unknow”。我们可以通过检查默认函数参数和对象解构来避免fruit&&fruit.name这个条件。看看以下例子:

// destructing - get name property only
// assign default empty object {}
function test({name} = {}) {
 console.log (name || 'unknown');
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

由于我们只需要fruit对象的name属性,可以使用{name}来解构对象,然后我们可以在代码中使用name作为变量代替fruit.name。

我们还将分配空对象{}作为默认参数。如果不这样做的话,在执行test(undefined)这行代码时就会报错:无法解析’undefined’或’null’的属性name,因为undefined没有name这个属性。

如果你不介意使用第三方库,有几个方法可以减少空值检查。

  • 使用Lodash get方法
  • 使用Facebook 开源的idx库(和Bablejs)

以下是使用Lodash的例子:

// Include lodash library, you will get _
function test(fruit) {
 console.log(__.get(fruit, 'name', 'unknown'); // get property name, if not available, assign default value 'unknown'
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

你可以在这里执行这个demo。另外,如果你热衷于使用函数式编程(FP),你可能会选择用Lodash fp,Lodash的函数式版本(方法改为get或getOr)。Java架构交流学习圈:874811168 面向1-3年经验 Java开发人员 帮助突破瓶颈 提升思维能力

4、支持Map或对象字面量而不是switch声明

我们来看看以下例子:

function test(color) {
 // use switch case to find fruits in color
 switch (color) {
 case 'red':
 return ['apple', 'strawberry'];
 case 'yellow':
 return ['banana', 'pineapple'];
 case 'purple':
 return ['grape', 'plum'];
 default:
 return [];
 }
}
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']

以上的代码看起来貌似没什么错误,但是我发现代码十分杂乱。其实可以用字面量对象更清晰的语法来实现相同的结果。例如:

// use object literal to find fruits in color
 const fruitColor = {
 red: ['apple', 'strawberry'],
 yellow: ['banana', 'pineapple'],
 purple: ['grape', 'plum']
 };
function test(color) {
 return fruitColor[color] || [];
}

或者,你也可以用Map来实现同样的结果,例如:

// use Map to find fruits in color
 const fruitColor = new Map()
 .set('red', ['apple', 'strawberry'])
 .set('yellow', ['banana', 'pineapple'])
 .set('purple', ['grape', 'plum']);
function test(color) {
 return fruitColor.get(color) || [];
}

Map是自ES6开始才可用的对象类型,可以用来存储键值对。

5、对所有或部分规则使用Array.every和Array.some

最后一个技巧是关于利用新的(其实不是很新了)JavaScript数组方法来减少代码函数。看看下面的代码,我们想所有的水果是否都是红色的。

const fruits = [
 { name: 'apple', color: 'red' },
 { name: 'banana', color: 'yellow' },
 { name: 'grape', color: 'purple' }
 ];
function test() {
 let isAllRed = true;
 // condition: all fruits must be red
 for (let f of fruits) {
 if (!isAllRed) break;
 isAllRed = (f.color == 'red');
 }
 console.log(isAllRed); // false
}

上面的代码真的好冗长!我们可以用Array.every来减少代码行数。来看看:

const fruits = [
 { name: 'apple', color: 'red' },
 { name: 'banana', color: 'yellow' },
 { name: 'grape', color: 'purple' }
 ];
function test() {
 // condition: short way, all fruits must be red
 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() {
 // condition: if any fruit is red
 const isAnyRed = fruits.some(f => f.color == 'red');
 console.log(isAnyRed); // true
}

总结

让我们一起生成更多可读代码。 我希望你能在本文中学到一些新东西。

就这样。 写代码快乐!

(完)

相关推荐

七条简单命令让您玩转Git
七条简单命令让您玩转Git

凭借着出色的协作能力、快速部署效果与代码构建辅助作用,Git已经得到越来越多企业用户的青睐。除了用于开发商业及消费级应用之外,众多科学及政府机构也开始尝试使用这...

2023-10-07 12:14 guanshanw

基本完整的关于Git分支branch的操作
基本完整的关于Git分支branch的操作

Git使用背景项目中要用到dev或者其他分支开发完代码,需要将该分支合并到master的需求操作步骤下面以dev名称为lex为分支名为例来操作一遍客户端操作:...

2023-10-07 12:14 guanshanw

Git 进阶(合并与变基)
Git 进阶(合并与变基)

在Git中整合来自不同分支的修改主要有两种方法:合并(merge)以及变基(rebase)合并(merge)merge流程图merge的原理是找到这两个分...

2023-10-07 12:13 guanshanw

Git学习笔记 003 Git进阶功能 part5 合并(第一部分)

合并(merge)是很常用的操作。尤其是一个庞大的很多人参与开发的企业级应用。一般会设定一个主分支,和多个副分支。在副分支开发完成后,合并到主分支中。始终保持主分支是一个完整的,稳定的最新状态的分支。...

非标题党,三张图帮你理解git merge和git rebase的区别
非标题党,三张图帮你理解git merge和git rebase的区别

初始场景:基于正常的开发分支修改几个小bug,然后在合并到开发分支上。gitmergegitcheckoutfeaturegitmergeho...

2023-10-07 12:13 guanshanw

git 初次使用(01)
git 初次使用(01)

先从github上克隆代码下来:使用vscode克隆代码如下图,填写上github仓库地址:vscode有时候克隆代码速度比较慢,可以用命令行方式克隆gitc...

2023-10-07 12:12 guanshanw

Git 远程操作

4.Git远程操作命令说明gitremote远程版本库操作gitfetch从远程获取版本库gitpull下载远程代码并合并gitpush上传远程代码并合并4.1远程版本库操作gitre...

Git常用命令-总结
Git常用命令-总结

创建git用户$gitconfig--globaluser.name"YourName"$gitconfig--globaluser.em...

2023-10-07 12:12 guanshanw

git中删除从别人clone下来项目的git信息,并修改为自己的分支

如果你从别人的Git存储库中克隆了一个项目,并想要删除与该存储库相关的Git信息,并将其修改为你自己的分支,则可以执行以下步骤:使用gitclone命令克隆存储库:gitclone<u...

git系列-回滚和放弃本地修改

回滚历史提交就是reset的功能。这种情况是已经提交远程仓库,需要回滚到之前的提交。gitreset--hardcommitId//注:强制提交后,当前版本后面的提交版本将会删掉!gi...

GIT使用小技巧大全
GIT使用小技巧大全

在大型软件工程的开发过程中,版本控制是无法绕过去的;目前来说,最火的版本控制软件就是GIT了。早两年SVN比较火,不过被大神linus喷了几次后,就日落西山了,...

2023-10-07 12:11 guanshanw

git相关命令-上
git相关命令-上

这些命令都是看了文档后,个人觉得比较有用的一些,展示给大家。回到远程仓库的状态抛弃本地所有的修改,回到远程仓库的状态。gitfetch--all&...

2023-10-07 12:10 guanshanw

Git命令行接口:掌握Git的必备技能
Git命令行接口:掌握Git的必备技能

Git是一款强大的分布式版本控制工具,它支持命令行界面操作。熟练掌握Git命令行接口,是开发者使用Git的必备技能之一。在这篇文章中,我们将介绍Git命令行接口...

2023-10-07 12:10 guanshanw

Git命令详解
Git命令详解

相信各位小伙伴们应该都对git有一些了解,毕竟作为代码管理的神器,就算不是IT行业的小伙伴肯定也或多或少的听说过一些。今天就来和小伙伴们分享一下自己总结的常用命...

2023-10-07 12:10 guanshanw

工作7年收集到的git命令
工作7年收集到的git命令

概念git中的术语解释:仓库也叫版本库(repository)stage:暂存区,add后会存到暂存区,commit后提交到版本库git安装linux...

2023-10-07 12:10 guanshanw

取消回复欢迎 发表评论: