JavaScript - 基礎總結
阿新 • • 發佈：2018-11-12
目錄
3、外聯式：存在於外部JS檔案，通過script標籤src屬性連結
注：a = i++ （a先賦值，後i自增）；a = ++i （ i先自增，a後賦值）
一、JS語言介紹
1、概念
瀏覽器指令碼語言：可以編寫執行在瀏覽器上的程式碼程式
屬於解釋性、弱語言型別程式語言
2、組成
ES語法：ECMAScript、主要版本ES5和ES6
DOM：文件物件模型(Document Object Model)，是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。
BOM：瀏覽器物件模型(Browser Object Model)，提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構；且由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件。
注意：DOM屬於BOM內，是BOM的子物件，但是由於內容龐大，單獨拿出來。3、除錯方式
alert() ：頁面彈框
<script type="text/javascript"> var a = 10; var b = 20; alert(a); alert(b); </script>console.log() ：控制檯列印（推薦）
<script type="text/javascript"> var a = 10; var b = 20; console.log(a); console.log(b); </script>document.write() ：頁面列印（不推薦）
<script type="text/javascript"> var a = 10; var b = 20; document.write(a); document.write(b); </script>瀏覽器斷點除錯
4、頁面彈框類別（三類）
alert：普通彈出框
<script> //彈出框: 一個彈出框只能彈出一條資訊 alert("普通彈出框", "hello"); // hello被忽略了 </script>
confirm：確認框
<script> // 確認框 var res = confirm("你是男的嗎?"); // true | false alert(res); </script>
prompt：輸入框
<script> // 輸入框 var res = prompt("請輸入!"); // 確定為輸入值, 取消為null alert(res); </script>
二、存在位置（三類）
1、行間式：存在於行間事件中
<body id="body" onload="body.style.backgroundColor='#0ff'"> </body>2、內聯式：存在於頁面script標籤中
<body id="body"> <script type="text/javascript"> body.style.backgroundColor='#0ff' </script> </body>2.1 內聯式內js的放置位置
位於head標籤內末端（依賴型JS庫）：提供body內需求的事件、變數等
例：head內的js函式，給下方body內的按鈕提供點選事件。位於body標籤內（功能型JS指令碼）：執行事件、插入文字等
3、外聯式：存在於外部JS檔案，通過script標籤src屬性連結
index.js檔案 body.style.backgroundColor='#0ff' index.html檔案 <script src="./js/index.js"></script>注意一：不存在類別優先順序，以執行順序決定最後採用樣式。
注意二：若內聯、外聯同時存在，則無視內聯，以外聯式為準。
<script src="./js/index.js"> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script>
三、JavaScript語句規範
1、分號 ; （分割js語句）
提示：也可能看到不帶有分號的案例。在 JavaScript 中，用分號來結束語句是可省的。
2、編譯型逐條執行
3、程式碼塊{}，作用是使語句序列一起執行
4、自動忽略多餘空格。
因為，var name="Hello"; 等效於 var name = "Hello"; 可以適當使用空格提高可讀性。
5、小駝峰命名法（首字母小寫，後接單詞大首字母大寫）
例：helloWord、getElementById
6、使用反斜槓進行程式碼折行
正確演示： document.write("Hello \ World!"); 錯誤示範： document.write \ ("Hello World!");7、//單行註釋，/**/多行註釋
// 輸出標題： document.getElementById("myH1").innerHTML="Welcome to my Homepage"; // 輸出段落： document.getElementById("myP").innerHTML="This is my first paragraph."; /* 下面的這些程式碼會輸出 一個標題和一個段落 並將代表主頁的開始 */ document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph.";
四、變數
1、命名規範
與代數一樣，JavaScript 變數可用於存放值（比如 x=2）和表示式（比如 z=x+y）。
變數可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
- 變數必須以字母開頭
- 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
- 變數名稱對大小寫敏感（y 和 Y 是不同的變數）
提示：JavaScript 語句和 JavaScript 變數都對大小寫敏感。
2、ES5定義變數
var num = 10; // 無塊級作用域變數 num = 10; // 全域性變數3、ES6定義變數
let num = 10; // 區域性變數 const NUM = 10; // 常量4、單語句多變數
//單行 var name="Gates", age=56, job="CEO"; //多行 var name="Gates", age=56, job="CEO";
五、資料型別
number：數字型別（不分浮整）
var x1=34.00; //使用小數點來寫 var x2=34; //不使用小數點來寫 var y=123e5; // 12300000 var z=123e-5; // 0.00123 var a = 10; console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'number')
string：字串型別
var a = '10'; var carname="Bill Gates"; console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'string')
boolean：布林型別
var a = true; console.log(a, typeof a) // 判斷方式 只有true 和 false 兩種值 console.log(typeof a == 'boolean')
undefined：未定義型別
var a = undefined; console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'undefined') console.log(a == undefined)
null：空物件
var a = null; console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'object') console.log(a == null)
Array：陣列物件
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"]; var a = new Array(1, 2, 3, 4, 5); console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof Array)
Date：時間物件
var a = new Date(); console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof Date)
RegExp：正則物件
var a = new RegExp(); console.log(a, typeof a) // 判斷方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof RegExp)
物件（類 map，dic）
/*物件由花括號分隔。 在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義。 屬性由逗號分隔：*/ var person={firstname:"Bill", lastname:"Gates", id:5566}; var person={ firstname : "Bill", lastname : "Gates", id : 5566 }; //定址方式（兩種） name=person.lastname; name=person["lastname"];
六、型別轉換
數字|布林 轉換為 字串
var a = 10 or true String(a) a.toString()
布林|字串 轉換為 數字
var a = true or '10' Number(a) + a parseFloat() parseInt()
字串|數字 轉換為 布林
var a = 10 or '10' Boolean(a)
自動轉換
5 + null // 5 "5" + null // "5null" "5" + 1 // "51" 文字相加操作 "5" - 1 // 4 計算操作
特殊產物 NaN
// NaN: 非數字型別 // 不與任何數相等，包含自己 // 利用isNaN()進行判斷
七、運算子
1、JavaScript 算術運算子
算術運算子用於執行變數與/或值之間的算術運算。
給定 y=5，下面的表格解釋了這些算術運算子：
運算子 描述 例子 結果 + 加 x=y+2 x=7 - 減 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求餘數 (保留整數) x=y%2 x=1 ++ 累加 x=++y x=6 -- 遞減 x=--y x=4 注：a = i++ （a先賦值，後i自增）；a = ++i （ i先自增，a後賦值）
2、JavaScript 賦值運算子
賦值運算子用於給 JavaScript 變數賦值。
給定 x=10 和 y=5，下面的表格解釋了賦值運算子：
運算子 例子 等價於 結果 = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 3、JavaScript比較運算子
前提：x=5
運算子 描述 比較 結果 == 等於 x=="5" true === 絕對等於 x==="5" false != 不等於 x!="5" fales !== 不絕對等於 x!=="5" true > 大於 x>5 false < 小於 x<5 false >= 大於等於 x>=5 true <= 小於等於 x<=5 true 4、JavaScript邏輯運算子
前提：n=5
運算子 描述 例子 結果 && 與 x=n>10&&++n x=false,n=5（短路） || 或 x=n<10||n-- x=true,n=5（短路） ! 非 x=!n x=false,x=5 5、JavaScript三目運算子
// 結果 = 條件表示式 ? 結果1 : 結果2; // eg: var tq = prompt("天氣(晴|雨)") var res = tq == '晴' ? "今天天氣挺好" : "請假回家收衣服"; console.log(res);6、ES6語法解構賦值
陣列的解構賦值
let [a, b, c] = [1, 2, 3] // a=1,b=2,c=3 let [a, ...b] = [1, 2, 3] // a=1,b=[2,3]
物件的解構賦值
let {key: a} = {key: 10} // a=10
字串解構賦值
let [a,b,c] = 'xyz' // a='x',b='y',c='z'