《趣学JavaScript——教孩子学编程》——2.4 Boolean

简介:

本节书摘来自异步社区《趣学JavaScript——教孩子学编程》一书中的第2章,第2.4节, 作者: 【美】Nick Morgan(摩根)译者: 李强,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 Boolean

现在来介绍Boolean类型。Boolean只有一个值,不是true(真)就是false(假)。例如,一个简单的布尔表达式如下所示:
screenshot

这个示例中,我们创建了一个新的名为javascriptIsCool的变量,并且把Boolean值true赋给它。在下一行中,我们得到javascriptIsCool的值,当然是true。

2.4.1 逻辑操作符
就像可以用算术操作符(+、-、*、/等)把数字组合起来一样,我们也可以用布尔操作符把布尔值组合起来。当用布尔操作符组合布尔值时,结果总是另一个布尔值(true或false)。

JavaScript中的3个主要布尔操作符是&&、||和!。它们看上去有点奇怪,但是稍加练习,用起来并不难。我们试试看。

&&(与)
&&表示“与”。当读出声的时候,人们将其读作“and”“andand”或者“and符和and符”(and符是字符&的名字)。使用&&操作符来判断两个布尔值是否都为真。

例如,在去学校前,你想要确认是否已经洗澡并背上书包。如果两者都为真,就可以去上学,如果有一个为假或者两个都为假,就不能离开家门。
screenshot

这里,把变量hadShower设置为true,把变量hasBackpack设置为false。当输入hadShower && hasBackpack时,实际上是在问JavaScript“这两个值都是true吗?”。既然它们不是都为true(没有背上书包),那么JavaScript会返回false(还没有为上学做好准备)。

再试一次,这次把两个值都设置为true:
screenshot

JavaScript现在告诉我们hadShower && hasBackpack为true。你已经为上学做好了准备。

||(或)
布尔操作符||表示“或”,可以读作“or”“or-or”,但也有人称之为“管道符”,因为程序员将|字符称为管道。使用该操作符可以判断两个布尔值中是否有一个为真。

例如,假设还是准备去上学,需要带一份水果作为午餐,但是既可以带苹果,也可以带橙子,或者两者都带。可以用JavaScript判断是否至少带了一份水果,如下所示:
screenshot

如果hasApple是true或者hasOrange是true,或者两个都是true,则hasApple || hasOrange为true。但是如果两个都是false,则结果为false(没有带任何水果)。

!(非)
!表示“非”。可以称之为“not”,但很多人称之为“惊叹号”。使用它把假转换成真,或者把真转换成假。这对于值的取反很有帮助。例如:
screenshot

这个示例中,把变量isWeekend设置为true。然后,把变量needToShower Today设置为!isWeekend。“非”把这个值转换成它的相反值,所以如果isWeekend是true,那么!isWeekend就是false。所以,当查看needToShowerToday的值时,会得到false(今天不需要洗澡,因为今天是周末)。

因为needToShowerToday是false,所以!needToShowerToday就会为true。

screenshot

换句话讲,你今天真的不需要洗澡。

组合逻辑操作符
当把逻辑操作符组合到一起时,它们变得有趣起来。例如,今天不是周末,需要去上学,你已经洗了澡并且带了一个苹果或者一个橙子。我们可以用JavaScript来检测所有这些是否为真,如下所示:
screenshot

在这个示例中,今天不是周末,你已经洗了澡,你没有带苹果但是带了一个橙子,所以你可以上学去了。

hasApple || hasOrange放在圆括号中,因为我们想要JavaScript确保这部分先执行。就像JavaScript会先计算*再计算+一样,在逻辑语句中,也会先计算&&再计算||。
screenshot

2.4.2 用Boolean比较数字
可以用布尔值回答一些答案为yes或no的简单的关于数字的问题。例如,假设我们经营一个主题公园,其中一项游乐设施有年龄限制:乘客的身高至少要60英寸,否则他们可能会掉下来!当有人想要玩这个设施并且说出其身高时,我们需要知道该身高是否大于最低身高限制。

大于
可以使用大于符号(>)来判断一个数字是否大于另一个数字。例如,判断乘客的身高(65英寸)是否大于身高限制(60英寸),可以把变量height设置为65,把变量heightRestriction设置为60,然后使用>符号比较两个数字:
screenshot

使用height > heightRestriction,要求JavaScript告诉我们,第一个值是否大于第二个值。在这个示例中,乘客的身高足够高。

如果乘客的身高恰好是60英寸,那要怎么办?
screenshot

