一、while 循环
1、while 循环会在指定条件为真时循环执行代码块。
语法:
while (条件)
{
需要执行的代码
}
<button onclick="myFunction()">点击</button>
<P id="demo"></P>
<script type="text/javascript">
function myFunction(){
var x="",i=0;
while(i<5){
x=x+"该数字为 "+i+"<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
2、do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
语法:
do
{
需要执行的代码
}
while (条件);
<button onclick="myFunction()">点击</button>
<P id="demo"></P>
<script type="text/javascript">
function myFunction(){
var x="",i=0;
do{
x=x+"该数字为 "+i+"<br>";
i++;
}
while(i<5)
document.getElementById("demo").innerHTML=x;
}
</script>
3、比较 for 和 while
二、Break 和 Continue 语句
1、break 语句可用于跳出循环。
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="",i=0;
for(;i<10;i++){
if(i==3){
break;
}
x=x+"该数字为 "+i+"<br>"
}
document.getElementById("demo").innerHTML=x;
}
</script>
2、continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
<script type="text/javascript">
function myFunction(){
var x="",i=0;
for(;i<10;i++){
if(i==3){
continue;
}
x=x+"该数字为 "+i+"<br>"
}
document.getElementById("demo").innerHTML=x;
}
</script>
3、JavaScript 标签
需标记 JavaScript 语句,语句之前加上冒号:
label:
statements
break 和 continue 语句仅仅是能够跳出代码块的语句。
break labelname;
continue labelname;
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
<script type="text/javascript">
cars=["a","b","c","d"];
list:{
document.write(cars[0]+"<br>");
document.write(cars[1]+"<br>");
document.write(cars[2]+"<br>");
break list;
document.write(cars[3]+"<br>");
document.write(cars[4]+"<br>");
document.write(cars[5]+"<br>");
}
</script>
三、 typeof, null, 和 undefined
1、typeof 操作符
<script type="text/javascript">
document.getElementById("demo").innerHTML=
typeof "John"+"<br>"+typeof 3.14+"<br>"+typeof false +"<br>"+typeof [1,2,3,4]+"<br>"+typeof {name:'john',age:34};
</script>
2、在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
设置为 null 来清空对象
<script type="text/javascript">
var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};
var person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
设置为 undefined 来清空对象
<script type="text/javascript">
var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};
var person = undefined;
document.getElementById("demo").innerHTML = typeof person;
</script>
3、在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
<script type="text/javascript">
var person; // 值为 null(空), 但仍然是一个对象
document.getElementById("demo").innerHTML=person+"<br>"+typeof person;
</script>
<script type="text/javascript">
var person = {firstName:"John",lasrName:"Doe",age:50,eyeColor:"blue"};
var person=undefined;// 值为 undefined, 类型是undefined
document.getElementById("demo").innerHTML=person+"<br>"+typeof person;
</script>
4、Undefined 和 Null 的区别
<script type="text/javascript">
document.getElementById("demo").innerHTML=
typeof undefined+"<br>"+typeof null + "<br>"+(null===undefined)+"<br>"+(null==undefined);
</script>
四、类型转换
1、Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
在 JavaScript 中有 5 种不同的数据类型:
string
number
boolean
object
function
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
null
undefined
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script>
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
2、constructor 属性返回所有 JavaScript 变量的构造函数。
<script>
document.getElementById("demo").innerHTML =
"john".constructor + "<br>" +
(3.14).constructor + "<br>" +
false.constructor + "<br>" +
[1,2,3,4].constructor + "<br>" +
{name:'john', age:34}.constructor + "<br>" +
new Date().constructor + "<br>" +
function () {}.constructor;
</script>
3、使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):
<script type="text/javascript">
var myDate=new Date();
document.getElementById("demo").innerHTML=isDate(myDate);
function isDate(mydate){
return myDate.constructor.toString().indexOf("Date")>-1;
}
</script>
4、JavaScript 类型转换
JavaScript 变量可以转换为新变量或其他数据类型:
通过使用 JavaScript 函数
通过 JavaScript 自身自动转换
5、将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字,字母,变量,表达式
<script type="text/javascript">
var x=123;
document.getElementById("demo").innerHTML=
String(x)+"<br>"+String(123)+"<br>"+String(100+23);
// String(X)将变量 x 转换为字符串并返回
// String(123)将数字 123 转换为字符串并返回
// String(100+23)将数字表达式转换为字符串并返回
</script>
6、Number 方法 toString() 也是有同样的效果。
<script type="text/javascript">
var x=123;
document.getElementById("demo").innerHTML=
x.toString()+"<br>"+(123).toString()+"<br>"+(100+23).toString();
</script>
7、将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
8、将日期转换为字符串
全局方法 String() 可以将日期转换为字符串。
Date 方法 toString() 也有相同的效果。
9、将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
10、一元运算符 +
<script type="text/javascript">
function myFunction(){
var y="5";
var x= + y;
document.getElementById("demo").innerHTML=typeof y +"<br>"+typeof x;
}
</script>
11、将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1
12、将日期转换为数字
d = new Date();
Number(d) // 返回 1404568027739
d = new Date();
d.getTime() // 返回 1404568027739
13、自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
14、自动转换为字符串
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
// if myVar = 123 // toString 转换为 "123"
// if myVar = true // toString 转换为 "true"
// if myVar = false // toString 转换为 "false"