文章目录
前言
本文主要介绍JavaScript小白基础JavaScript条件语句和JavaScrip类型转换的基本简单内容
提示:以下是本篇文章正文内容,下面案例可供参考
一、JavaScript条件语句
1、if…Else 语句
在 JavaScript 中,我们可使用以下条件语句:
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
if 语句语法
if (condition)
{
当条件为 true 时执行的代码
}
if…else 语句
请使用 if…else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
if…else if…else 语句
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
2、JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
default 关键词
请使用 default 关键词来规定匹配不存在时做的事情:
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
3、JavaScript for 循环
循环可以将代码块执行指定的次数。
使用for循环
for(var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
For 循环
下面是 for 循环的语法:
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
同时我们还可以省略语句 1(比如在循环开始前已经设置了值时):
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
语句 3 也可以省略(比如当循环内部有相应的代码时):
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>For/In 循环</title>
</head>
<body>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
4、JavaScript while 循环
while 循环
while 循环会在指定条件为真时循环执行代码块。
语法
while (条件)
{
需要执行的代码
}
实例
本例中的循环将继续运行,只要变量 i 小于 5:
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
5、do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
语法
do
{
需要执行的代码
}
while (条件);
实例
下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
JavaScript break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
break 语句
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
由于这个 if 语句只有一行代码,所以可以省略花括号:
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + "The number is " + i + "<br>";
}
continue 语句
continue 语句中断当前的循环中的迭代,然后继续循环下一个迭代。 以下例子在值为 3 时,直接跳过:
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
JavaScript 标签
break 和 continue 语句仅仅是能够跳出代码块的语句。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
cars=["BMW","Volvo","Saab","Ford"];
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>");
}
二、JavaScript 类型转换
1、JavaScript 数据类型
在 JavaScript 中有 6 种不同的数据类型:
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型:
- Object
- Date
- Array
2 个不包含任何值的数据类型:
- null
- undefined
typeof 操作符
我们可以使用 typeof 操作符来查看 JavaScript 变量的数据类型
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是 返回 object。
2、constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数。
实例
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
</head>
<body>
<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>
JavaScript 变量可以转换为新变量或其他数据类型:
1.通过使用 JavaScript 函数
2.通过 JavaScript 自身自动转换
3、将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字,字母,变量,表达式:
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
Number 方法 toString() 也是有同样的效果
x.toString()
(123).toString()
(100 + 23).toString()
4、将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
5、将日期转换为字符串
全局方法 String() 可以将日期对象转换为字符串。
String(new Date())
Date 方法 toString() 也有相同的效果。
obj = new Date()
obj.toString()
6、将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
将布尔值转换为数字
将日期转换为数字
自动转换类型
当 JavaScript 尝试操作一个 “错误” 的数据类型时,会自动转换为 “正确” 的数据类型。
以下输出结果不是你所期望的:
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法
总结
提示:这里对文章进行总结:
以上就是JavaScript小白基础的JavaScript条件语句和JavaScrip类型转换的基本内容,本文仅仅简单介绍了JavaScript的简单语法和一些使用,之后是JavaScript小白基础(3)