JavaScript基礎知識整理

1 JavaScript是什麼

JavaScript一種直譯式指令碼語言，一種基於物件和事件驅動並具有安全性的客戶端指令碼語言；
也是一種廣泛應用客戶端web開發的指令碼語言。
簡單地說，JavaScript是一種執行在瀏覽器中的解釋型的程式語言。

2 JavaScript的基本結構

1 <script type="text/javascript">
2         JS語句;
3 </script>

3 JS的使用方法

HTML標籤中內嵌JS；

1 <button onclick="alert('歡迎進入JavaScript世界')">點選me</button>

HTML頁面中直接使用JS：

1 <script type="text/javascript">
2         JS語句;
3 </script>

引用外部JS檔案：

1 <script type="text/javascript">
2         JS語句;
3 </script>

4 變數

變數是用於儲存資訊的"容器"，是命名的記憶體空間，可以使用變數名稱找到該記憶體空間；
JavaScript 的變數是鬆散型別（弱型別）的，就是用來儲存任何型別的資料。
在定義變數的時候不需要指定變數的資料型別。
JavaScript 定義變數有四種方法：const

、let、var，還有一種是直接賦值，比如a = " a"（不規範，不推薦使用）
var定義的變數可以修改，如果不初始化會輸出undefined，不會報錯。
letlet是塊級作用域，定義的變數只在let 命令所在的程式碼塊內有效，變數需要先宣告再使用。
const定義的變數不可以修改，而且必須初始化，
const定義的是一個恆定的常量，宣告一個只讀的常量或多個，一旦宣告，常量值就不能改變。

在函式外宣告的變數作用域是全域性的，全域性變數在 JavaScript 程式的任何地方都可以訪問；
在函式內宣告的變數作用域是區域性的（函式內），函式內使用 var 宣告的變數只能在函式內容訪問。

宣告變數注意：

JS中所有變數型別宣告，均使用var關鍵字。

變數的具體資料型別，取決於給變數賦值的執行。
同一變數可在多次不同賦值時，修改變數的資料型別。
變數的命名規範
變數命名名要符合駝峰法則：變數開頭為小寫，之後每個單詞首字母大寫。

5 JavaScript 變數的命名規則

變數命名必須以字母、下劃線”_”或者”$”為開頭。
其他字元可以是字母、下劃線、美元符號或數字。
變數名中不允許使用空格和其他標點符號，首個字不能為數字。
變數名長度不能超過255個字元。
變數名稱對大小寫敏感（y 和 Y 是不同的變數），JavaScript 語句和變數都對大小寫敏感。
變數名必須放在同一行中。
不能使用指令碼語言中保留的關鍵字、保留字、true、false 和 null 作為識別符號。

6 JS中的變數的資料型別

String：字串型別。用""和''包裹的內容，稱為字串。
Number：數值型別。可以是小數，也可以是正數。
boolean：真假，可選值true/false。
Object：（複雜資料型別）
Null：表示為空的引用。var a = null;
Undefined：未定義，用var宣告的變數，沒有進行初始化賦值。var a;

7 JavaScript物件

JavaScript 物件是擁有屬性和方法的資料，是變數的容器。
物件：是封裝一個事物的屬性和功能的程式結構，是記憶體中儲存多個屬性和方法的一塊儲存空間。
JavaScript中所有事物都是物件：數字、字串、日期、陣列等。
JavaScript物件可以是字面量建立、分配給變數，陣列和其他物件的屬性、
作為引數傳遞給函式、有屬性和作為返回值。

用字面量建立：

1 function MyFun(){
2 
3 };

分配給其他物件的變數，陣列和屬性：

1 var myFun = function(){
2 
3 };
4 myArray.push(function(){
5 
6 });
7 myObject.myFun = function(){
8 
9 };

作為引數傳遞給其他函式：

1 function myFun(someFunc){
2       someFunc();
3 }
4 myFunc(function(){
5 
6 });

有屬性：

