首頁 > 開發者 > JavaScript
標籤：重複 文法 原理 null 執行順序 自動 引用 條件運算 運算子
【使用JS的三種方式】
1、在html標籤中，直接使用JS（並不提倡使用）：
栗子：<button onclick="alert(‘我好啊‘)">點本寶寶</button>
不符合內容與行為分離的要求！
2、在html頁面中使用<script></script>包裹JS代碼：
栗子：<script type="text/javascript">
JS代碼；
</script>
script標籤可以放到頁面的任何位置。
3、引入外部的JS檔案
<script language="JavaScript" src="JS/01.js" ></script>
【注意事項】
1、<script></script>可以嵌入頁面的任意位置。但是，位置的不同會導致JS代碼的執行順序不同；
比如：<script></script>放到<body></body>前面，則JS代碼會在頁面載入之前執行。
2、引入外部的JS，<script></script>必須是成對出現的標籤。而且，標籤中不能有任何JS代碼。
JS中多行注釋。ctrl+shift+/
JS中單行注釋。ctrl+/
【JS中變數】
1、JS中變數申明的寫法：
var num=1;//使用var申明的變數，屬於局部變數，只在當前範圍有效；
num=1;//不用var申明的變數，預設為全域變數，在整個JS檔案中有效。
var x=1,y=2,z=1;//使用一行語句申明多個變數，下式中，x,y屬於以申明，但是未賦值狀態，結果為undefined；
var x,y,z=1;
alert(x);
alert(y);
alert(z);
【申明變數注意事項】
1、JS中所有變數的申明，均使用var關鍵字，變數具體是什麼資料類型，取決於給變數賦值的類型。
2、同一個變數，可以在多次不同賦值時，修改變數的資料類型；
var a=1;//從初始申明，a屬於整形
a="chuanchuan";//重複賦值時，整數型的a被修改為字串型類型；
3、變數可以使用var申明，也可以不實用var申明。
【區別】使用var申明為局部變數，不使用var申明為全域變數；
4、只用var申明，但是不賦值，結果為undefined；
例如：var a;//a為undefined。
但是，如果不申明也不賦值a，直接使用會報錯。
5、同一變數名可以多次使用，但是後面的var並沒有用，第二次使用var申明時，只會被理解為普通的賦值操作。
【變數名的命名要求】
1、只能有字母，底線，數字組成；
2、開頭不能是數字；
3、變數名區分大小寫，大寫字母與小寫字母為不同變數；
【變數名的命名規範】
1、要符合小駝峰法則：首字母小寫之後每個單詞的首字母大寫。
例如：myNameIsChuanChuan
2、或者使用匈牙利名命法
my_name_is_chuan_chuan
3、mynameischuanchuan 能用，但是不規範
【JS資料類型】
1、Undefined：未定義。已經使用var神明的變數，但是沒有賦值的情況。如：var a;
2、Null：Null 參考。
3、Boolean：布爾類型。表示真假，只有兩個值，true和flase
4、Nnumber：數實值型別，可以是整數，也可以是小數
5、String：字串類型，用""或‘‘包裹的內容，稱為字串
6、Object：物件類型，
【常用的數值函數】
1、isNaN（）：判斷一個變數或常量是不是NaN（not a number 非數值）；
使用NaN（）判斷時，會嘗試使用Number（）函數進行轉換，如果最終結果能夠轉換為數字，則不是NaN,結果為false。
2、Number（）函數：將其他類型的資料，嘗試轉為數值型。
[字串類型]
字串為純數值字串，會轉為對應數字；例如："111"->111
字串為空白字串，會轉為0；例如：""->0
字串包含任何其他字串時，都不能轉；例如："1a"->NaN
[boolean類型]
true->1 flase->0
【Null/Undefined】
Null->0 Undefined->NaN
parseInt():將字串轉為整數類型；
純數值字串，能轉。
"12"->12; "12.9"->12(小數轉換時，直接抹掉小數點，不能進行四捨五入)
Null 字元串，不能轉。""->NaN
包含其他字串，會截取第一個非數值字串前的數字部分
"123a456"->123; "a123b456"->NaN
parseInt()只能轉字串。轉其他類型，全是NaN。
【Number函數與ParseInt函數的區別】
1、Number函數可以轉各種資料類型，ParseInt函數只能轉字串
2、兩者在轉字串時，結果不完全相同。（詳解見上面解釋）
parseFloat:將字串轉為數值型；
轉換規則與ParsenInt相同，只是如果有小數，則保留小數點；如果沒有小數，則依然是整數；
"12.5"->12.5; "12"->12
typeof:檢測變數的資料類型：
字串->String 數值->Number 未定義->Undefined
true/false->Boolean 函數->function 對象/Null->object
【JS中常用的輸入輸出語句】
1、document.write（）；將括弧中內容列印輸出到瀏覽器螢幕上；
使用時需注意：除變數，常量外所有內容，必須放到""中，變數和常量必須放到""外面；
如果同時又變數和字串，必須用+連結
例如：document.write("左手中的紙牌："+left+"<br/>");
2、alert（）；使用彈窗輸出；
彈窗警告，（）中的內容與上述要求相同。
3、prompt();彈窗輸入
接受兩部分參數：
①輸入框上面的提示內容，可選；
②輸入框裡面的預設資訊，可選；
當唯寫一部分時，表示輸入的內容。點擊確定按鈕，變數被賦值為輸入內容；點擊取消按鈕，變數將被賦值為null；
輸入內容時，預設接收的資料類型都是 字串！
例如：var num1 = prompt("請輸入第一個數：");
var num2 = prompt("請輸入第二個數：");
var sum = parseFloat(num1)+parseFloat(num2);
alert("結果是："+sum);
【算術運算】
+ 、-、*、 /、 %、++ 、--
+：有兩種作用，連結字串/加法運算。當+兩邊全為數字時，進行加法運算；當+兩邊任意一邊為字串時，
起連結字串作用，連結作用，連結之後結果為字串。
除+外，其餘符號運算時，會將左右變數用Number函數轉為數字。
/：結果保留小數點。
++：自增運算子，將 變數 在原有基礎上+1。
--：自減運算子，將 變數 在原有基礎上-1。
【a++和++a異同】
1、相同點：無論a++還是++a,運算完後，a的值均會+1；
2、不同點：a++,先用a的值去運算，再把a+1;
++a,再把a+1,再用a的值去運算;
【賦值運算】
= += -= *= /= %=
+=：a+=b;相當於a=a+b;但是前者運算效率比較快，推薦+=的寫法。
【關係運算】
==、 ！=、>、<、>=、<=
關係運算子運算之後的結果，只能是Boolean類型；
判斷一個數字是否處於某個區間，必須用&&連結；
例如：a<10 && a>0
===:嚴格等於，要求不但類型相同，值也必須形同。
==：等於，類型相同與===效果一樣，類型不同時，會嘗試用Number將兩邊轉數字，然後再判斷。
但是，有個別特例，如：Null==false × Null==Undefined √ Null==Null ×
【條件運算子(多目運算)】
a>b?true:false
當？前面運算結果為true時，執行：前面的代碼
當？後面運算結果為true時，執行：後面的代碼
冒號兩邊為數值，則整個式子可用於賦值。var a =1<2?1:2;
冒號兩邊為數值,將直接執行代碼。1<2 ? alert(1):alert(2);
多目運算子可以多層嵌套。var a =1<2?alert(1):(1>0?4:5);
【位元運算符、 邏輯運算子】
&&、||、！
&& 兩邊都成立，結果為true
|| 兩邊有任意一邊成立，結果為true
&& ||同時存在時，&&的優先順序比||高
【運算子的優先順序】
1、（）
2、！ ++ -- 單目運算子
3、* / %
4、> < >= <=
5、== !=
6、&& 注意：&& ||同時存在時，&&的優先順序比||高
7、||
8、= += -= *= /=
【if-else結構】
1、結構的寫法：
if(判斷條件){
條件為true，執行if{}
}else{
條件為false，執行if{}
}
2、注意事項：
else{}語句塊。可以根據情況進行省略。
if和else後面的{}可以省略，但是省略{}，if和else後面只能跟一條語句；（所以不建議省略{}）
3、if的（）中的判斷條件，支援的情況：
Boolean：true為真，false為假
string：Null 字元串為假，所有非Null 字元串為真。
Number：0為假。所有非0數字為真。
Null/Undefined/NaN：全為假。
Object：全為真。
【多重if、階梯if結構】
1、結構寫法：
if（if條件一）{
條件一成立，執行操作
}else if（條件二）{
條件一不成立&&條件二成立，執行的操作
}else{
上條件都不成立，執行的操作
}
2、多重if結構中，各個判斷條件是互斥的，執行選擇其中一條路執行，
遇到正確選項並執行完以後，直接跳出結構，不再判斷後續分支
【嵌套if結構】
1、結構寫法：
if（條件一）{
條件成立
if(條件二){
條件一成立&&條件二成立
}else{
條件一成立&&條件二不成立
}
}else{
條件一不成立
}
2、在嵌套if結構中，如果省略{}，則else結構永遠屬於離他最近的if；
3、嵌套結構可以多層嵌套，但是一般不推薦超過三層
能用多重if結構一般不推薦使用多重if結構。
【switch多路分支結構】
【工作原理】首先設定運算式 n（通常是一個變數）。隨後運算式的值會與結構中的每個 case 的值做比較。
如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。
1、結構寫法：switch（運算式）{
case (可以是運算式)：
執行代碼塊 1
break；
case 2：
執行代碼塊 2
break；
case 3：
執行代碼塊 3
break；
default：
break；
}
2、switch結構（）中的運算式可以是各種JS支援的資料類型；
3、switch結構在進行判斷時，使用==判斷；
4、case後面的運算式可以是各種資料類型，可以是運算式,但是值要求各不相同，否則也只會執行第一個case。
5、break跳出當前當前switch結構；缺少break後果 從第一個正確的case項開始，執行後面的所有case和default；
原因：switch結構進行判斷的時候，只會判斷一次正確答案。當遇到正確case之後，將不會再判斷後續的項目。
6、 switch執行效率要比多重if快。在多路分支中，推薦優先使用。
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
