JavaScript基礎(chǔ)語(yǔ)法與數(shù)據(jù)類(lèi)型介紹
一、JavaScript語(yǔ)法
1、區(qū)分大小寫(xiě)
ECMAScript中的一切，包括變量、函數(shù)名和操作符都是區(qū)分大小寫(xiě)的。例如：text和Text表示兩種不同的變量。
2、標(biāo)識(shí)符
所謂標(biāo)識(shí)符，就是指變量、函數(shù)、屬性的名字，或者函數(shù)的參數(shù)。標(biāo)識(shí)符可以是下列格式組合起來(lái)的一個(gè)或多個(gè)字符：
- a、第一個(gè)字符必須是一個(gè)字母，下劃線(_)或一個(gè)美元符號(hào)($).
- b、其他字符可以是字母、下劃線、美元符號(hào)或數(shù)字。
- c、不能把關(guān)鍵字、保留字、true、false和null作為標(biāo)識(shí)符。
例如：myName、Book123等。
3、注釋
ECMAScript使用C風(fēng)格的注釋?zhuān)▎涡凶⑨尯蛪K級(jí)注釋。
示例：
//單行注釋 /* *這是一個(gè)多行 *注釋 */
4、變量
ECMAScript的變量是松散類(lèi)型的，所謂松散類(lèi)型就是用來(lái)保存任何類(lèi)型的數(shù)據(jù)。定義變量時(shí)要使用var操作符（var是關(guān)鍵），后面跟一個(gè)變量名（變量名是標(biāo)識(shí)符）
var box 聲明變量
var box=100 聲明變量并且初始化
二、JavaScript的數(shù)據(jù)類(lèi)型
ECMAScript中有5種簡(jiǎn)單數(shù)據(jù)類(lèi)型：Undefined、Null、Boolean、Number和String。還有一種復(fù)雜的數(shù)據(jù)類(lèi)型-Object。ECMAScript不支持任何創(chuàng)建自定義類(lèi)型的機(jī)制，所有值都是以上6種數(shù)據(jù)類(lèi)型之一。
1、Undefined類(lèi)型
- Undefined類(lèi)型只有一個(gè)值，即undefined。
- 表示未定義或者定義未賦值。
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
</script>
</head>
<body>
</body>
</html>效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
var box;
alert(box);// 彈出警告框：undefined
</script>
</head>
<body>
</body>
</html>效果：
我們沒(méi)有必要顯式的給一個(gè)變量賦值為undefined，因?yàn)闆](méi)有賦值的變量會(huì)隱式的賦值為undefined；而undefined主要的目的是為了用于比較，ECMAScript第3版之前并沒(méi)有引入這個(gè)值，引入之后為了正式區(qū)分空對(duì)象與未經(jīng)初始化的變量。
注：未初始化的變量與根本不存在的變量（未聲明的變量）也是不一樣的。
var box; alert(age); // age is not defined
如果typeof box，typeof age都返回的undefined。從邏輯上思考，他們的值，一個(gè)是undefined，一個(gè)報(bào)錯(cuò)；他們的類(lèi)型，卻都是undefined。所以，我們?cè)诙x變量的時(shí)候，盡可能的不要只聲明，不賦值。
var box; alert(typeof box);//box是Undefined類(lèi)型，值是undefined，類(lèi)型返回的字符串是"undefined"。
2、Null類(lèi)型
Null類(lèi)型是一個(gè)只有一個(gè)值的數(shù)據(jù)類(lèi)型，即特殊的值null。它表示一個(gè)空對(duì)象引用（指針），而typeof操作符檢測(cè)null會(huì)返回Object。
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
var box;
//alert(box);// 彈出警告框：undefined
// 2、Null
var box=null;
alert(typeof box);
</script>
</head>
<body>
</body>
</html>效果：
如果定義的變量準(zhǔn)備在將來(lái)用于保存對(duì)象，那么最好將該變量初始化為null。這樣。當(dāng)檢查null值就知道該變量是否已經(jīng)分配了對(duì)象。
var box=null;
if(bod!=null){
alert('box 對(duì)象已存在！');
}3、Boolean類(lèi)型
Boolean類(lèi)型有兩個(gè)值：true和false。而true不一定等于1，false不一定等于0，JavaScript是嚴(yán)格區(qū)分大小寫(xiě)的，True和False或者其他都不是Boolean類(lèi)型的值。
看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
var box;
//alert(box);// 彈出警告框：undefined
// 2、Null
/* var box=null;
a lert(typeof box); */
// 3、Boolean
var box=true;
alert(box);
</script>
</head>
<body>
</body>
</html>效果：
注意：
雖然Boolean類(lèi)型的字面量只有true和false兩種，但ECMAScript中所有類(lèi)型的值都有與這兩個(gè)Boolean值等價(jià)的值。要將一個(gè)值轉(zhuǎn)換為與其對(duì)應(yīng)的Boolean值，可以使用轉(zhuǎn)型函數(shù)Boolean()。
var hello='Hello World'; var hello2=Boolean(hello); alert(typeof hello); 彈出true
上面是一種顯示轉(zhuǎn)換，屬于強(qiáng)制性轉(zhuǎn)換。而實(shí)際應(yīng)用中，還有一種隱式轉(zhuǎn)換。比如，在if條件語(yǔ)句里面的條件判斷，就存在隱式轉(zhuǎn)換。
var hello ='Hello World!';
if(hello){
alert('如果條件為true，就執(zhí)行我這條！');
}
else{
alert('如果條件為false，就執(zhí)行我這條！');
}var box=true; alert(typeof box);//box是Boolean類(lèi)型，值是true,類(lèi)型返回的字符串是boolean
4、Number
Number類(lèi)型包含兩種數(shù)值：整型和浮點(diǎn)型。
浮點(diǎn)數(shù)值的取值范圍：Number.MIN_VALUE和Number.MAX_VALUE之間。
alert(Number.MIN_VALUE); //最小值
alert(Number.MAX_VALUE); //最大值
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
//var box;
//alert(box);// 彈出警告框：undefined
// 2、Null
/* var box=null;
a lert(typeof box); */
// 3、Boolean
/* var box=true;
alert(box); */
// 4、Number
var box=45; // 整型
var box1=45.6;// 浮點(diǎn)型
alert("box的值是:"+box+","+"box1的值是:"+box1);
</script>
</head>
<body>
</body>
</html>效果：
注意：
Number類(lèi)型除了整型和浮點(diǎn)型，還有另外一種類(lèi)型：NaN，即非數(shù)值（Not a Number）是一個(gè)特殊的值，這個(gè)數(shù)值用于表示一個(gè)本來(lái)要返回?cái)?shù)值的操作數(shù)而未返回?cái)?shù)值的情況（這樣就不會(huì)拋出錯(cuò)誤了）。比如，在其他語(yǔ)言中，任何數(shù)值除以0都會(huì)導(dǎo)致錯(cuò)誤而終止程序執(zhí)行。但在ECMAScript中，會(huì)返回特殊的值，因此不會(huì)影響程序執(zhí)行。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
//var box;
//alert(box);// 彈出警告框：undefined
// 2、Null
/* var box=null;
a lert(typeof box); */
// 3、Boolean
/* var box=true;
alert(box); */
// 4、Number
/* var box=45; // 整型
var box1=45.6;// 浮點(diǎn)型
alert("box的值是:"+box+","+"box1的值是:"+box1); */
// 特殊的Number類(lèi)型:NaN
var box=0/0; //NaN
var box1=12/0; //Infinity 無(wú)窮大
var box2=12/0*0; //NaN
alert("box的值是:"+box+","+"box1的值是:"+box1+","+"box2的值是:"+box2);
</script>
</head>
<body>
</body>
</html>結(jié)果：
可以通過(guò)Number.NaN得到NaN值，任何與NaN進(jìn)行運(yùn)算的結(jié)果均為NaN，NaN與自身不相等（NaN不與任何值相等）。
alert(Number.NaN); //NaN alert(NaN+1); //NaN alert(NaN==NaN); //false
ECMAScript提供了isNaN()函數(shù)，用來(lái)判斷這個(gè)值到底是不是NaN。isNaN()函數(shù)在接收到一個(gè)值之后，會(huì)嘗試將這個(gè)值轉(zhuǎn)換為數(shù)值。
alert(isNaN(NaN)); //true alert(isNaN(25)); //false 25是一個(gè)數(shù)值
isNaN()函數(shù)也適用于對(duì)象。在調(diào)用isNaN()函數(shù)過(guò)程中，首先會(huì)調(diào)用valueOf()方法，然后確定返回值是否能夠轉(zhuǎn)換成數(shù)值。如果不能，則基于這個(gè)返回值在調(diào)用toString()方法，在測(cè)試返回值。
var box={
toString:function(){
return '123';
}
};有3個(gè)函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值:Number()、parseInt()和parseFloat()。Number()函數(shù)是轉(zhuǎn)型函數(shù)，可以用于任何數(shù)據(jù)類(lèi)型，而另外兩個(gè)則專(zhuān)門(mén)用于把字符串轉(zhuǎn)換成數(shù)值。
alert(Number(true)); //1，Boolean類(lèi)型的true和false分別轉(zhuǎn)換成1和0 alert(Number(25)); //25，數(shù)值型直接返回
var box=250; alert(typeof box);//box是Number類(lèi)型，值是250，類(lèi)型返回的字符串是number。
5、String類(lèi)型
String類(lèi)型用于表示由零個(gè)或多個(gè)16為Unicode字符組成的字符序列，即字符串。字符串可以由雙引號(hào)("")或單引號(hào)('')表示。
例如：
var box="我是字符串類(lèi)型，我用雙引號(hào)"; var box1='我也是字符串類(lèi)型，我用單引號(hào)';
注：在某些其他語(yǔ)言中，單引號(hào)和雙引號(hào)表示的字符串解析方式不同，而ECMAScript中，這兩種表示方法沒(méi)有任何區(qū)別。但要記住的是，必須成對(duì)出現(xiàn)，不能穿插使用，否則會(huì)出錯(cuò)。
例如：
// 會(huì)報(bào)錯(cuò)，單引號(hào)和雙引號(hào)不能交叉使用 var box='我是字符串類(lèi)型，我用雙引號(hào)";
如果值有toString()方法，則調(diào)用該方法并返回相應(yīng)的結(jié)果；如果是null或者undefined，則返回"null"或者"undefined"。
var box='字符串'; alert(typeof box);//box是String類(lèi)型，值是字符串，類(lèi)型返回的字符串是string。
6、Object類(lèi)型
ECMAScript中的對(duì)象其實(shí)就是一組數(shù)據(jù)和功能的集合。對(duì)象可以通過(guò)執(zhí)行new操作符后跟要?jiǎng)?chuàng)建的對(duì)象類(lèi)型的名稱(chēng)來(lái)創(chuàng)建。
var box=new Object();
三、typeof操作符
typeof操作符是用來(lái)檢測(cè)變量的返回值，為字符串類(lèi)型。對(duì)于值或者變量使用typeof操作符會(huì)返回如下字符串：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript數(shù)據(jù)類(lèi)型</title>
<script>
// 1、Undefined
// 未定義
//alert(a); // 頁(yè)面會(huì)報(bào)錯(cuò)：
// 定義未賦值
//var box;
//alert(box);// 彈出警告框：undefined
// 2、Null
/* var box=null;
a lert(typeof box); */
// 3、Boolean
/* var box=true;
alert(box); */
// 4、Number
/* var box=45; // 整型
var box1=45.6;// 浮點(diǎn)型
alert("box的值是:"+box+","+"box1的值是:"+box1); */
// 特殊的Number類(lèi)型:NaN
/* var box=0/0; //NaN
var box1=12/0; //Infinity 無(wú)窮大
var box2=12/0*0; //NaN
alert("box的值是:"+box+","+"box1的值是:"+box1+","+"box2的值是:"+box2); */
// 5、String
/* var box="我是字符串類(lèi)型，我用雙引號(hào)";
var box1='我也是字符串類(lèi)型，我用單引號(hào)'; */
// 會(huì)報(bào)錯(cuò)，單引號(hào)和雙引號(hào)不能交叉使用
//var box='我是字符串類(lèi)型，我用雙引號(hào)";
/* var box="我是字符串";
box="我也是字符串";
alert(box); */
// typeof 操作符
var box;
var box1=23;
var box2=true;
var box3=null;
var box4="box";
document.write("box:"+typeof box +"<br />");
document.write("box1:"+typeof box1 +"<br />");
document.write("box2:"+typeof box2 +"<br />");
document.write("box3:"+typeof box3 +"<br />");
document.write("box4:"+typeof box4 +"<br />");
</script>
</head>
<body>
</body>
</html>結(jié)果：
注意：
- typeof操作符返回的都是字符串。
typeof操作符可以操作變量，也可以操作字面量。雖然也可以這樣使用：typeof（box），但是，typeof是操作符而非內(nèi)置函數(shù)。
PS：函數(shù)在ECMAScript中是對(duì)象，不是一種數(shù)據(jù)類(lèi)型，所以，使用typeof來(lái)區(qū)分function和Object是非常有必要的。
到此這篇關(guān)于JavaScript基礎(chǔ)語(yǔ)法與數(shù)據(jù)類(lèi)型的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換
- JS入門(mén)必備之八種數(shù)據(jù)類(lèi)型
- 一起來(lái)看看JavaScript數(shù)據(jù)類(lèi)型最詳解
- js中基礎(chǔ)的數(shù)據(jù)類(lèi)型詳解
- JavaScript的八種數(shù)據(jù)類(lèi)型
- javascript七大數(shù)據(jù)類(lèi)型詳解
- javascript基礎(chǔ)之?dāng)?shù)據(jù)類(lèi)型詳解
- JavaScript數(shù)據(jù)類(lèi)型相關(guān)知識(shí)詳解
- JavaScript中的數(shù)據(jù)類(lèi)型介紹
相關(guān)文章
JavaScript中用getDate()方法返回指定日期的教程
這篇文章主要介紹了JavaScript中用getDate()方法返回指定日期的教程,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
js中的setInterval和setTimeout使用實(shí)例
這篇文章主要介紹了javascript中的兩個(gè)定時(shí)執(zhí)行函數(shù)setInterval和setTimeout的用法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了readonly和disabled屬性的區(qū)別,非常的簡(jiǎn)單實(shí)用，需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript之單線程和異步，使用JavaScript，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
詳解JavaScript設(shè)計(jì)模式開(kāi)發(fā)中的橋接模式使用
橋接模式的適用場(chǎng)合非常廣泛，除了在事件回調(diào)函數(shù)與接口之間進(jìn)行橋接外,橋接模式也可以用于連接公開(kāi)的API代碼和私用的實(shí)現(xiàn)代碼,下面我們就來(lái)詳解JavaScript設(shè)計(jì)模式開(kāi)發(fā)中的橋接模式使用2016-05-05
這篇文章主要介紹了uniapp 實(shí)現(xiàn)錄音上傳功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
JavaScript 中的無(wú)窮數(shù)(Infinity)詳解
這篇文章主要介紹了JavaScript 中的無(wú)窮數(shù)(Infinity)的相關(guān)資料,非常的細(xì)致全面,有需要的小伙伴可以參考下2020-02-02
JavaScript學(xué)習(xí)筆記（十七）js 優(yōu)化
在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán)，事實(shí)上，這三種循環(huán)中for(in)的效率極差，因?yàn)樗枰樵?xún)散列鍵，只要可以就應(yīng)該盡量少用。2010-02-02
selenium 與 chrome 進(jìn)行qq登錄并發(fā)郵件操作實(shí)例詳解
這篇文章主要介紹了selenium 與 chrome 進(jìn)行qq登錄并發(fā)郵件操作實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了詳解JavaScript ES6中的模板字符串,JS的ES6版本帶來(lái)諸多簡(jiǎn)潔化方面的重大改進(jìn),需要的朋友可以參考下2015-07-07