哦,不!乘客不够高。但是,如果身高限制是60,那么60英寸高的人难道不应该允许进入吗?我们需要修改这个条件。好在JavaScript有另一个操作符表示“大于或等于”。

screenshot

非常棒——60大于或等于60。

小于
和大于操作符(>)相反的是小于操作符(<)。如果把游乐设施设计为只供小朋友乘坐,那么小于符号就可以派上用场。例如,假设该乘客的身高是60英寸,但是游乐设施对乘客的限制是不得超过48英寸:
screenshot

如果想要知道乘客的身高是否小于限制高度,就使用<符号。因为60不小于48,所以我们得到false(乘客的身高是60英寸,对于这个游乐设施来说,他太高了)。

你可能猜到了,也可以使用<=操作符,它表示“小于或等于”:
screenshot

身高为48英寸的乘客仍然允许乘坐。

等于
要搞清楚两个数字是否相等,使用三个等号(===),它的含义是“等于”。但是要注意三个等号(===)与一个等号(=)的区别,因为===表示“这两个数字相等吗?”,而=表示“把右边的值保存到左边的变量中”。换句话讲,===是问一个问题,而=是把一个值赋给变量。
screenshot

当使用=时,变量名必须放在左边,想要保存到变量中的值必须放在右边。而另一方面,===只是用来比较两个值是否相等,所以值放在哪一边都无所谓。

例如,假设你正在和朋友Chico、Harpo和Groucho玩游戏,看看谁能猜到你的神秘数字5。为了使游戏变得简单,可以告诉朋友们,这个数字在1到9之间,然后再开始猜数字。首先,设置mySecretNumber等于5。你的第一位朋友Chico猜的是3(chicoGuess)。看看接下来会发生什么:
screenshot

变量mySecretNumber把神秘数字保存起来。变量chicoGuess、harpoGuess和grouchoGuess表示朋友们猜测的数字,使用===来判断每次所猜测的数字是否与神秘数字相等。第3位朋友Groucho猜对了,答案是5。

当使用===判断两个数字时,只有两个数字相等才会得到true。因为grouchoGuess是5,而mySecretNumber也是5,所以mySecretNumber === grouchoGuess返回true。其他的猜测都和mySecretNumber不相等,所以返回的都是false。

也可以使用===比较两个字符串或者两个布尔类型。如果使用===比较两种不同的类型,例如,比较字符串和数字,总会返回false。

两个等号
还有一点容易让人搞混淆,就是另一个JavaScript操作符==(两个等号)。使用它来判断两个值是否相等,即使一个值是字符串,另一个值是数字,也可以比较。所有值都有类型。所以数值5和字符串"5"是不同的,即使它们看上去是一样。如果使用===来比较数值5和字符串"5",JavaScript会告诉我们,它们是不相等的。但是,如果使用==来比较这两个值,JavaScript会告诉我们,它们是相等的。
screenshot

关于这一点,你可能会认为:“看上去使用两个等号要比三个等号更容易一些。”然而,一定要小心,因为两个等号可能很容易令人混淆。例如,你认为0会等于false吗?0会等于字符串"false"吗?当使用两个等号时,0等于false,但是不等于字符串"false"。
screenshot

这是因为,当JavaScript试图用==比较两个数字时,首先会尝试把这两个值当作相同的类型。这种情况下,它把布尔值转换成一个数字。如果把布尔值转换成数字,false就变成了0,true变成了1。所以,当输入0 == false时,你会得到true。

因为这个怪异的原因,目前请坚持使用===。

试试看 

电影院经理要求你用JavaScript实现他们所要建立的一套新的自动化系统。他们想要能够判断是否允许某人观看PG-13级别的电影。

规则是,如果年龄大于或等于13岁,就允许进入影院。如果年龄小于13岁,但是有成年人陪伴,也允许进入影院。否则,就不允许观看该电影。

screenshot

使用变量age和accompanied来完成这个示例,以判断是否允许这个12岁的少年观看这部电影。尝试换一些值(例如,把age设置为13,把accompanied设置为false),看看你的代码是否仍然能够得到正确答案。
screenshot

相关文章
|
3月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
4月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
53 3
|
1月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
27 3
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
22 2
|
2月前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
JavaScript Boolean(布尔) 对象
22 3
|
3月前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
40 8
|
3月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
3月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
3月前
|
JavaScript 前端开发 安全
JavaScript编程实现字符和字符串翻转
JavaScript编程实现字符和字符串翻转
|
3月前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值
下一篇
DataWorks