查看: 342|回复: 0

[DIV/CSS] 《JavaScript Dom编程艺术》读书笔记(二)

发表于 2016-6-22 08:05:00
算术操作符

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

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

  1. 1 + 4
复制代码

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

  1. 1 + 4 * 5
复制代码

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

  1. 1 + (4 * 5)
  2. (1 + 4) * 5
复制代码

变量可以包含操作:

  1. var total = (1 + 4) * 5;
复制代码

还可以对变量进行操作:

  1. var temp_fahrenheit = 95;
  2. var temp_celsius = (temp_fahrenheit - 32) / 1.8;
复制代码

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

  1. year = year + 1;
复制代码

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

  1. year++;
复制代码

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

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

  1. var message = "I am feeling" + "happy";
复制代码

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

  1. var mood = "happy";
  2. var message = "I am feeling" + mood;
复制代码

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

  1. var year = 2005;
  2. var message = "The year is" + year;
复制代码

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

  1. alert ("10" + 20);
  2. alert (10 + 20);
复制代码

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

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

  1. var year = 2010;
  2. var message = "The year is";
  3. message += year;
复制代码

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

  1. alert(message);
复制代码
条件语句

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

  1. if(condition) {
  2. statements;
  3. }
复制代码

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

  1. if(1 > 2) {
  2. alert("The world has gone mad!")
  3. }
复制代码

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

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

  1. if(1 > 2) alert("The world has gone mad!");
复制代码

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

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

  1. if(1 > 2) {
  2. alert("The world has gone mad!")
  3. } else {
  4. alert("All is well with the world")
  5. }
复制代码

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

比较操作符

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

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

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

  1. var my_mood = "happy";
  2. var your_mood = "sad";
  3. if(my_mood = your_mood) {
  4. alert("We both feel the same.")
  5. }
复制代码

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

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

  1. var my_mood = "happy";
  2. var your_mood = "sad";
  3. if(my_mood == your_mood) {
  4. alert("We both feel the same.")
  5. }
复制代码

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

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

  1. if(my_mood != your_mood) {
  2. alert("We're feeling different moods.")
  3. }
复制代码

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

  1. var a = false;
  2. var b = "";
  3. if(a == b) {
  4. alert("a equals b");
  5. }
复制代码

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

  1. var a = false;
  2. var b = "";
  3. if(a === b) {
  4. alert("a equals b");
  5. }
复制代码

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

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

逻辑操作符

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

  1. if ( num >= 5 && num <= 10 ) {
  2. alert("The number is in the right range.")
  3. }
复制代码

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

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

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

  1. if ( num > 10 || num < 5 ) {
  2. alert("The number is not in the right range")
  3. }
复制代码

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

  1. if ( !(1 > 2) ) {
  2. alert("All is well with the world");
  3. }
复制代码

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

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

  1. if ( !(num > 10 || num < 5) ) {
  2. alert("The number is in the right range.")
  3. }
复制代码


回复

使用道具 举报