![JavaScript+jQuery前端开发基础教程(微课版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/443/24982443/b_24982443.jpg)
2.1 数据类型和变量
程序中最基础的元素就是数据和变量。数据类型决定了程序如何存储和处理数据,变量则是数据的“存储仓库”。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-27-002.jpg?sign=1738835719-pWYFycPRtsWlYDgXQ18p99PFf55eQGXZ-0-7973fb5479082c4d724482984ed634f1)
数据类型和变量
2.1.1 数据类型
JavaScript有3种基本数据类型:数值类型(number)、字符串类型(string)和布尔类型(boolean)。
1. 数值型常量
数值型常量可分为整型常量和实型常量。
整数可使用十进制、八进制和十六进制表示。
十进制是人们常用的计数进制,使用0~9之间的数码表示数值。
八进制整数以数字0开头,使用0~7之间的数码表示数值,例如05、010、017。
十六进制数以0x或0X开头,使用0~9、a~f、A~F之间的数码表示数值,例如0x5、0x1F。
在Firefox浏览器控制台中输入各种进制数据,输出为对应的十进制数,如图2-1所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-27-003.jpg?sign=1738835719-alWLD87chNPtviEGLLxD9pBoWKRo4ZF3-0-99f41195e9048a46902c1fa5b4ad70d7)
图2-1 在浏览器控制台输入各种进制数据
实型常量指包含小数的数值,例如2.25、1.7。如果整数部分为0,JavaScript允许省略小数点前面的0,如0.25可书写为.25。
可用科学计数法表示实数,如1.25e-3、2.5E2。
JavaScript有几个特殊的数值。
• Infinity:Infinity表示正无穷大,-Infinity表示负无穷大。在数值除以0时就会出现无穷大。当一个值超出JavaScript的表示范围时,其结果就是无穷大。
• NaN:意思为“非数字”——Not a Number,表示数值运算时出现了错误或者未知结果。例如,0除以0的结果为NaN。
• Number.MAX_VALUE:最大数值。
• Number.MIN_VALUE:最小数值。
• Number.NaN:NaN。
• Number.POSITIVE_INFINITY:Infinity。
• Number.NEGATIVE_INFINITY:-Infinity。
【例2-1】 输出各种数值常量。源文件:02\test2-1.html。
… <body> <script> document.write("输出整数常量:<br>") document.write("十进制100:") document.write(100) document.write("<br>八进制0100:") document.write(0100) document.write("<br>十六进制0x100:") document.write(0x100) document.write("<p>输出浮点数常量:<br>") document.write(125.25) document.write("<br>1.2e5:") document.write(1.2e5) document.write("<br>1.2E-5:") document.write(1.2E-5) document.write("<p>输出特殊常量:") document.write("<br>1/0:") document.write(1/0) document.write("<br>-1/0:") document.write(-1/0) document.write("<br>0/0:") document.write(0 / 0) document.write("<br>Number.MAX_VALUE:") document.write(Number.MAX_VALUE) document.write("<br>Number.MIN_VALUE:") document.write(Number.MIN_VALUE) document.write("<br>Number.NaN:") document.write(Number.NaN) document.write("<br>POSITIVE_INFINITY:") document.write(Number.POSITIVE_INFINITY) document.write("<br>Number.NEGATIVE_INFINITY:") document.write(Number.NEGATIVE_INFINITY) </script> </body> </html>
浏览器中的输出结果如图2-2所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-28-002.jpg?sign=1738835719-gm1WPXkumZ5P3wKeOIGWcaEcf54mUq0g-0-b2e3f1942acaaf27820b3982939fd648)
图2-2 输出数值常量
2. 字符串常量
字符串常量指用英文的双引号(")或单引号(')括起来的一串字符,如"Java"、'15246'。
只能成对使用单引号或双引号作为字符串定界符,不能一个单引号一个双引号。如果需要在字符串中包含单引号或双引号,则应用另一个作为字符串定界符或者使用转义字符。例如,"I like 'JavaScript'"。
字符串中可以使用转义字符,转义字符以“\”开始。例如,“\n”表示换行符,“\r”表示回车符。表2-1列出了JavaScript中的转义字符。
表2-1 JavaScript中的转义字符
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-29-0.jpg?sign=1738835719-EdlM6i8HLE67nA21UXkfFIXUNbVG5zNa-0-12293beef16d65c7422b084109fb2196)
提示
在浏览器中,退格符、换行符、回车符和制表符等控制字符起不到应有的作用。例如,HTML的<br>标记才能在浏览器中起到换行作用。
【例2-2】 输出各种字符串。源文件:02\test2-2.html。
… <body> <script> document.write("输出字符串:<br>") document.write("开始学'JavaScript'<br>") document.write("开始学\"JavaScript\"<br>") document.write("<br>八进制字符\\101:\101") document.write("<br>十六进制字符\\x45:\x45") document.write("<br>十六进制字符\\u0045:\u0045") </script> </body> </html>
浏览器中的输出结果如图2-3所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-29-005.jpg?sign=1738835719-Klh182jueqMvzPlQeMBkqCfvbyJEj16o-0-44754b6d26c9ea7bcbebcc02ca017a80)
图2-3 输出字符串
3. 布尔型常量
布尔型常量只有两个:true和false(注意必须小写)。
4. null
null在JavaScript中表示空值、什么也没有。
5. undifined
用var声明一个变量后,其默认值为undifined。例如:
var a document.write(a) //输出结果为undifined
在浏览器控制台中测试输出,如图2-4所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-30-002.jpg?sign=1738835719-oWPnJRMNN6MZR4vb1SmLp8KBjxSIErQy-0-254fad06b72062b9c9a59311b3154fe3)
图2-4 输出undifined
2.1.2 变量
变量用于在程序中存储数据,具有数据类型和作用范围。
1. 变量声明
JavaScript要求变量在使用之前必须进行声明(也可称为定义)。例如:
var a,b
该语句声明了两个变量a和b。
可以在声明的同时给变量赋值。例如:
var a =100,b=200
“=”表示赋值。
一种特殊情况是直接给一个未声明的变量进行赋值。例如:
ab = 100
此时,JavaScript会隐式地对变量ab进行声明。
JavaScript允许重复声明变量。例如:
var a = 100 var a = "abc"
重复声明时,如果没有为变量赋值,则变量的值不变。例如:
var a = 100 var a //a的值还是100
2. 变量的数据类型
JavaScript是一种弱类型语言,即不强制变量的数据类型。存入变量的数据决定其数据类型。可以给一个变量赋不同类型的值。
【例2-3】 为变量赋值不同类型的数据,测试变量数据类型。源文件:02\test2-3.html。
… <body> <script> var x = 123 //将数值存入x document.write("x = ") document.write(x) document.write(" x的数据类型:") document.write(typeof (x)) x = "abc" //将字符串存入x document.write("<br>x = ") document.write(x) document.write(" x的数据类型:") document.write(typeof (x)) x = true //将布尔值存入x document.write("<br>x = ") document.write(x) document.write(" x的数据类型:") document.write(typeof (x)) </script> </body> </html>
浏览器中的输出结果如图2-5所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-31-002.jpg?sign=1738835719-OI0m2wAoNpQabsOQRxMR98FJ94kKtmvP-0-9f003b0aa3e994fdcccc598a8536327a)
图2-5 给变量赋值不同类型的数据
3. 变量的作用范围
作用范围是变量可使用的范围。根据作用范围可将变量分为两种:全局变量和局部变量。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-31-003.jpg?sign=1738835719-0vVdDiQtFvDrit5FyoRuhOZ2TtvOVoth-0-0bc71e9307a857801d28c9d494d614e0)
局部变量和全局变量
全局变量指在所有函数外部声明的变量,可在当前文档中的所有脚本中使用。局部变量则是在函数内部声明的变量,只能在函数内部使用。函数参数也是一种局部变量。
如果一个局部变量和全局变量同名,则函数内部的局部变量将屏蔽全局变量。
给未声明的变量赋值时,JavaScript默认将其声明为全局变量。即使变量在函数内部使用,只要没有使用var声明,JavaScript也会将其声明为全局变量。
【例2-4】 使用全局变量和局部变量。源文件:02\test2-4.html。
… <body> <script> var a, b; //声明两个全局变量 a = 1 b = 2 function test() { var a //声明同名局部变量a document.write("在函数中输出各个变量值:") document.write("<br>a = " + a) //输出局部变量a,此时a还未赋值 document.write("<br>b = " + b) //输出全局变量b a = 100 //为局部变量a赋值 b = 200 //为全局变量b赋值 c = 300 //为声明的变量赋值,c为全局变量 } test() //调用函数 document.write("<p>调用函数后输出各个变量值:") document.write("<br>a = " + a) //输出全局变量a document.write("<br>b = " + b) //输出全局变量b document.write("<br>c = " + c) //输出全局变量c </script> </body> </html>
浏览器中的输出结果如图2-6所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-32-003.jpg?sign=1738835719-sQSkiC6MT1xgNerphupu4H9YhIJL5Bhu-0-a7c6c68b34ea4a27be294dd5d32f0453)
图2-6 使用全局变量和局部变量
修改test2-4.html,在函数中添加一条局部变量声明语句,然后在调用函数后尝试使用该变量。代码如下。
…
<body>
<script>
var a, b; //声明两个全局变量
a = 1
b = 2
function test() {
var a //声明同名局部变量a
document.write("在函数中输出各个变量值:")
document.write("<br>a = " + a) //输出局部变量a,此时a还未赋值
document.write("<br>b = " + b) //输出全局变量b
a = 100 //为局部变量a赋值
b = 200 //为全局变量b赋值
c = 300 //为声明的变量赋值,c为全局变量
var d=400 //声明局部变量d
}
test() //调用函数
document.write("<p>调用函数后输出各个变量值:")
document.write("<br>d = " + d) //试图使用局部变量d,出错
document.write("<br>a = " + a) //输出全局变量a
document.write("<br>b = " + b) //输出全局变量b
document.write("<br>c = " + c) //输出全局变量c
</script>
</body>
</html>
浏览器通常会在脚本出错时停止执行脚本,同时停止加载后继HTML代码。可在打开开发人员工具后,刷新页面,在控制台窗口中查看脚本错误信息,如图2-7所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-32-002.jpg?sign=1738835719-frRexypF2NGtHz61GlM60mEecmyZAeTk-0-a2b9107a17e2893d27d5c91fe59bd71a)
图2-7 在控制台窗口中查看脚本错误信息
错误信息显示脚本运行到“document.write("<br>d = " + d)”语句时出错,前面的代码都正确执行了,浏览器显示了已输出内容。这也说明了JavaScript是解释型的,浏览器按照先后顺序依次执行。先执行的语句,其输出结果显示到了浏览器中。
若使用IE浏览器打开test2-4.html,浏览器会打开对话框提示脚本错误,如图2-8所示。
![](https://epubservercos.yuewen.com/07F57D/13311757205191006/epubprivate/OEBPS/Images/48693-00-33-002.jpg?sign=1738835719-baLOA4USe2IIBVFZyP6W1aDLHS1k25hJ-0-dbcd9b2e0a35223d0012ec74c2176d13)
图2-8 IE浏览器提示脚本错误