JavaScript学习笔记——基础(2)


前言

本文主要介绍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 1case 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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值