1 var myFunc = function(){
2 };

作為返回值：

function myFunc(){
      return function(){

      };
}

在JavaScript中定義物件有5種方式：

基於已有物件擴充其屬性和方法
工廠方式
建構函式方式
原型(“prototype”)方式
動態原型方式

JS中的物件分為三類：

內建物件（靜態物件）：js本身已經寫好的物件，我們可以直接使用不需要定義它。
常見的內建物件有 Global、Math（它們也是本地物件，根據定義每個內建物件都是本地物件）。
本地物件（非靜態物件）：必須例項化才能使用其方法和屬性的就是本地物件。
常見的本地物件有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等
宿主物件：js執行和存活的地方，它的生活環境就是DOM（文件物件模式）和BOM（瀏覽器物件模式）。

8 JavaScript函式

使用函式前要先定義才能呼叫，函式的定義分為三部分：函式名，引數列表，函式體
定義函式的格式：

1 function 函式名([引數1，引數2...]){
2         函式執行部分；
3         return 表示式；
4 }

函式有三種定義方法：

函式定義語句
函式直接量表達式
Function建構函式

函式有四種呼叫模式：

函式呼叫模式（通過函式呼叫）
方法呼叫模式（通過物件屬性呼叫）
建構函式模式（如果是作為建構函式來呼叫，那麼this指向new建立的新物件）
函式上下文（借用方法模式：它的this指向可以改變，而前三種模式是固定的）；
函式上下文就是函式作用域；基本語法：apply 和 call 後面都是跟兩個引數。）

在javascript函式中，函式的引數一共有兩種形式：（實際引數與形式引數）
形參：在函式定義時所指定的引數就稱之為“函式的形參”。
實參：在函式呼叫時所指定的引數就稱之為“函式的實參”。

9 運算子

算術運算子：主要是用來進行JavaScript中的算術操作。（+、-、*、/、%、++、--）
賦值運算子：=用於給JavaScript 變數賦值，其作用就是把右側的值賦給左側的變數。
關係運算符：用於進行比較的運算子。主要有小於（<）、大於（>）、等於（==）、大於等於（>=）、小於等於（<=）、不等（!=）、恆等（===）、不恆等（!==）。
邏輯運算子：邏輯運算子通常用於布林值的操作，返回結果是一個布林型別，一般和關係運算符配合使用，
有三個邏輯運算子：邏輯與(AND)、邏輯或(OR)、邏輯非(NOT)。
字串連線運算子：是用於兩個字串型資料之間的運算子，它的作用是將兩個字串連線起來。
在JavaScript中，可以使用+和+=運算子對兩個字串進行連線運算。
三目操作符（條件運算子）：？根據不同的條件，執行不同的操作/返回不同的值。

10 JavaScript條件語句

分為四種條件語句：

If 語句：只有當指定條件為true時，使用該語句來執行程式碼
if-else 語句：當條件為true時執行程式碼，當條件為false時執行其他程式碼
if-else if-else 語句：使用該語句來選擇多個程式碼塊之一來執行
switch 語句：同上，switch的工作原理呢？
首先設定表示式n(通常是一個變數)，隨後表示式的值會與結構中的每個case值作比較；
如果存在匹配則該關聯程式碼塊執行；
然後使用break來阻止程式碼自動的向下一個case執行；
default關鍵詞來規定匹配不存在時做的事情。

11 JavaScript 不同型別的迴圈

常見的迴圈主要是三種：for 迴圈、while 迴圈、do/while 迴圈。

for 迴圈：程式碼塊有一定的次數。
for 有三個表示式：1 宣告迴圈變數 2 判斷迴圈條件 3 更新迴圈變數
特點：先判斷再執行，與while相同。
while 迴圈：當指定的條件為true時迴圈指定的程式碼塊
do/while 迴圈：同while迴圈一樣。
特點：先執行再判斷，即使初始條件不成立，do/while迴圈至少執行一次。

迴圈結構的執行步驟：

