算术操作符

加减乘除这些算术操作中的每一种都必须借助于相应的操作符才能完成。操作符是JavaScript为完成各种操作而定义的一些符号。等号(=)、加号(+)、减号(-)、乘号(*)、除号(/)。

下面是一个简单的加法操作:


1 + 4

还可以把多种操作组合在一起:


1 + 4 * 5

为避免产生歧义,可以用括号把不同的操作分隔开来:

1 + (4 * 5)
(1 + 4) * 5

变量可以包含操作:


var total = (1 + 4) * 5;

还可以对变量进行操作:

var temp_fahrenheit = 95;
var temp_celsius = (temp_fahrenheit - 32) / 1.8;

JavaScript还提供了一些非常有用的操作符作为各种常用操作的缩写。例如,如果想给一个数值变量加上1,可以使用如下所示的语句:


year = year + 1;

也可以使用++操作符来达到同样的目的:


year++;

类似地,--操作符将对一个数值变量的值进行减1操作。

加号(+)是一个比较特殊的操作符,既可以用于数值,也可以用于字符串。把两个字符串合二为一是一种很直观易懂的操作:

var message = "I am feeling" + "happy";

像这样把多个字符串首尾相连在一起的操作叫做拼接。这种拼接也可以通过变量来完成:

var mood = "happy";
var message = "I am feeling" + mood;

甚至可以把数值和字符串拼接在一起。因为JavaScript是一种弱类型语言,所以这种操作是允许的。此时,数值将会被自动转换为字符串:

var year = 2005;
var message = "The year is" + year;

如果把字符串拼接在一起,其结果将是一个更长的字符串;但是如果用同样的操作符来“拼接”两个数值,其结果将是那两个数值的算术和。对比下面两条alert语句的执行结果:


alert ("10" + 20);
alert (10 + 20);

第一条alert语句将返回字符串“1020”,第二条alert语句将返回数值30。第一条是对字符串“10”和数值20进行拼接的结果。第二条是对数值10和数值20进行假发运算的结果。

另一个非常有用的快捷操作符是+=,它可以一次完成“加法和赋值”(或“拼接和赋值”)操作:


var year = 2010;
var message = "The year is";
message += year;

执行完上面这些语句后,变量message的值将是“The year is 2005”。可以用如下所示的alert对话框来验证这一结果:


alert(message);

条件语句

在解释脚本时,浏览器将依次执行这个脚本中的各条语句,我们可以在这个脚本中用条件语句来设置一个条件,只有满足了这一条件才能让更多的语句得到执行。最常见的条件语句是if语句,下面是if语句的基本语法:

if(condition) {
statements;
}

条件必须放在if后面的圆括号中。条件的求之结果永远是一个布尔值,即只能是true或false。花括号中的语句——不管他们有多少条,只有在给定条件的求值结果是true的情况下才会执行。因此,在下面这个例子中,alert消息永远也不会出现:

if(1 > 2) {
alert("The world has gone mad!")
}

因为1不可能大于2,所以上面这个条件的值永远是false。

事实上,if语句中的花括号本身并不是必不可少的。如果if语句中的花括号部分只包含着一条语句的话,那就可以不使用花括号,而且这条if语句的全部内容可以写在同一行上:

if(1 > 2) alert("The world has gone mad!");

不过,花括号可以提高脚本的可读性,所以在if语句中总是使用花括号是个好习惯。

if语句可以有一个else字句。包含在else字句中的语句会在给定条件为假时执行:

if(1 > 2) {
alert("The world has gone mad!")
} else {
alert("All is well with the world")
}

因为给定条件“1 > 2”的值为假(false),所以最后弹框显示else里面的内容。

比较操作符

JavaScript还提供了许多几乎只能用在条件语句里的操作符,其中包括诸如大于(>)、小于(<)、大于或等于(>=)、小于或等于(<=)之类的比较操作符。

