首頁 > 開發者 > JavaScript
標籤：迴圈控制 字元 parse 嵌入 部分 提示 訪問 多層嵌套 一個
一、前言：
有過學習其他語言的經曆，會比較好上手。但是，沒有學過也無關大雅。只要認真學，都會學好。畢竟，都只是一些基礎的語句。關鍵在於要會運用。 掌握好語句的嵌套，以及要的邏輯思維能力，就已經成功一大半了。
二、JS中的變數和輸入輸出
使用JS的三種方式
1. 在HTML標籤中直接內嵌js （並不提倡使用）不符合W3C關於內容與行為分離的要求！！！！
<button onclick="alert(‘快點點點點啊‘)">點啊</button>
2. 在HTML頁面中，使用<script></script>標籤包裹代碼；
<script type="text/javascript">//js代碼</script>
<script></script>標籤可以放在頁面的任何位置 也可放多個，但一般只放一個
3. 引入外部的JS檔案
<script language="JScript"src="js檔案路徑"></script>
注意事項
1. <script></script>可以嵌入到頁面的任意位置，但是位置的不同，會導致js代碼執行的順序不同
比如<script></script>放到<body></body>前面則js代碼會在頁面載入之前就執行
2. 引入外部的JS代碼，<script></script>必須是成對出現的標籤。而且，標籤中不能再有任何的代碼
JS中的變數
1.JS中變數聲明的寫法
var num = 10； // 使用var聲明的變數屬於局部變數，只在當前範圍內有效。
但是，如果是在<script>中直接聲明，那就相當於是全域變數
num = 10； // 不用var聲明的變數，預設為全域變數，在整個JS檔案中（該語句下面）都有效。
var x=8,y, z = 10; // 使用一行語句同時聲明多個變數。上式中，y屬於已聲明，但是未賦值狀態，結果為undefined
聲明變數的注意事項
①.JS中，所有變數的聲明，均使用var關鍵字。變數具體是什麼類型，取決於給變數所賦值的類型；
②.JS，同一個變數，可以在多次不同賦值時，修改變數的資料類型；
var a = 10； // 從初始聲明時，a屬於整數型
a =" hahaha”； // 重賦值時，整數型的a被修改為字串類型；
③. 變數可是使用var聲明，也可以不是用var聲明；
【區別】使用 var聲明是局部變數，不是用var是全域變數
④.只用var聲明但是不賦值。結果為undefined。
例如：var a；//只聲明不賦值的a為undefined。但是，如果不聲明也不賦值的a，直接使用會報錯。
⑤.同一變數名，可以多次使用var聲明但是後面的var並沒有任何作用。第二次使用var聲明時，只會被理解為普通的賦值操作
2.變數名的命名要求
①.變數名只能有，字母，數字，底線組成；
②.開頭不能是數字；
③.變數名區分大小寫。大小寫字母為不同變數大寫字母一般聲明常量
3.變數名的命名規範
①.要符合小駝峰法則（駱駝命名法）：
首字母小寫，之後每個單詞的首字母大寫；如：myNameIsPengWei √
②.或者使用匈牙利命名法：
說有字母小寫，單詞之間用_分隔 my_name_is_peng_wei √
③.mynameispengwei 能用，但是不規範
4.js中的資料類型：均用var聲明，但變數具體是什麼類型，取決於給變數所賦值的類型；
ndefined：未定義。已經使用var聲明的變數，但是沒有賦值。var a；
null：表示空的引用。
boolean：布爾類型。表示真假。只有兩個值：true/flase
number：數實值型別。可以是整數，也可以是小數。
string：字串類型。用雙引號或單引號包裹的內容，稱為字串。
object：物件類型。後續講解。。。。
5.常用的數值函數
①isNaN（）：判斷一個變數或常量，是否是NaN（not a number 數值）
NaN 不等於 NaN
使用isNaN（）判斷時，會嘗試使用Number（）函數進行轉換，如果最終能夠轉成數字，則不是NaN，結果為flase
② Number（）函數：將其他類型的資料嘗試轉為數值型；
【字串類型】
》》字串為純數值字串，會轉為對應的數字：“11”—->11
》》字串為空白字串，會轉為0;""-->0
》》字串包含任何其他字元時，都不能轉；“1a”-->NaN
【Boolean類型】
true->1 flase->0
【null和undefined類型】
null->0undefined->NaN
【object】
*（後續講解）
③ ParseInt（）：將字串轉為整數類型
》》Null 字元串，不能轉。“”-->NaN
》》包含其他字元的字串會截取第一個非數值字串前的數字部分
“12a23”-->"12" "aqw12"-->NaN
》》parseInt（）只能轉字串和整型（能將小數轉為整數），轉其他類型，全是NaN
☆☆【Number函數與ParseInt函數的區別】重點
1.number函數能轉各種資料類型，parseint函數只能轉字串
2.兩者在轉字串時，結果不完全相同（詳見上面解釋）
④parsefloat：將字串轉為數值型
轉換規則與parseint相同，只是如果有小數，則保留小數點，如果沒有小數，則依然是整數；
“12.5”-->12.5"12"-->12
⑤typeof：監測變數的資料類型：
字串-->string 數值-->Number 未定義-->Undefined
true/flase-->boolean 對象/noll-->object 函數-->function
【js中常用的輸入輸出語句】
1.document.write（）。將（）中的內容列印輸出到瀏覽器螢幕上
使用時，需注意，除變數常量外的所有內容，必須放到""中。變數和常量之外的內容必須放到""外面
如果同時有變數和字串，必須用+連結eg：document。write（"左手中的紙牌"+left+"<br/>"）;
2.alert():使用彈窗輸出
彈窗警告，（）的內容與上述要求相同
3.prompt():彈窗輸入；
接受兩部分參數
① 輸入框上面的提示內容，可選
② 輸入框裡面的預設資訊，可選
當唯寫一部分時，表示輸入框上面的提示內容；
可以定義變數，接受輸入的內容。點擊確定按鈕，變數將被賦值為輸入的內容，點擊取消按鈕，變數將被賦值為null
輸入內容時，預設接受的資料類型都是字串！！
三、運算子
1. 算術運算(單目運算子)
+ 加、 -減、 *乘、 /除、 % 取餘、 ++ 自增、 -- 自減
注意：：有加減運算時，要注意是否要將數字轉為數值型
① + ：有兩種作用：連結字串 和 加法運算。
當+兩邊全為數字時，進行加法運算；
當+兩邊任意一邊為字串時，起連結字串的作用，連結之後的結果為字串
除+外，其餘符號運算時，會嘗試將作用兩邊變數用number函數轉為數字
② / : 結果會保留小數點
③ ++ ：自增運算子，將變數在原有基礎上+1
④ -- : 自減運算子，將變數在原有基礎上-1
a++與++a的異同
1. 同： 無論是a++還是a--，運算完後的值均會加1；
2. 異： a++,先用a的值去運算，，再把a加1
++a，先把a+1，再用a+1之後的值去運算。
例如
var a = 3,b,c;b = a++ + 2; //先用a運算：b = 3 + 2; 再將a+1：a = 4c = ++a + 2; //現將a+1：a = 5; 再用a值運算：c = 5 + 2; //a=5 b=5 c=7
2.賦值運算
= 賦值 += -= *= /= %=
+=： a+=b： 相當於a=a+b；但是，前者的運算效率要比後者快，所以推寫法薦前的者
3.關係運算
==等於、===嚴格等於 !=不等於、 !==不全等 >、 <、 >=、 <=
① 關係運算子，運算之後的結果，只能是boolean類型；
② 判斷一個數字是否處於某個區間，必須用&&串連
eg： a<10 && a >0 √ 10>a>0 ×
③ ===： 嚴格等於：要求不但要類型相同，值也必須相同；類型不同，結果直接為false；類型相同，再進行下一步判斷
==： 等於：類型相同，與===效果一樣。類型不同時，會先嘗試用number函數將兩邊轉為數字，然後再進行判斷
但是，有個別特例
alert（null === flase） 結果為false
var a；
alert（a == null）結果為true
alert（NAN == NaN）結果為false
alert（1!="1"） 結果為false
alert (1!=="1") 結果為true
4.條件運算子(多目運算)
a>b?true:false
有兩個重要符號： ？ 和 ：
當？前面部分，運算結果為true時，執行：前面的代碼
當？前面部分，運算結果為false時，執行：後面的代碼
冒號兩邊可以為數值，則整個式子可用於賦值。 var a = 1 > 2 ? 1 : 2;
冒號兩邊可以為代碼塊，將直接執行代碼。 1 < 2 ? alert(1 : alert(1);
多目運算子可以多層嵌套。 var a = 1< 2 ? alert(1) : alert(1);
5.位元運算符、 邏輯運算子
&& 與、|| 或、! 非（單目運算子）
&&：兩邊都成立時結果為true
||：兩邊有任意一邊成立時，結果為true
6.運算子的優先順序
（） 小括弧最高
! ++ --
* / %
+ -
> < >= <=
== !=
&& || 和 && 同時存在時，&&優先順序高於||
||
= += -= *= /= 賦值符最低
四.分支結構
1. 多目運算子
a>b?true:false
2. if-else結構
①結構的寫法
if(判斷條件){
//條件為true時，執行if的{}
}else{
//條件為false時，執行else的{}
}
②.注意事項
① else語句塊。可以根據情況進行省略。
②if和else後面的{}可以省略，但是省略{} 後，if和else後面只能跟一條語句，所以，並不建議省略{}。
③ if 的（）中的判斷條件，支援的情況：
① boolean：true為真，flase為假；
② string：非Null 字元串為真，Null 字元串為假；
③ number：非0數字為真， 0為假；
④ null/undefined/NaN：全為假；
⑤ object：全為真。
3. 多重if，階梯if結構
①.結構寫法
if(條件1){
條件1成立時，支援語句
}else if（條件2）{
條件1不成立，並且條件2成立時，執行的語句
}else{
上述所有條件都不成立時，執行的語句
}
②.多重if結構中，各個判斷條件是互斥的，執行選擇其中一條路執行。遇到正確選項並執行完後，直接跳出結構，不在判斷後續分支
4.嵌套if結構
①結構寫法
if（條件1）{
條件1，成立
if（條件2）{
條件1，並且條件2，成立
}else{
條件1成立，條件2不成立
}
}else{
條件1，不成立
}
②.在嵌套if結構中，如果省略{}、則else結構永遠屬於離它最近的if結構
③嵌套結構可以多次嵌套，但是一般不推薦超過三層
能用多重if結構的時候一般不推薦使用嵌套if。
5.switch - case結構
①.結構寫法： 如下
②注意事項：
①switch機構（）中的運算式，可以使用JS支援的各種資料類型。
②switch機構在進行判斷時，使用 === 判斷。
③case後面的運算式（允許有多個語句），可以是各種資料類型，但是，case的值要求各不相同，否則，也只會執行，第一個case
④ break作用：執行完case代碼後，跳出當前switch機構
缺少break後果：
從第一個正確的case項開始執行後面的所有case 和default；
原因： switch結構在進行判斷的時候，只會判斷一次正確答案，當遇倒正確的case後，將不再判斷後續的項目
⑤ switch結構的執行效率要比多重if快。在多路分支中，推薦優先使用switch
五.迴圈結構
1.while迴圈結構的執行步驟
①.聲明迴圈變數
②判斷迴圈條件
③.執行迴圈體操作
④更新迴圈變數
然後，迴圈執行2~4，直到條件不成立時，跳出迴圈。
while迴圈結構（）中的運算式，運算結果可以是各種類型。但是最終都會轉為真假，轉換規則同if結構。
var num = 0; //聲明迴圈變數 while (num < 10){ //判斷迴圈條件 document.write(num + "<br />"); //執行迴圈體操作 num=num+1; //更新迴圈變數 }
2.do-while迴圈結構
do-while迴圈特點：先判斷，再執行。
do-while迴圈特點：先執行，再判斷。即使初始條件不成立，do-while迴圈也至少迴圈一次。
var num = 10; do{ document.write(num );/ num--; }while(num >= 0);
3.for迴圈結構
1. for迴圈有三個運算式：① 聲明迴圈變數； ② 判斷迴圈條件； ③ 更新迴圈變數
三個運算式之間，用分號分隔
for迴圈的三個運算式都可以省略，但是倆個分號缺一不可
2. for迴圈的執行特點：先判斷，再執行；與while相同。
3 .for迴圈三個運算式，都可以有多部分組成，第二部分中的多個判斷條件用&& ||串連，第一，三部分用逗號串連。
【迴圈控制語句】
1. break: 跳出本層迴圈，繼續執行迴圈後面的語句。
如果，迴圈有多層嵌套，則break只能跳出一層
2. continue：跳過本次迴圈剩餘的代碼，繼續執行下一次迴圈。
① 對於for迴圈，continue之後執行的語句，時迴圈變數更新語句i++；
② 對於while，do-while迴圈，continue之後執行的語句是迴圈條件判斷，
因此，使用，這兩個迴圈時，必須將continue放到i++之後使用。否則，continue將跳過i++，導致死迴圈。
for (var num = 1, num1= 20; num <= 9 && num1 >= 14; num++, num1--) { document.write(num + "<br />"); }
六.函數
1.函數的聲明及調用
①.函數的聲明格式
function 函數名（參數1，參數2，...）{ //函數體代碼 return 傳回值;}
②函數的調用：
① 直接調用： 函數名（參數1的值，參數2 的值，....）；
② 事件調用方式： 在HTML標籤中，使用事件名 = " 函數名（參數1的值，參數2 的值，....）"
<button onclick="saySth(‘blue‘,‘哈哈哈哈‘)">點擊，列印</button>
2.函數的注意事項
①函數名必須要符合小駝峰法則：首字母小寫，之後每個單字首大寫
② 函數名後面的括弧中，可以有參數，也可以沒有參數，分別稱為有參函數，無參函數。
③聲明函數時的參數列表稱為形參列表,形式參數。（變數的名字）
function saySth(color,str){}
調用函數時的參數列表，稱為實參列表。實際參數（變數的賦值）
saySth("red","換個影子");
④函數的形參列表個數與實參列表的個數沒有實際關係。
函數參數的個數，取決於實參列表。
如果，實參列表的個數，小於形參列表，則未賦值的形參，將為undefined
⑤函數可以有傳回值,使用return返回結果。
調用函數時，可以使用一個變數接受函數的返回結果。
如果，函數沒有傳回值，則接受的結果為undefined。
function fun(){return "hahah";}var num = fun(); //num = hahah
⑥函數中變數的範圍：
JS中只有函數才有範圍：函數範圍。
即，函數{}中的局部變數只能在函數域中使用。而其他的{}(如：for{})中的局部變數能在{}外面使用。
函數中，使用var聲明的變數，為局部變數，只能在函數內部訪問；
不用var聲明的變數，為全域變數，在函數外也能訪問。
函數的形參列表，預設為局部變數，只能在函數內部使用。
⑦函數的聲明與函數的調用沒有先後之分，即，可以在函式宣告之前調用函數
fun(); //在fun聲明之前調用也可以function fun(){return "hahah";}
七.匿名函數的聲明與使用
1.聲明一個匿名函數直接賦值給某一個事件
window.onload = function(){}
2.使用匿名函數運算式，將匿名函數賦值給一個變數。
聲明：var func =function(){}
調用：func();
注意：使用匿名函數運算式時，函數的調用語句，必須放在函式宣告語句之後！！！！（與普通函數的區別！！！）
3.自執行函數：
① !function(){}(); //可以使用多種運算子開頭，但一般用！
！function(形參列表){}(實參列表)；
② ( function(){}() ); //使用（）將函數及函數後的括弧包裹
③ (f unction(){} )(); //使用（）只包裹函數部分
三種寫法的特點：
① 使用！開頭，結構清晰，不容易混亂，推薦使用；
② 能夠表明匿名函數與調用的（）為一個整體，官方推薦使用；
③ 無法表明函數與之後的（）的整體性，不推薦使用。
4.函數的內部屬性
1. Arguments對象
① 作用：用於儲存調用函數時的所有實參。當我們調用函數，並用實參賦值時，實際上參數列表已經儲存到Arguments數組中，
可以在函數中，使用Arguments[n],的形式調用。n從0開始。
② Argument數組的個數，取決於實參列表，與形參無關。
但是，一旦第n個位置的形參，實參，arguments都存在時，形參將於arguments綁定，同步變化。
（即在函數中修改形參的值，arguments也會改變。反之，亦成立）
③ arguments.callee()是arguments的主要屬性。表示arguments所在函數的引用地址；
在函數裡面，可以使用arguments.callee()調用函數本身。
在函數內部，調用函數自身的寫法，叫做遞迴。
結構上類似do-while結構
var num = 1;function func(){ //遞迴 console.log(num); //do，迴圈開始處 num++; //迴圈體操作 if(num<=4){ //while，判斷條件 arguments.callee(); //遞 } num--; //歸 console.log(num);}func();
代碼執行順序：
遞迴分為兩部分：遞 和 歸。以遞迴調用語句為界限，可以將函數分為上下兩部分。
遞：當函數執行上半部分，遇到自身的調用語句時，繼續進入內層函數，再執行上半部分。直到執行完最內層函數。
歸： 當最內層函數執行完以後，再從最內層函數開始，逐漸執行函數的下半部分。
當最外層函數執行時，遇到自身的調用語句，會進入內層函數執行，而外層函數的後半部分暫不執行。
直到最內層函數執行完以後，在逐漸向外執行。
console.log(history);
JavaScript基礎語句
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