宣告變數
判斷迴圈條件
執行迴圈體操作
更新迴圈變數
最後執行迴圈2-4，直到條件不成立，跳出迴圈

12 JavaScript Break 和Continue 語句

break：跳出本層迴圈，繼續執行迴圈後面的語句。
　　　　如果迴圈有多層，則break只能跳出一層。
continue：跳過本次迴圈剩餘的程式碼，繼續執行下一次迴圈。
　　　　對與for迴圈，continue之後執行的語句，是迴圈變數更新語句i++；
　　　　對於while、do-while迴圈，continue之後執行的語句，是迴圈條件判斷；
　　　　因此，使用這兩個迴圈時，必須將continue放到i++之後使用，否則，continue將跳過i++進入死迴圈。

13 JavaScript 錯誤處理使用 try ... catch ... finally

一種是程式寫的邏輯不對，導致程式碼執行異常；
一種是執行過程中，程式可能遇到無法預測的異常情況而報錯。
throw 宣告
onerror 事件

15 JavaScript 框架（庫）

jQuery 庫

jQuery 函式是 $() 函式（jQuery 函式）。
jQuery 庫包含以下功能：
HTML 元素選取、元素操作、CSS 操作、HTML 事件函式、JavaScript 特效和動畫、
HTML DOM 遍歷和修改、AJAX、Utilities
面向物件程式設計包括建立物件、原型繼承、class繼承。
類是物件的型別模板；例項是根據類建立的物件。
jQuery 優點：

分佈規模小
學習曲線平緩，線上幫助多
語法簡潔
容易延伸
消除了瀏覽器差異
簡潔的操作DOM的方法
輕鬆實現動畫
修改CSS等各種操作
缺點：
增加了本機API的速度開銷
瀏覽器相容性的改善降低了它的效能
用法扁平
有些開發人員抵制使用

AngularJs企業級框架

其最為核心的特性為：MVC、模組化、自動化雙向資料繫結、語義化標籤及依賴注入等。

React框架

React被稱為構建使用者介面而提供的Javascript庫；主要用來構建UI，其專注於MVC的V部分。

vue未來的主流

vue.js 是用來構建web應用介面的一個庫，技術上，Vue.js 重點集中在MVVM模式的ViewModel層，
它連線檢視和資料繫結模型通過兩種方式。

Require Js

RequireJs是一個javascript模組載入器，提高網頁的載入速度和質量。

Backone框架

Backone是一個幫助開發重量級Javascript應用的框架，但它本身簡單的框架。其檔案體積很小，壓縮後只有5.3KB，提供了全功能的MVC框架及路由。Backone強制依賴於Underscore.js，非強制依賴於jQuery/Zepto。

D3.js

資料視覺化和圖表是Web應用中不可或缺的一部分。
d3.js就是最流行的視覺化庫之一，它允許繫結任意資料到DOM，然後將資料驅動轉換應用到Document中。

15 JavaScript this

方法中的this指向呼叫它所在方法的物件。
單獨使用this，指向全域性物件。
函式中，函式所屬者預設繫結到this上。

this使用場合：

全域性環境
建構函式
物件的方法
Node

16 JavaScript閉包

閉包是指有權訪問另一個函式作用域中的變數的函式。
建立閉包就是建立了一個不銷燬的作用域。
閉包需要了解的幾個概念：作用域鏈、執行上下文、變數物件。
閉包的好處有：

快取
面向物件中的物件
實現封裝，防止變數跑到外層作用域中，發生命名衝突
匿名自執行函式，匿名自執行函式可以減少記憶體消耗
壞處：
記憶體消耗
涉及到跨作用域訪問是時會導致效能耗損

17 JS Window

所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。

18 JavaScript JSON

JSON 是一種輕量級的資料交換格式；JSON是獨立的語言；JSON 易於理解。
語法規則：

資料為鍵/值對。
資料由逗號分隔。
大括號儲存物件。
方括號儲存陣列。