JavaScript中的判定
2.1. JavaScript中的判定
判定赋予了程序智能。不使用它你就不能写出一个好的程序，不管你是创建游戏、校验密码、根据用户前面的做出的选择给予用户一组选择，还是一些其他的情况。
判定是以条件语句为基础的，条件语句是一种值或真或假的简单语句。这就是基本数据类型中的布尔（Boolean）数据类型该应用的地方了。循环是进行判定的另一个重要工具，例如，可以使你从头到尾地循环用户的输入或循环一个数组，并对应的进行决策。
2.1.1. 逻辑和比较运算符
有两组主要的运算符，我们下面会学到：
l 数据比较运算符：比较操作数并返回布尔（Boolean）值。
l 逻辑运算符:对多于一种的情况的进行测试。
我们会先看一下比较运算符。
2.1.1.1. 数据比较
表2-3列出了一些最常用的比较运算符。
表2-3. JavaScript中的比较
|
运算符 |
描述 |
例子 |
|
== |
检查左边和右边的操作数是否相等 |
123 == 234 返回假值。 123 == 123 返回真值。 |
|
!= |
检查左边的操作数是否不等于右边的操作数 |
123 != 123 返回假值。 123 != 234 返回真值。 |
|
> |
检查左边的操作书是否大于右边的操作数 |
123 > 234 返回假值。 234 > 123 返回真值。 |
|
>= |
检查左边的操作书是否大于或等于右边的操作数 |
123 >= 234 返回假值。 123 >= 123 返回真值。 |
|
< |
检查左边的操作书是否小于右边的操作数 |
234 < 123 返回假值。 123 < 234 返回真值。 |
|
<= |
检查左边的操作书是否小于或等于右边的操作数 |
234 <= 123 返回假值。 234 <= 234 返回真值。 |
n 警告：小心这个==相等运算符：它太容易了，以至于在一个脚本中常由于会被误用为赋值运算符：=，而产生许多错误。
这些运算符都使用于字符串数据类型和数值类型，并且是区分大小写的：
<html>
<body>
<script type="text/javascript">
document.write( "Apple" == "Apple" )
document.write( "<br />" );
document.write( "Apple" < "Banana" )
document.write( "<br />" );
document.write( "apple" < "Banana" )
</script>
</body>
</html>
下面是你会得到的结果：
true
true
false
当计算一个字符串比较的表达式时，JavaScript解释器会依次比较两个字符串中每个字符的ASCII码—每个字符串的第一个字符，然后是第二个字符，依次类推。大写的A在ASCII中表示65，B 表示 66， C表示 67，依次类推。 计算这个表达式"Apple" < "Banana",JavaScript解释器使用每个字符中的第一个字符的ASCII码来进行比较：65 < 66, 因此 A 排在前面，这个比较是真值。当检验这个表达式 "apple" < "Banana"的时候，JavaScript解释器做了同样的事情；然而，小写字母 a 的ASCII码是97，因此这个表达式"a" < "B"转变为97 < 66，它的值是假。你可以使用<、 <=、 >、 >= 运算符来进行字母顺序的比较。如果你需要确保所有的字母都是同样的大写或小写，你可以使用String对象的toUpperCase()和toLowerCase()方法。比较运算符和数字运算符是一样的，都可以使用变量。如果我们想按字母顺序比较apple和Banana ，我们可以这样做：
<html>
<body>
<script type="text/javascript">
var string1 = "apple";
var string2 = "Banana";
string1 = string1.toLowerCase( );
string2 = string2.toLowerCase( );
document.write( string1 < string2 )
</script>
</body>
</html>
可是在你使用等号运算符比较String对象的时候，有一些细节需要注意。试一下这个：
<html>
<body>
<script type="text/javascript">
var string1 = new String( "Apple" );
var string2 = new String( "Apple" );
document.write( string1 == string2 )
</script>
</body>
</html>
你会得到一个返回false值。事实上，我们在上面比较的是两个字符串对象，而不是两个基本类型的字符串包含的字符，返回的false结果业表明，即使两个字符串对象持有相同的字母，它们也不是同一个对象。
如果你确实需要比较两个对象持有的字符串，那么你可以使用valueOf()方法来对数据值进行比较：
<html>
<body>
<script type="text/javascript">
var string1 = new String( "Apple" );
var string2 = new String( "Apple" );
document.write( string1.valueOf() == string2.valueOf() );
</script>
</body>
</html>
2.1.1.2. 逻辑运算符
有时候你会需要把多个比较放到一个条件组中。你也许想检查用户输入的信息是否有意义，或者根据用户前面的回答，限制他们可以选择的数据项。你可以使用表2-4中的逻辑运算符来完成这样的功能。
表2-4。 JavaScript中的逻辑运算符
|
符号 |
运算符 |
说明 |
例子 |
|
&& |
And |
两个条件都必须为真。 |
123 == 234 && 123 < 20 (false) 123 == 234 && 123 == 123 (false) 123 == 123 && 234 < 900 (true) |
|
|| |
Or |
其中一个或两个必须为真。 |
123 == 234 || 123 < 20 (false) 123 == 234 || 123 == 123 (true) 123 == 123 || 234 < 900 (true) |
|
! |
Not |
逻辑取反。 |
!(123 == 234) (true) !(123 == 123) (false) |
一旦求出了数据的值，我们需要能够根据这个输出结果进行判定选择。这正是条件语句和循环语句可以发挥作用的地方。你会发现这章中我们学习的运算符会经常被用到一个条件语句或循环语句中。
2.1.2. 条件语句
if...else 结构被用来测试条件，格式如下：
if ( condition ) {
// Execute code in here if condition is true
} else {
// Execute code in here if condition is false
}
// After if/else code execution resumes here
如果这个条件测试为真，紧跟if后面的大括号中的代码就会被执行，但如果它不为真则不会执行。你也可以使用else语句，创建在if条件不被满足的情况下应该执行的代码块。
我们来改进一下在这一章的前面建立的货币转换程序，创建一个循环来处理用户的非数值输入：
<html>
<body>
<script type="text/javascript">
var euroToDollarRate = 0.872;
// Try to convert the input into a number
var eurosToConvert = Number( prompt( "How many Euros➥
do you wish to convert", "" ) );
// If the user hasn't entered a number, then
// will be returned
if ( isNaN( eurosToConvert ) ) {
// Ask the user to enter a value in numerals
document.write( "Please enter the number in numerals" );
// If
} else {
// and do the conversion as before
var dollars = eurosToConvert * euroToDollarRate;
document.write( eurosToConvert + " euros is " + ➥
dollars + " dollars" );
}
</script>
</body>
</html>
这个if语句使用了isNaN（）函数，它会返回true，如果变量eurosToConvert中的值不是一个数字。
n 注解：记住剂可能地使错误信息友好并且有用。良好的错误信息可以明了的告知用户他们该做什么，这样可以使他们更有耐心的使用程序。
我们使用逻辑运算符和嵌套的if语句，可以创建更夫杂的条件：
<html>
<body>
<script type="text/javascript">
// Ask the user for a number and try to convert the
// input into a number
var userNumber = Number( prompt( "Enter a number between➥
1 and 10", "" ) );
// If the value of userNumber is
// to try again
if ( isNaN( userNumber ) ) {
document.write( "Please ensure a valid number is ➥
entered" );
// If the value is a number but over 10, ask the
//user to try again
} else {
if ( userNumber > 10 || userNumber < 1 ) {
document.write( "The number you entered is not➥
between 1 and 10" );
// Otherwise the number is between 1 and 10 so
// write to the page
} else {
document.write( "The number you entered was " + userNumber );
}
}
</script>
</body>
</html>
我们知道这个数只要是一个数字并且小于10就可以。
注解：注意这段代码的布局。我们对if与else语句以及代码块使用了缩进，所以阅读和理解代码块是从哪里开始和结束的非常容易。使你的代码尽可能得简单明了是非常重要的。
试着阅读一下没有使用缩进和空格的这段代码：
<html>
<body>
<script type="text/javascript">
// Ask for a number using the prompt() function and try to make it a number
var userNumber = Number(prompt("Enter a number between 1 and 10",""));
// If the value of userNumber is
if (isNaN(userNumber)){
document.write("Please ensure a valid number is entered");
}
// If the value is a number but over 10, ask the user to try again
else {
if (userNumber > 10 || userNumber < 1) {
document.write("The number you entered is not between 1 and 10");
}
// Otherwise the number is between 1 and 10, so write to the screen
else{
document.write("The number you entered was " + userNumber);
}
}
</script>
</body>
</html>
它不是不能阅读，但是即使在这个简短的脚本中，也很难分辨出哪个代码块属于if和else语句。在更长的代码中，不一致或不合理的缩进使代码很难读懂，它反过来会留给你更多的错误需要修正且使你的工作不必要地更困难。
你也可以在另一个以if语句开始的else语句的地方使用else if语句， 像这样：
<html>
<body>
<script type="text/javascript">
var userNumber = Number( prompt( "Enter a number between➥
1 and 10", "" ) );
if ( isNaN( userNumber ) ){
document.write( "Please ensure a valid number is➥
entered" );
} else if ( userNumber > 10 || userNumber < 1 ) {
document.write( "The number you entered is not➥
between 1 and 10" );
} else {
document.write( "The number you entered was " + ➥
userNumber );
}
</script>
</body>
</html>
这段代码和前面的代码段完成同样的事情，但是使用了一个else if语句代替一个嵌套的if语句，并且代码少了两行。
2.1.2.1. 跳出一个分支或循环
在我们继续之前需要注意一件事情：你可以使用break语句来中断一个条件语句或循环。它简单地中断了代码块的运行并且使进程调到下一语句。我们会在下一个例子中使用到它。
只要你喜欢，你可以使用许多的if、else和else ifs，尽管你使用太多的话会使你的代码十分复杂。如果在一个代码块中检查一个值有许多可能的条件，那么我们接下来会看到的switch语句将非常的有用。
2.1.3. 测试多个值：switch语句
Switch语句允许我们根据一个变量或表达式的值来在多个代码段之间进行“转换”。下面是一个switch语句的概要格式：
switch( expression ) {
case someValue:
// Code to execute if expression == someValue;
break; // End execution
case someOtherValue:
// Code to execute if expression == someOtherValue;
break; // End execution
case yesAnotherValue:
// Code to execute if expression == yetAnotherValue;
break; // End execution
default:
// Code to execute if no values matched
}
JavaScript 计算switch (expression)的值，然后把它与每个case进行比较。只要发现了一个匹配的项，代码就会在那个位置开始执行，并继续遍历执行所有的case语句直到发现了一个break语句。如果没有一个case语句匹配，包含一个默认的情况常常非常的有用。这对于尽快找出错误发生的地方是个非常有用的工具，例如，我们期望一种情况被满足，但是一个程序缺陷却阻止了了它而没有发生。
case的值可以是任何的数据类型，例如数字或字符串。我们可以根据自己需要选择一个或多个case语句。让我们来看一个简单的例子：
<html>
<body>
<script type="text/javascript">
// Store user entered number between 1 and
var userNumber = Number( prompt( "Enter a number between 1 and 4", "" ) );
switch( userNumber ) {
// If userNumber is 1, write out and carry on
// executing after case statement
case 1:
document.write( "Number 1" );
break;
case 2:
document.write( "Number 2" );
break;
case 3:
document.write( "Number 3" );
break;
case 4:
document.write( "Number 4" );
break;
default:
document.write( "Please enter a numeric value between➥
1 and 4." );
break;
}
// Code continues executing here
</script>
</body>
</html>
试一下。你只会得到自己刚输入的数字或者这个句子“Please enter a numeric value between 1 and 4.”
这个例子也阐明了break语句的重要性。如果我们在每个case语句后不包括break，那么这个代码块中的代码会继续执行直到最后switch的结束。试一下去掉所有的break然后输入2。匹配项后的所有代码都会执行，并给你这样一个输出结果：
Number 2Number 3Number 4Please enter a numeric value between 1 and 4
你可以在switch语句中使用任何合法的表达式，例如一个计算：
switch( userNumber * 100 + someOtherVariable )
也可以在case语句间使用一个或多个语句。
2.1.4. 重复事物：循环
在这一节中，我们会学习如何重复一个代码块只要一组条件为真。举个例子，我们可能需要循环一遍HTML表单中的每个输入或者循环遍历一个数组中的每个元素
2.1.4.1. 重复一个集合多次：for循环
for循环被设计用来循环一个代码块许多次，格式如下：
for( initial-condition; loop-condition; alter-condition ) {
//
// Code to be repeatedly executed
//
}
// After loop completes, execution of code continues here
和条件语句类似，关键字for后紧跟着括号。这次，括号中包含由分号分割的三部分。
第一部分初始化一个变量，它被用来当作保存循环次数的计数器。第二部分检查条件。只要这个条件为真，循环就会继续运行。最后一个部分增加或减少这个在第一部分中创建的计数，在每遍循环之后（事实上你会发现这个之后在编程中很重要）。
例如，看一下这个循环，只要loopCounter小于等于10，它就会继续运行：
for( loopCounter = 1; loopCounter <= 10; loopCounter++ )
只要循环条件为真，循环就会继续执行——正如只要loopCounter小于或等于。一旦它达到了11，这个循环就会终止并且代码的执行会从loop的结束括号后面的下一个语句开始。
让我们来看一个例子，它使用for循环来遍历一个数组。我们会使用一个for循环来遍历一个叫做theBeatle的数组，它使用一个叫loopCounter 的变量。当loopConter的值小于数组的长度时，循环就会继续执行：
<html>
<body>
<script type="text/javascript">
var theBeatles = new Array( "John", "Paul", "George",➥
"Ringo" );
for ( var loopCounter = 0; loopCounter < ➥
theBeatles.length; loopCounter++ ) {
document.write( theBeatles[loopCounter] + "<br>" );
}
</script>
</body>
</html>
这个例子可以运行因为我们使用了一个从零开始计数的数组，在它内面数据项按顺序被添加到索引上。如果我们使用关键字按如下的方式来保存数据项，那么这个循环就不会执行了：
theBeatles["Drummer"] = "Ringo";
在前面我们讲述数组的时候，我强调了Array对象有一个知道数组长度的属性（有多少元素）。当循环遍历数组的时候，如前面的例子，我们使用了数组的名后跟一个点和length作为条件。它阻止了循环数到数组的长度以外去，这样会造成一个“越界”的错误。
JavaScript也支持for..in循环（尽管IE从IE5才开始支持它，但它从NN2就开始到处被用了）。没有使用一个计数器，for...in 循环使用一个访问数组的变量来遍历数组中的每个元素：
<html>
<body>
<script type="text/javascript">
// Initialize theBeatles array and store in a variable
var theBeatles = new Array( );
// Set the values using keys rather than numbers
theBeatles["Drummer"] = "Ringo";
theBeatles["SingerRhythmGuitar"] = "John";
theBeatles["SingerBassGuitar"] = "Paul";
theBeatles["SingerLeadGuitar"] = "George";
var indexKey;
// Write out each indexKey and the value for that
// indexKey from the array
for ( indexKey in theBeatles ) {
document.write( "indexKey is " + indexKey + "<br>" );
document.write( "item value is " + theBeatles[indexKey] + "<br><br>" );
}
</script>
</body>
</html>
在循环的每一遍中，关键字indexKey会与数组中按照同样的顺序使用关键字取出的值一起输出：
indexKey is Drummer
item value is Ringo
indexKey is SingerRhythmGuitar
item value is John
indexKey is SingerBassGuitar
item value is Paul
indexKey is SingerLeadGuitar
item value is George
2.1.4.2. 依据一个条件判定重复执行动作脚本：while循环
目前我们所接触的循环都是从脚本自身的内部获取停止循环的指令。可能存在多次这样的情况，你想让用户决定循环应该何时停止，或者当一个用户决定的条件被满足的时候停止循环。循环 while 和do...while正是设计被用来解决这类问题的。
while循环最简单的形式如下所示：
while ( some condition true ) {
// Loop code
}
括号里的条件可以是你在一个if语句当中可能会使用到的所有。我们按如下的方式来使用代码，它允许用户输入数字并且在输入数字99后停止输入的程序。
<html>
<body>
<script type="text/javascript">
var userNumbers = new Array( );
var userInput = 0;
var arrayIndex = 0;
var message = '';
var total = 0;
// Loop for as long as the user doesn't input 99
while ( userInput != 99 ) {
userInput = prompt( "Enter a number, or 99 to exit",➥
"99" );
userNumbers[arrayIndex] = userInput;
arrayIndex++;
}
message += 'You entered the following:/n';
for ( var i = 0; i < arrayIndex-1; i++ ) {
message += userNumbers[i] + '/n';
total += Number( userNumbers[i] );
}
message += 'Total: ' + total + '/n';
alert( message );
</script>
</body>
</html>
在这里while循环的条件是userInput不等于99，所以只要这个条件为真，循环就会继续。当用户输入99并且条件被检查的时候，它会计算得到假值并且循环会终止。注意用户输入99后，循环不会立即终止，只有当条件在循环的另一遍开始处被再次检查时，循环才会终止。
在while和do...while循环之间，有一个比较小但非常明显的不同之处：while循环在代码执行前检查条件，并且只有在条件为真的情况下才会执行代码块。而do...while在检查条件之前执行代码块，如果条件为真会执行另一遍循环。简而言之， do...while 循环在你知道你希望循环体中的代码在条件检查前至少会被执行一次的情况下是有用的。我们可以如下所示，使用一个do...while循环来写一个我们前面的例子：
<html>
<body>
<script type="text/javascript">
var userNumbers = new Array( );
var message = '';
var total = 0;
// Declare the userInput but don't initialize it
var userInput;
var arrayIndex = 0;
do {
userInput = prompt( "Enter a number, or 99 to exit",➥
"99" );
userNumbers[arrayIndex] = userInput;
arrayIndex++;
} while ( userInput != 99 )
message+='You entered the following:/n';
for ( var i = 0; i < arrayIndex-1; i++ ) {
message += userNumbers[i] + '/n';
total += Number( userNumbers[i] );
}
message += 'Total: ' + total + '/n';
alert( message );
</script>
</body>
</html>
我们不需要初始化userInput，因为循环中的代码在第一次检验它之前已经为它设置了一个值。
2.1.4.3. 继续循环（Continuing the Loop）
你已经看到了，break语句只要用于只要某个特定的事件发生就跳出任一类型的循环。这个continue关键字的工作原理和break类似，可以用来停止循环的执行。可是，continue语句不是直接的跳出循环，而是在下一次循环遍历中使代码重新开始执行。
让我们首先改变一下前面的例子，使用break来达到这样的一种效果，如果用户没有输入一个数字而是输入了其他的，那么这个输入的值不会被记录并且循环会终止。
<html>
<body>
<script type="text/javascript">
var userNumbers = new Array( );
var userInput;
var arrayIndex = 0;
do {
userInput = Number( prompt( "Enter a number, or 99➥
to exit", "99" ) );
// Check that user input is a valid number,
// and if not, break with error msg
if ( isNaN( userInput ) ) {
document.write( "Invalid data entered: please➥
enter a number between 0 and
break;
}
// If break has been activated, code will continue from here
userNumbers[arrayIndex] = userInput;
arrayIndex++;
} while ( userInput != 99 )
// Next statement after loop
</script>
</body>
</html>
现在我们再把它改变一下，使用continue语句，可以不让它跳出循环，而是忽略用户的输入并保持循环。
<html>
<body>
<script type="text/javascript">
var userNumbers = new Array( );
var userInput;
var arrayIndex = 0;
do {
userInput = prompt( "Enter a number, or 99 to exit",➥
"99" );
if ( isNaN( userInput ) ) {
document.write( "Invalid data entered: please ➥
enter a number between 0 and
continue;
}
userNumbers[arrayIndex] = userInput;
arrayIndex++;
} while ( userInput != 99 )
// Next statement after loop
</script>
</body>
</html>
break语句已被continue给替换了，因此在循环中的代码不会被执行了，但是while语句中的条件会被再次执行。如果条件为真，循环的另一个遍历就会被触发执行；否则这个循环就结束了。
使用下面的拇指原则来决定使用哪一个循环结构：
l 如果你想重复一个动作一定的次数，那么使用for循环。
l 当你想一个动作被重复执行直到某个条件被满足的时候，使用while循环。
l 如果你想保证这个动作至少被执行一次，那么使用do...while循环。