如果想比较两个值是否相等,可以使用“等于”比较操作符。这个操作符由两个等号构成(==)。单个等号(=)是用于完成赋值操作的。如果在条件语句的某个条件里使用了单个等号,那么只要相应的复制操作取得成功,那个条件的求值结果就将是true。

下面是一个错误地进行“等于”比较的例子:


var my_mood = "happy";
var your_mood = "sad";
if(my_mood = your_mood) {
alert("We both feel the same.")
}

上面这条语句的错误之处在于,它是把变量your_mood赋值给变量my_mood,而不是在比较它们是否相等。因为这个赋值操作总会成功,所以这个条件语句的结果将永远是true。

下面才是进行“等于”比较的正确做法:


var my_mood = "happy";
var your_mood = "sad";
if(my_mood == your_mood) {
alert("We both feel the same.")
}

这次,条件语句的结果是false。

JavaScript还提供了一个用来进行“不等于”比较的操作符,它由一个感叹号和一个等号构成(!=)。

if(my_mood != your_mood) {
alert("We're feeling different moods.")
}

相等操作符==并不表示严格相等,这一点很容易让人迷糊。例如,比较false与一个空字符串会得到上面结果?

var a = false;
var b = "";
if(a == b) {
alert("a equals b");
}

这个条件语句的求值结果是true,因为相等操作符==认为空字符与false的含义相同。要进行严格比较,就要使用另一种等号(===)。这个全等操作符会执行严格的比较,不仅比较值,而且会比较变量的类型:

var a = false;
var b = "";
if(a === b) {
alert("a equals b");
}

这一次,条件表达式的求值结果就是false了。因为即使可以认为false与空字符串具有相同的含义,但Boolean布尔值和String字符串可不是一种类型。

对于不等操作符!=也是如此,比较严格不相等,就要使用!==。

逻辑操作符

JavaScript允许把条件语句里的操作组合在一起。例如,如果想检查某个变量,假设这个变量的名字是num,它的值是不是在5 ~ 10之间,将需要进行两次比较操作。首先,比较这个变量是否大于或等于5,然后,比较这个变量是否小于等于10.这两次比较操作称为逻辑比较。下面是把这两个逻辑比较组合在一起的具体做法:

if ( num >= 5 && num <= 10 ) {
alert("The number is in the right range.")
}

这里使用了“逻辑与”操作符,由两个“&”字符构成,是一个逻辑操作符。

逻辑操作符的操作对象是布尔值。每个逻辑操作数返回一个布尔值true或者是false。“逻辑与”操作只有在它的两个操作数都是true时才会是true。

“逻辑或”操作符由两个垂直线字符构成。只要它的操作数中有一个是true,“逻辑或”的操作就将是true。如果它的两个操作数都是true,“逻辑或”操作也将是true。只有当它的两个操作数都是false时,“逻辑或”操作才会是false。

if ( num > 10 || num < 5 ) {
alert("The number is not in the right range")
}

JavaScript还提供了一个“逻辑非”操作符,它由一个感叹号( ! )单独构成。“逻辑非”操作符只能作用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。如果那个逻辑操作数所返回的布尔值是true,“逻辑非”操作符将把它取反为false:

if ( !(1 > 2) ) {
alert("All is well with the world");
}

为了避免产生歧义,上面这条语句把逻辑操作数放在了括号里,使“逻辑非”操作符作用于括号里的所有内容。

可以用“逻辑非”操作符把整个条件语句的结果颠倒过来。在下面的例子里,特意使用了一对括号来确保“逻辑非”操作符将作用于两个逻辑操作数的组合结果:

if ( !(num > 10 || num < 5) ) {
alert("The number is in the right range.")
}

