前言
1.JavaScript背景
Web前端有三層：
-
HTML：從語義的角度计技，描述頁面結(jié)構(gòu) -
CSS：從審美的角度，描述樣式（美化頁面） -
JavaScript：從交互的角度尤蒿，描述行為（提升用戶體驗）
JavaScript是世界上用的最多的腳本語言吗氏。
2.瀏覽器工作原理
1、User Interface 用戶界面揽乱，我們所看到的瀏覽器
2名眉、Browser engine 瀏覽器引擎，用來查詢和操作渲染引擎
3凰棉、Rendering engine 用來顯示請求的內(nèi)容损拢，負責解析HTML、CSS
4撒犀、Networking 網(wǎng)絡(luò)福压，負責發(fā)送網(wǎng)絡(luò)請求
5、JavaScript Interpreter(解析者) JavaScript解析器或舞，負責執(zhí)行JavaScript的代碼
6荆姆、UI Backend UI后端，用來繪制類似組合框和彈出窗口
7映凳、Data Persistence(持久化) 數(shù)據(jù)持久化胆筒，數(shù)據(jù)存儲 cookie、HTML5中的sessionStorage
3.JavaScript 的使用范圍诈豌，慢慢超越了瀏覽器仆救，正在向通用的系統(tǒng)語言發(fā)展。
- （1）瀏覽器的平臺化
- （2）Node
- （3）數(shù)據(jù)庫操作
- （4）移動平臺開發(fā)
- （5）內(nèi)嵌腳本語言
- （6）跨平臺的桌面應(yīng)用程序
4.強大的性能
-（1）靈活的語法队询，表達力強派桩。
JavaScript 既支持類似 C 語言清晰的過程式編程，也支持靈活的函數(shù)式編程蚌斩，可以用來寫并發(fā)處理（concurrent）铆惑。這些語法特性已經(jīng)被證明非常強大，可以用于許多場合送膳，尤其適用異步編程员魏。
JavaScript 的所有值都是對象，這為程序員提供了靈活性和便利性叠聋。因為你可以很方便地撕阎、按照需要隨時創(chuàng)造數(shù)據(jù)結(jié)構(gòu)，不用進行麻煩的預(yù)定義碌补。
JavaScript 的標準還在快速進化中虏束，并不斷合理化棉饶，添加更適用的語法特性。
-（2）支持編譯運行镇匀。
JavaScript 語言本身照藻，雖然是一種解釋型語言，但是在現(xiàn)代瀏覽器中汗侵，JavaScript 都是編譯后運行幸缕。程序會被高度優(yōu)化，運行效率接近二進制程序晰韵。而且发乔，JavaScript 引擎正在快速發(fā)展，性能將越來越好雪猪。
此外栏尚，還有一種 WebAssembly 格式，它是 JavaScript 引擎的中間碼格式只恨，全部都是二進制代碼抵栈。由于跳過了編譯步驟，可以達到接近原生二進制代碼的運行速度坤次。各種語言（主要是 C 和 C++）通過編譯成 WebAssembly古劲，就可以在瀏覽器里面運行。
-（3）事件驅(qū)動和非阻塞式設(shè)計缰猴。
JavaScript 程序可以采用事件驅(qū)動（event-driven）和非阻塞式（non-blocking）設(shè)計产艾，在服務(wù)器端適合高并發(fā)環(huán)境，普通的硬件就可以承受很大的訪問量滑绒。
1.JavaScript基礎(chǔ)
JavaScript的組成
JavaScript基礎(chǔ)分為三個部分：
ECMAScript：JavaScript的語法標準闷堡。包括變量、表達式疑故、運算符杠览、函數(shù)、if語句纵势、for語句等踱阿。DOM：文檔對象模型，操作網(wǎng)頁上的元素的API钦铁。比如讓盒子移動软舌、變色、輪播圖等牛曹。BOM：瀏覽器對象模型佛点，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
PS：JS機械重復(fù)性的勞動幾乎為0超营，基本都是創(chuàng)造性的勞動鸳玩。而不像HTML、CSS中margin演闭、padding都是機械重復(fù)勞動怀喉。
JavaScript的特點
（1）簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執(zhí)行程序船响。
（2）解釋型語言：事先不需要被編譯為機器碼再執(zhí)行，逐行執(zhí)行躲履、無需進行嚴格的變量聲明见间。
由于少了編譯這一步驟，所以解釋型語言開發(fā)起來尤為輕松工猜，但是解釋型語言運行較慢也是它的劣勢米诉。不過解釋型語言中使用了JIT技術(shù)，使得運行速度得以改善篷帅。
（3）基于對象：內(nèi)置大量現(xiàn)成對象史侣，編寫少量程序可以完成目標
編程語言的分類
解釋型語言：邊解析邊執(zhí)行，不需要事先編譯魏身。例如：JavaScript惊橱、php。
編譯型語言：事先把所有的代碼翻譯成計算機能夠執(zhí)行的指令箭昵，然后整體執(zhí)行税朴。例如：c、c++家制。
1.字面量：數(shù)字和字符串【常量】正林；變量：值可以改變
“字面量”即常量，是固定值颤殴，不可改變觅廓。看見什么涵但，它就是什么杈绸。變量：變量可以用來保存字面量，而且變量的值可以任意改變矮瘟。
alert(886); //886是數(shù)字蝇棉，所以不需要加引號。
// 變量定義
var a = 100;
變量名有命名規(guī)范：只能由英語字母芥永、數(shù)字篡殷、下劃線、美元符號$構(gòu)成埋涧，且不能以數(shù)字開頭板辽，并且不能是JavaScript保留字奇瘦。并且變量是大小寫敏感的
變量的命名規(guī)則：
- 1.建議用駝峰命名規(guī)則：getElementById/matherAndFather/aaaOrBbbAndCcc
- 2.變量命名必須以字母或是下標符號”_”或者”$”為開頭。
- 3.變量名長度不能超過255個字符劲弦。
- 4.變量名中不允許使用空格耳标，首個字不能為數(shù)字。
- 5.不用使用腳本語言中保留的關(guān)鍵字及保留字作為變量名邑跪。
- 6.變量名區(qū)分大小寫(javascript是區(qū)分大小寫的語言)次坡。
- 7.漢語可以作為變量名。但是不建議使用画畅，因為 low砸琅。
1.JavaScript 是一種動態(tài)類型語言，也就是說轴踱，變量的類型沒有限制症脂，變量可以隨時更改類型。
2.JavaScript引擎的工作方式是淫僻，先解析代碼诱篷，獲取所有被聲明的變量，然后再一行一行地運行雳灵。這造成的結(jié)果棕所，就是所有的變量的聲明語句，都會被提升到代碼的頭部悯辙，這就叫做變量提升（hoisting）橙凳。
3.源碼中被 JavaScript 引擎忽略的部分就叫做注釋，它的作用是對代碼進行解釋笑撞。JavaScript 提供兩種注釋的寫法：一種是單行注釋岛啸，用//起頭；另一種是多行注釋茴肥，放在/和/之間坚踩。
4.JavaScript 使用大括號，將多個相關(guān)的語句組合在一起瓤狐，稱為“區(qū)塊”（block）瞬铸。對于var命令來說，JavaScript 的區(qū)塊不構(gòu)成單獨的作用域（scope）础锐。
{
var a = 1;
}
a // 1
2.數(shù)據(jù)類型
在JS中一共有六種數(shù)據(jù)類型：
- 基本數(shù)據(jù)類型（值類型）：
String字符串嗓节、Number數(shù)值、Boolean布爾值皆警、Null空值拦宣、Undefined未定義。 - 引用數(shù)據(jù)類型（引用類型）：
Object對象。
強制類型轉(zhuǎn)換：將一個數(shù)據(jù)類型強制轉(zhuǎn)換為其他的數(shù)據(jù)類型鸵隧。類型轉(zhuǎn)換主要指绸罗，將其他的數(shù)據(jù)類型，轉(zhuǎn)換為：String豆瘫、Number珊蟀、Boolean。
vat a = 123; // Number 類型
console.log(a + ''); // 轉(zhuǎn)換成 String 類型
console.log(a + 'haha'); // 轉(zhuǎn)換成 String 類型
- 數(shù)值（number）：整數(shù)和小數(shù)（比如1和3.14）
- 字符串（string）：文本（比如Hello World）外驱。
// 字符串
'Did she say \'Hello\'?'
// "Did she say 'Hello'?"
"Did she say \"Hello\"?"
// "Did she say "Hello"?"
// 默認只有一行 分多行報錯育灸，分成多行，可以在每一行的尾部使用反斜杠昵宇。
'a
b
c'
// SyntaxError: Unexpected token ILLEGAL
var longString = 'Long \
long \
long \
string';
// 連接運算符（+）可以連接多個單行字符串磅崭，將長字符串拆成多行書寫，輸出的時候也是單行趟薄。
var longString = 'Long '
+ 'long '
+ 'long '
+ 'string';
反斜杠（\）在字符串內(nèi)有特殊含義，用來表示一些特殊字符典徊，所以又稱為轉(zhuǎn)義符杭煎。
需要用反斜杠轉(zhuǎn)義的特殊字符，主要有下面這些卒落。
\0 ：null（\u0000）
\b ：后退鍵（\u0008）
\f ：換頁符（\u000C）
\n ：換行符（\u000A）
\r ：回車鍵（\u000D）
\t ：制表符（\u0009）
\v ：垂直制表符（\u000B）
\' ：單引號（\u0027）
\" ：雙引號（\u0022）
\\ ：反斜杠（\u005C）
// 字符串可以被視為字符數(shù)組羡铲，因此可以使用數(shù)組的方括號運算符，用來返回某個位置的字符（位置編號從0開始）儡毕。
var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"
// 直接對字符串使用方括號運算符
'hello'[1] // "e"
- 布爾值（boolean）：表示真?zhèn)蔚膬蓚€特殊值沟使，即true（真）和false（假）
- undefined：表示“未定義”或不存在贰逾，即由于目前沒有定義，所以此處暫時沒有任何值
- null：表示空值，即此處的值為空崇决。
- 對象（object）：各種值組成的集合。
- ES6 又新增了第七種 Symbol 類型的值
對象是最復(fù)雜的數(shù)據(jù)類型事格，又可以分成三個子類型同窘。
- 狹義的對象（object）
- 數(shù)組（array）
- 函數(shù)（function）
狹義的對象和數(shù)組是兩種不同的數(shù)據(jù)組合方式，除非特別聲明附井，本教程的“對象”都特指狹義的對象讨越。函數(shù)其實是處理數(shù)據(jù)的方法，JavaScript 把它當成一種數(shù)據(jù)類型永毅，可以賦值給變量把跨，這為編程帶來了很大的靈活性，也為 JavaScript 的“函數(shù)式編程”奠定了基礎(chǔ)沼死。
3.運算符
運算符有很多分類着逐，比如：
算數(shù)運算符: [
+ - * / 取余% （）]自增運算符：【自增 ++，自減--】
邏輯運算符
&& 與（且）：兩個都為真，結(jié)果才為真滨嘱。
|| 或：只要有一個是真峰鄙，結(jié)果就是真。
! 非：對一個布爾值進行取反太雨。賦值運算符：可以將符號右側(cè)的值賦值給符號左側(cè)的變量吟榴。
+=。a += 5 等價于 a = a + 5
-=囊扳。a -= 5 等價于 a = a - 5
*=吩翻。a *= 5 等價于 a = a * 5
/=。a /= 5 等價于 a = a / 5
%=锥咸。a %= 5 等價于 a = a % 5
- 關(guān)系運算符:比較兩個值之間的大小關(guān)系
> 大于號
< 小于號
>= 大于或等于
<= 小于或等于
== 等于
=== 全等于
!= 不等于
!== 不全等于
JavaScript 還有一個三元運算符（即該運算符需要三個運算子）?:狭瞎，也可以用于邏輯判斷。* 三元運算符（條件運算符）:三元運算符也叫條件運算符搏予。
(條件) ? 表達式1 : 表達式2
上面代碼中熊锭，如果“條件”為true，則返回“表達式1”的值雪侥，否則返回“表達式2”的值碗殷。
var even = (n % 2 === 0) ? true : false;
4.流程控制語句：（if-else, 循環(huán)語句）
JavaScript 提供if結(jié)構(gòu)和switch結(jié)構(gòu)，完成條件判斷速缨，即只有滿足預(yù)設(shè)的條件锌妻，才會執(zhí)行相應(yīng)的語句。
流程控制語句分類
- 順序結(jié)構(gòu)
- 選擇結(jié)構(gòu)：if語句旬牲、switch語句
- 循環(huán)結(jié)構(gòu)：while語句仿粹、for語句
if (條件表達式1) {
// 條件1為真時，做的事情
} else if (條件表達式2) {
// 條件1不滿足原茅，條件2滿足時吭历，做的事情
} else if (條件表達式3) {
// 條件1、2不滿足擂橘，條件3滿足時毒涧，做的事情
} else {
// 條件1、2贝室、3都不滿足時契讲，做的事情
}
//switch 條件分支語句
switch(表達式) {
case 值1：
語句體1;
break;
case 值2：
語句體2;
break;
...
...
default：
語句體 n+1;
break;
}
// for循環(huán)舉例
for (var i = 1; i < 13; i = i + 4) {
console.log(i);
}
// while循環(huán)語法：
while(條件表達式){
語句...
}
do{
語句...
}while(條件表達式)
while循環(huán)和 do...while循環(huán)的區(qū)別
這兩個語句的功能類似，不同的是：
- while是先判斷后執(zhí)行滑频，而do...while是先執(zhí)行后判斷捡偏。
也就是說，do...while可以保證循環(huán)體至少執(zhí)行一次峡迷，而while不能银伟。
break 中斷結(jié)束
- break可以用來退出switch語句或整個循環(huán)語句（循環(huán)語句包括for你虹、while。不包括if彤避。if里不能用 break 和 continue傅物，否則會報錯）。
- break會立即終止離它最近的那個循環(huán)語句琉预。
- 可以為循環(huán)語句創(chuàng)建一個label董饰，來標識當前的循環(huán)（格式：label:循環(huán)語句）。使用break語句時圆米，可以在break后跟著一個label卒暂，這樣break將會結(jié)束指定的循環(huán)，而不是最近的娄帖。
continue
- continue可以用來跳過當次循環(huán)也祠。
- 同樣，continue默認只會離他最近的循環(huán)起作用近速。
標簽（
label）
JavaScript語言允許诈嘿，語句的前面有標簽（label），相當于定位符削葱，用于跳轉(zhuǎn)到程序的任意位置奖亚，標簽的格式如下。
label:
語句
標簽可以是任意的標識符佩耳，但不能是保留字遂蛀，語句部分可以是任意語句谭跨。
標簽通常與break語句和continue語句配合使用干厚，跳出特定的循環(huán)。
top:
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){
if (i === 1 && j === 1) break top;
console.log('i=' + i + ', j=' + j);
}
}
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
5.對象
面向?qū)ο蠛喗?/p>
對象的作用是：封裝信息螃宙。比如Student類里可以封裝學生的姓名蛮瞄、年齡、成績等谆扎。
對象具有特征（屬性）和行為（方法）挂捅。
- 面向?qū)ο螅嚎梢詣?chuàng)建自定義的類型，很好的支持繼承和多態(tài)堂湖。
- 面向?qū)ο蟮奶卣鳎悍庋b闲先、繼承、多態(tài)无蜂。
對象（object）是 JavaScript 語言的核心概念伺糠，也是最重要的數(shù)據(jù)類型。
什么是對象斥季？簡單說训桶，對象就是一組“鍵值對”（key-value）的集合累驮，是一種無序的復(fù)合數(shù)據(jù)集合。
var obj = {
foo: 'Hello',
bar: 'World'
};
上面代碼中舵揭，大括號就定義了一個對象谤专，它被賦值給變量obj，所以變量obj就指向一個對象午绳。該對象內(nèi)部包含兩個鍵值對（又稱為兩個“成員”）置侍，第一個鍵值對是foo: 'Hello'，其中foo是“鍵名”（成員的名稱）箱叁，字符串Hello是“鍵值”（成員的值）墅垮。鍵名與鍵值之間用冒號分隔。第二個鍵值對是bar: 'World'耕漱，bar是鍵名算色，World是鍵值。兩個鍵值對之間用逗號分隔螟够。
- 只要不是那五種基本數(shù)據(jù)類型灾梦，就全都是對象。
- 如果使用基本數(shù)據(jù)類型的數(shù)據(jù)妓笙，我們所創(chuàng)建的變量都是獨立若河，不能成為一個整體。
- 對象屬于一種復(fù)合的數(shù)據(jù)類型寞宫，在對象中可以保存多個不同數(shù)據(jù)類型的屬性萧福。
-
對象是保存到堆內(nèi)存中的，每創(chuàng)建一個新的對象辈赋，就會在堆內(nèi)存中開辟出一個新的空間鲫忍。變量保存的是對象的內(nèi)存地址（對象的引用）。
換而言之钥屈，對象的值是保存在堆內(nèi)存中的悟民，而對象的引用（即變量）是保存在棧內(nèi)存中的。 - 如果兩個變量保存的是同一個對象引用篷就，當一個通過一個變量修改屬性時射亏，另一個也會受到影響。
對象的引用
如果不同的變量名指向同一個對象竭业，那么它們都是這個對象的引用智润，也就是說指向同一個內(nèi)存地址。修改其中一個變量未辆，會影響到其他所有變量窟绷。
var o1 = {};
var o2 = o1;
o1.a = 1;
o2.a // 1
o2.b = 2;
o1.b // 2
上面代碼中，o1和o2指向同一個對象鼎姐，因此為其中任何一個變量添加屬性钾麸，另一個變量都可以讀寫該屬性更振。
JavaScript 語言將函數(shù)看作一種值，與其它值（數(shù)值饭尝、字符串肯腕、布爾值等等）地位相同。凡是可以使用值的地方钥平，就能使用函數(shù)实撒。比如，可以把函數(shù)賦值給變量和對象的屬性涉瘾，也可以當作參數(shù)傳入其他函數(shù)知态，或者作為函數(shù)的結(jié)果返回。函數(shù)只是一個可以執(zhí)行的值立叛，此外并無特殊之處负敏。
由于函數(shù)與其他數(shù)據(jù)類型地位平等，所以在 JavaScript 語言中又稱函數(shù)為第一等公民秘蛇。
作用域（scope）指的是變量存在的范圍其做。在 ES5 的規(guī)范中，JavaScript 只有兩種作用域：一種是全局作用域赁还，變量在整個程序中一直存在妖泄，所有地方都可以讀取艘策；另一種是函數(shù)作用域蹈胡，變量只在函數(shù)內(nèi)部存在。ES6 又新增了塊級作用域
JS 數(shù)組
6.JS錯誤處理機制
Error 實例對象：
avaScript 解析或運行時朋蔫，一旦發(fā)生錯誤罚渐，引擎就會拋出一個錯誤對象。JavaScript 原生提供Error構(gòu)造函數(shù)斑举，所有拋出的錯誤都是這個構(gòu)造函數(shù)的實例搅轿。
var err = new Error('出錯了');
err.message // "出錯了"
message：錯誤提示信息
name：錯誤名稱（非標準屬性）
stack：錯誤的堆棧（非標準屬性）
錯誤類型
-
SyntaxError對象【語法錯誤】 -
ReferenceError對象【引用一個不存在的變量時發(fā)生的錯誤】 -
RangeError對象【超出有效范圍時發(fā)生的錯誤病涨。主要有幾種情況富玷，一是數(shù)組長度為負數(shù)，二是Number對象的方法參數(shù)超出范圍既穆，以及函數(shù)堆棧超過最大值赎懦。數(shù)組越界】 -
TypeError對象【變量或參數(shù)不是預(yù)期類型時發(fā)生的錯誤】 -
URIError對象【URI 相關(guān)函數(shù)的參數(shù)不正確時拋出的錯誤，主要涉及encodeURI()幻工、decodeURI()励两、encodeURIComponent()、decodeURIComponent()囊颅、escape()当悔、unescape()這六個函數(shù)】 -
EvalError對象【eval函數(shù)沒有被正確執(zhí)行時傅瞻，會拋出EvalError錯誤。該錯誤類型已經(jīng)不再使用了盲憎，只是為了保證與以前代碼兼容嗅骄，才繼續(xù)保留”恚】
處理錯誤&異常
- 1.
throw語句：手動中斷程序執(zhí)行溺森，拋出一個錯誤。 - 2.
try...catch結(jié)構(gòu)：一旦發(fā)生錯誤窑眯，程序就中止執(zhí)行了屏积。JavaScript提供了try...catch結(jié)構(gòu)，允許對錯誤進行處理磅甩，選擇是否往下執(zhí)行炊林。 - 3.
finally代碼塊：try...catch結(jié)構(gòu)允許在最后添加一個finally代碼塊，表示不管是否出現(xiàn)錯誤卷要，都必需在最后運行的語句铛铁。
7.console 對象與控制臺
console對象是 JavaScript 的原生對象，它有點像 Unix 系統(tǒng)的標準輸出stdout和標準錯誤stderr却妨，可以輸出各種信息到控制臺饵逐，并且還提供了很多有用的輔助方法。
console的常見用途有兩個彪标。
- 調(diào)試程序倍权，顯示網(wǎng)頁代碼運行時的錯誤信息。
- 提供了一個命令行接口捞烟，用來與網(wǎng)頁代碼互動薄声。
console對象的瀏覽器實現(xiàn)，包含在瀏覽器自帶的開發(fā)工具之中题画。以 Chrome 瀏覽器的“開發(fā)者工具”（Developer Tools）為例默辨，可以使用下面三種方法的打開它。
- 1.按 F12 或者Control + Shift + i（PC）/ Command + Option + i（Mac）苍息。
- 2.瀏覽器菜單選擇“工具/開發(fā)者工具”缩幸。
- 3.在一個頁面元素上，打開右鍵菜單竞思，選擇其中的“Inspect Element”表谊。
1.console.log()，console.info()盖喷，console.debug()
2.console.warn()爆办，console.error()
3.console.table()
4.console.count()用于計數(shù)，輸出它被調(diào)用了多少次课梳。
5.console.time()距辆，console.timeEnd()這兩個方法用于計時余佃，可以算出一個
操作所花費的準確時間。
