JavaScript---学习三：js运算符和流程控制语句
JavaScript---学习三：js运算符和流程控制语句
- 一、js运算符
-
- 一元操作符
-
- 递增和递减操作符
- 加法和减法运算符
- 布尔运算符
- 等于运算符
-
- 相等（==）和不相等（！=）
- 全等和不全等
- 关系操作符
- 条件赋值逗号运算符
-
- 条件操作符
- 赋值操作符
- 逗号操作符
- 二、js流程控制语句
-
- 顺序执行
- If-Else语句
- For循环语句
- While循环语句
- Switch语句
- Lable中的Continue和Break语句
一、js运算符
一元操作符
只能操作一个值的操作符叫做一元操作符。一元操作符是JS 中最简单的操作符。
递增和递减操作符
递增和递减操作符直接借鉴自C，而且各有两个版本：前置型和后置型。
var age = 29;
var anotherAge = --age + 2;
alert(age);//输出 28
alert(anotherAge);//输出30
这个例子中变量 anotherAge的初始值等于变量age的值前置递减之后加2。由于先执行了减法操作，age的值变成了28，所以再加上2的结果就是30。由于前置递增和递减操作与执行语句的优先级相等，因此整个语句会从左至右被求值。
在应用于布尔值false时，先将其转换为0再执行加减1的操作。布尔值变量变成数值变量。在应用于布尔值true时，先将其转换为1再执行加减1的操作。布尔值变量变成数值变量。在应用于浮点数值时，执行加减1的操作。在应用于对象时，先调用对象的valueOf()方法以取得一个可供操作的值。然后对该值应用前述规则。如果结果是NaN，则在调用 toString()方法后再应用前述规则。对象变量变成数值变量。
以下示例展示了上面的一些规则：
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf : function() {
return -1;
}
};
s1++; // 值变成数值 3
s2++; // 值变成 NaN
b++; // 值变成数值 1
f--; // 值变成 0.10000000000000009（由于浮点舍入错误所致）
o--; // 值变成数值-2
alert("s1=" + s1);
alert("s2=" + s2);
alert("b=" + b);
alert("f=" + f);
alert("o=" + o);
script>
body>
html>
加法和减法运算符
如果有一个操作数是字符串，要应用如下规则：如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来；如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接起来。如果有一个操作数是对象、数值或布尔值，则调用它们的toString()方法取得相应的字符串值，然后再应用前面关于字符串的规则。对于undefined和null，则分别调用 String()函数并取得字符串"undefined"和"null”。
下面来举几个例子：
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var result1 = 5 + 5; // 两个数值相加
alert(result1); // 10
var result2 = 5 + "5"; // 一个数值和一个字符串相加
alert(result2); // "55"
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var num1 = 5;
var num2 = 10;
var message = "5+10=" + num1 + num2;
alert("The sum of "+ num1 +" + "+ num2+" is "+message);
// 结果是"The sum of 5 and 10 is 5+10=510"
//num1和num2类型转换为字符串
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + (num1 + num2);
alert(message);
//结果是"The sum of 5 and 10 is 15"
//(num1 + num2)告诉解析器先计算其结果
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var result1 = 5 - true; // 4，因为 true 被转换成了 1
var result2 = NaN - 1; // NaN
var result3 = 5 - 3; // 2
var result4 = 5 - ""; // 5，因为"" 被转换成了 0
var result5 = 5 - "2"; // 3，因为"2"被转换成了 2
var result6 = 5 - null; // 5，因为 null 被转换成了 0
alert("result1="+result1);
alert("result2="+result2);
alert("result3="+result3);
alert("result4="+result4);
alert("result5="+result5);
alert("result6="+result6);
script>
body>
html>
布尔运算符
逻辑非操作符（！）
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
alert(!false); // true
alert(!"blue"); // false //非空字符串
alert(!0); // true
alert(!NaN); // true
alert(!""); // true
alert(!12345); // false
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
alert(!!"blue"); //true
alert(!!0); //false
alert(!!NaN); //false
alert(!!""); //false
alert(!!12345); //true
script>
body>
html>
逻辑与操作符（&&）
逻辑或操作符（||）
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var found = true;
var result = (found && someUndefinedVariable); // 这里会发生错误
alert(result); // 这一行不会执行
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var found = false;
var result = (found && someUndefinedVariable); // 不会发生错误
alert(result); // 会执行（"false"）
script>
body>
html>
等于运算符
相等（==）和不相等（！=）
在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：
1、如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为0，而true 转换为 1；
2、如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
3、如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较；
4、这两个操作符在进行比较时则要遵循下列规则。null 和 undefined 是相等的。要比较相等性之前，不能将null 和 undefined 转换成其他任何值；
6、如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符返回true。重要提示：即使两个操作数都是NaN，相等操作符也返回 false；因为按照规则，NaN不等于NaN；
7、如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true；否则，返回false。
全等和不全等
除了在比较之前不转换操作数之外，全等和不全等操作符与相等和不相等操作符没有什么区别。全等操作符由3个等于号(===) 表示，它只在两个操作数未经转换就相等的情况下返回true，如下面的例子所示：
var result1=("55"==55);//true
因为转换后相等
var result2 = ("55"===55); //false
因为不同的数据类型不相等
在这个例子中，第一个比较使用的是相等操作符比较字符串"55”和数值55，结果返回了true。
这是因为字符串"55’'先被转换成了数值55，然后再与另一个数值55进行比较。第二个比较使用了全等操作符以不转换数值的方式比较同样的字符串和值。在不转换的情况下，字符串当然不等于数值，因此结果就是false。不全等操作符由一个叹号后跟两个等于号(！==)表示，它在两个操作数未经转换就不相等的情况下返回true。
例如：
var result1=("55"！=55);//false，因为转换后相等
var result2=("55"！==55);//true，因为不同的数据类型不相等
在这个例子中，第一个比较使用了不相等操作符，而该操作符会将字符串"55"转换成55，结果就与第二个操作数(也是55)相等了。而由于这两个操作数被认为相等，因此就返回了false。第二个比较使用了不全等操作符。假如我们这样想：字符串55与数值55 不相同吗?那么答案一定是：是的(true)。
总结：null==undefined 会返回true，因为他们是类似的值。
null===undefined 会返回false，因为他们是不同类型的值。
DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
script>
head>
<body>
<h1>My Web Pageh1>
<p id="demo">A Paragraph.p >
<button type="button" onclick="myFunction()">点击这里button>
body>
html>
关系操作符
小于(<)、大于(>)、小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比较，比较的规则与我们在数学课上所学的一样。这几个操作符都返回一个布尔值，如下面的例子所示：
var result1 = 5 > 3;//true
var result2 = 5 < 3;//false
与JS中的其他操作符一样，当关系操作符的操作数使用了非数值时，也要进行数据转换或完成某些奇怪的操作。以下就是相应的规则。如果两个操作数都是数值，则执行数值比较。如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。
如果一个操作数是对象，则调用这个对象的 valueOf()方法，用得到的结果按照前面的规则执行比较。如果对象没有valueOf()方法，则调用toString()方法，并用得到的结果根据前面的规则执行比较。如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。
条件赋值逗号运算符
条件操作符
条件操作符应该算是 ECMAScript中最灵活的一种操作符了，而且它遵循与Java 中的条件操作符相同的语法形式，如下面的例子所示：
variable=boolean_expression?true_value:false_value;
本质上，这行代码的含义就是基于对 boolean_expression 求值的结果，决定给变量 variable赋什么值。如果求值结果为true，则给变量 variable 赋true_value值；如果求值结果为false，则给变量variable赋false_value值。再看一个例子：
var max=(num1>num2)?num1:num2;
在这个例子中，max中将会保存一个最大的值。这个表达式的意思是：如果 num1 大于num2(关系表达式返回true)，则将num1的值赋给max;如果 num1小于或等于 num2(关系表达式返回false)，则将num2的值赋给max。
赋值操作符
简单的赋值操作符由等于号(=)表示，其作用就是把右侧的值赋给左侧的变量，如下面的例子所示：
var num =10;
在等于号(=)前面再添加乘性操作符、加性操作符等。
逗号操作符
使用逗号操作符可以在一条语句中执行多个操作，如下面的例子所示：
var num1=1, num2=2, num3=3;
逗号操作符多用于声明多个变量；但除此之外，逗号操作符还可以用于赋值。在用于赋值时，逗号操作符总会返回表达式中的最后一项，如下面的例子所示：
var num=(5,1, 4,8,0);// num的值为0
由于0是表达式中的最后一项，因此num的值就是0。虽然逗号的这种使用方式并不常见，但这个例子可以帮我们理解逗号的这种行为。
二、js流程控制语句
顺序执行
DOCTYPE html>
<html>
<body>
<h1>My Web Pageh1>
<p id="demo">A Paragraph.p >
<div id="myDIV">A DIV.div>
<script>
document.getElementById("demo").innerHTML = "Hello World";
document.getElementById("myDIV").innerHTML = "How are you?";
//向id="myDIV"的HTML元素输出文本”How are you?“
script>
body>
html>
下面的例子可以操作两个HTML元素
DOCTYPE html>
<html>
<body>
<h1>My Web Pageh1>
<p id="myPar">I am a paragraph.p >
<div id="myDiv">I am a div.div>
<p>
<button type="button" onclick="myFunction()">点击这里button>
p >
<script>
function myFunction() {
document.getElementById("myPar").innerHTML = "Hello World";
document.getElementById("myDiv").innerHTML = "How are you?";
}
script>
<p>当您点击上面的按钮时，两个元素会改变。p >
body>
html>
If-Else语句
DOCTYPE html>
<html>
<body>
<p>点击这个按钮，获得基于时间的问候。p >
<button onclick="myFunction()">点击这里button>
<p id="demo">p >
<script>
function myFunction() {
var x = "";
var time = new Date().getHours();
if (time < 10) {
x = "Good morning";
} else if (time < 20) {
x = "Good day";
} else {
x = "Good evening";
}
document.getElementById("demo").innerHTML = x;
}
script>
body>
html>
For循环语句
DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，将代码块循环五次：p >
<button onclick="myFunction()">点击这里button>
<p id="demo">p >
<script>
function myFunction() {
var x = "";
for (var i = 0; i < 5; i++) {
x = x + "The number is " + i + "
";
}
document.getElementById("demo").innerHTML = x;
}
script>
body>
html>
DOCTYPE html>
<html>
<body>
<script>
cars = [ "BMW", "Volvo", "Saab", "Ford" ];
for (var i = 0, l = cars.length; i < l; i++) {
document.write(cars[i] + "
");
}
script>
body>
html>
While循环语句
DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。p >
<button onclick="myFunction()">点击这里button>
<p id="demo">p >
<script>
function myFunction() {
var x = "", i = 0;
while (i < 5) {
x = x + "The number is " + i + "
";
i++;
}
document.getElementById("demo").innerHTML = x;
}
script>
body>
html>
Switch语句
DOCTYPE html>
<html>
<body>
<p>点击下面的按钮来显示今天是周几：p >
<button onclick="myFunction()">点击这里button>
<p id="demo">p >
<script>
function myFunction() {
var x;
var d = new Date().getDay();
switch (d) {
case 0:
x = "Today it's Sunday";
break;
case 2:
x = "Today it's Tuesday";
break;
case 3:
x = "Today it's Wednesday";
break;
case 4:
x = "Today it's Thursday";
break;
case 5:
x = "Today it's Friday";
break;
case 6:
x = "Today it's Saturday";
break;
default:
x = "Today it's Monday";
}
document.getElementById("demo").innerHTML = x;
}
script>
body>
html>
Lable中的Continue和Break语句
对JavaScript语句进行标记。如需标记JavaScript语句，请在语句之前加上冒号：label:语句break和continue语句仅仅是能够跳出代码块的语句。语法
break labelname;
continue labelname;
continue语句(带有或不带标签引用)只能用在循环中。break语句(不带标签引用)，只能用在循环或switch中。通过标签引用，break语句可用于跳出任何JavaScript代码块：
DOCTYPE html>
<html>
<body>
<script>
cars = [ "BMW", "Volvo", "Saab", "Ford" ];
list: {
document.write(cars[0] + "
");
document.write(cars[1] + "
");
document.write(cars[2] + "
");
break list;
document.write(cars[3] + "
");
document.write(cars[4] + "
");
document.write(cars[5] + "
");
}
script>
body>
html>