《JavaScript Dom编程艺术》读书笔记(二)的更多相关文章

  1. 《CSS世界》笔记二:盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  2. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  3. 《你必须知道的.NET》读书笔记二:小OO有大原则

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...

  4. spring揭秘 读书笔记 二 BeanFactory的对象注册与依赖绑定

    本文是王福强所著<<spring揭秘>>一书的读书笔记 我们前面就说过,Spring的IoC容器时一个IoC Service Provider,而且IoC Service Pr ...

  5. ES6读书笔记(二)

    前言 前段时间整理了ES6的读书笔记:<ES6读书笔记(一)>,现在为第二篇,本篇内容包括: 一.数组扩展 二.对象扩展 三.函数扩展 四.Set和Map数据结构 五.Reflect 本文 ...

  6. 《精通CSS》读书笔记(一)

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  7. spring揭秘 读书笔记 二 BeanFactory的对象注冊与依赖绑定

    本文是王福强所著<<spring揭秘>>一书的读书笔记 我们前面就说过,Spring的IoC容器时一个IoC Service Provider,并且IoC Service Pr ...

  8. 【记】《.net之美》之读书笔记(二) C#中的泛型

    前言 上一篇读书笔记,很多小伙伴说这本书很不错,所以趁着国庆假期,继续我的读书之旅,来跟随书中作者一起温习并掌握第二章的内容吧. 一.理解泛型 1.为什么要使用泛型?-----通过使用泛型,可以极大地 ...

  9. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  10. how tomcat works 读书笔记(二)----------一个简单的servlet容器

    app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...

随机推荐

  1. QT:Qt Creator快捷键与使用技巧

    功能 快捷键 解释 Switch Header/Source F4 在同名.h与.cpp文件间切换 Follow Symbol Under Cursor F2 跟踪光标下的变量或函数 变量:跟踪到变量 ...

  2. 基于Kubernetes/K8S构建Jenkins持续集成平台(上)-1

    基于Kubernetes/K8S构建Jenkins持续集成平台(上)-1 Jenkins的Master-Slave分布式构建 什么是Master-Slave分布式构建 Jenkins的Master-S ...

  3. Phoenix使用

    目录 Phoenix连接 Phoenix常用命令 表映射 视图映射 表映射 Phoenix二级索引 开启索引支持 全局索引 创建索引后 创建多条件索引后 本地索引 覆盖索引 总结 Phoenix JD ...

  4. IntelliJ IDEA 中打包时报aspose-cells错误缺失

    异常情况 在本地执行word转换为pdf是没有问题,但是在maven中提示错误: 解决方案 将com\aspose\aspose-cells\9.0.0下除了[aspose-cells-9.0.0.j ...

  5. laravel中{{}}和{!! !!}的区别详解

    {{}}支持转义 一段html代码只是被当成普通的字符串输出 {!! !!} 不支持转义 一段html代码可以被正常的解析 public function html(){ $address=" ...

  6. PhpStrom 好用的代码小地图插件

    类似SublimeText的Mini Map插件 ,废话不多直接上 安装 打开File -> Settings -> Plugins -> 搜索CodeGlance -> in ...

  7. CF587F&CF547E题解

    这两道题好像啊 贡献一种使用SAM和ACAM草两道题的方法 下面假装有 \(O(\sum |S|=m)=O(n)\). 你看看,这CF换过多少个出题人啦?换汤不换药啦!其实这两道题是同一个人出的 CF ...

  8. C#解析Markdown文档,实现替换图片链接操作

    前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...

  9. 记一次解决关机蓝屏 | MULTIPLE_IRP_COMPLETE_REQUESTS | klflt.sys

    已经解决蓝屏问题,原因是卡巴斯基安全软件驱动导致,需要卸载卡巴斯基安全软件,详细过程如下. 一.关机时蓝屏 Win10系统,在关机动画快结束时突然蓝屏,提示:你的设备遇到问题,需要重启,终止代码:MU ...

  10. pyhon反射

    一:反射 1.python面向对象中的反射: 通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 2.四个内置方法 hasattr 检测是否含有某属性 getatt ...