開篇語
最近筆者考完了所有的考試店读，只需要做課程設(shè)計就可以等著滾回家睡大覺了。所以要開始著手傷心團(tuán)隊的項目事宜了攀芯。最鬧心的就是Javascript了屯断。所以現(xiàn)在要狠學(xué)一下Js 我最喜歡的當(dāng)然還是廖雪峰大神的網(wǎng)站了。深入淺出侣诺，生動形象殖演，而且還有在線模擬器，圖文并茂年鸳，十分值得菜鳥入門趴久。所以我就寫下這么一個筆記。算是廖雪峰大神的教程的縮略版搔确，把重點(diǎn)歸納總結(jié)出來彼棍，供給大家學(xué)習(xí)~~~
廖雪峰官方網(wǎng)站
正文
JavaScript歷史
要了解JavaScript，我們首先要回顧一下JavaScript的誕生膳算。
在上個世紀(jì)的1995年座硕，當(dāng)時的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯(lián)網(wǎng)公司。
由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動態(tài)效果涕蜂，于是叫Brendan Eich這哥們在兩周之內(nèi)設(shè)計出了JavaScript語言华匾。你沒看錯，這哥們只用了10天時間机隙。
為什么起名叫JavaScript蜘拉？原因是當(dāng)時Java語言非常紅火萨西，所以網(wǎng)景公司希望借Java的名氣來推廣，但事實上JavaScript除了語法上有點(diǎn)像Java旭旭，其他部分基本上沒啥關(guān)系谎脯。
入門
JavaScript代碼可以直接嵌在網(wǎng)頁的任何地方，不過通常我們都把JavaScript代碼放到<code><head></code>中：
<html>
<head>
<script>
alert('Hello, world');
</script>
</head>
<body>
~~~~
</body>
</html>
第二種方法是把JavaScript代碼放到一個單獨(dú)的.js文件您机，然后在HTML中通過<code><script src="..."></script></code>引入這個文件
<html>
<head>
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
基本語法
JavaScript的語法和Java語言類似穿肄，每個語句以;結(jié)束年局，語句塊用<code>{...}</code>际看。但是，JavaScript并不強(qiáng)制要求在每個語句的結(jié)尾加<code>;</code>矢否，瀏覽器中負(fù)責(zé)執(zhí)行JavaScript代碼的引擎會自動在每個語句的結(jié)尾補(bǔ)上<code>;</code>仲闽。舉例如下:
if (2 > 1) {
x = 1;
y = 2;
z = 3;
if (x < y) {
z = 4;
}
if (x > y) {
z = 5;
}
}
以//開頭直到行末的字符被視為行注釋，注釋是給開發(fā)人員看到僵朗，JavaScript引擎會自動忽略：
// 這是一行注釋
alert('hello'); // 這也是注釋
另一種塊注釋是用/.../把多行字符包裹起來赖欣，把一大“塊”視為一個注釋：
/* 從這里開始是塊注釋
仍然是注釋
仍然是注釋
注釋結(jié)束 */
Number
JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示验庙，以下都是合法的Number類型：
123; // 整數(shù)123
0.456; // 浮點(diǎn)數(shù)0.456
1.2345e3; // 科學(xué)計數(shù)法表示1.2345x1000顶吮，等同于1234.5
-99; // 負(fù)數(shù)
NaN; // NaN表示Not a Number，當(dāng)無法計算結(jié)果時用NaN表示
Infinity; // Infinity表示無限大粪薛，當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時悴了，就表示為Infinity
計算機(jī)由于使用二進(jìn)制，所以违寿，有時候用十六進(jìn)制表示整數(shù)比較方便湃交，十六進(jìn)制用0x前綴和0-9，a-f表示藤巢，例如：0xff00搞莺，0xa5b4c3d2，等等掂咒，它們和十進(jìn)制表示的數(shù)值完全一樣才沧。
Number可以直接做四則運(yùn)算，規(guī)則和數(shù)學(xué)一致：
1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5
注意%是求余運(yùn)算绍刮。
字符串
字符串是以單引號'或雙引號"括起來的任意文本温圆，比如'abc'，"xyz"等等录淡。請注意捌木，''或""本身只是一種表示方式，不是字符串的一部分嫉戚，因此刨裆，字符串'abc'只有a澈圈，b，c這3個字符帆啃。
布爾值
布爾值和布爾代數(shù)的表示完全一致瞬女，一個布爾值只有true、false兩種值努潘，要么是true诽偷，要么是false，可以直接用true疯坤、false表示布爾值报慕，也可以通過布爾運(yùn)算計算出來：
true; // 這是一個true值
false; // 這是一個false值
2 > 1; // 這是一個true值
2 >= 3; // 這是一個false值
&&運(yùn)算是與運(yùn)算，只有所有都為true压怠，&&運(yùn)算結(jié)果才是true：
true && true; // 這個&&語句計算結(jié)果為true
true && false; // 這個&&語句計算結(jié)果為false
false && true && false; // 這個&&語句計算結(jié)果為false
||運(yùn)算是或運(yùn)算眠冈，只要其中有一個為true，||運(yùn)算結(jié)果就是true：
false || false; // 這個||語句計算結(jié)果為false
true || false; // 這個||語句計算結(jié)果為true
false || true || false; // 這個||語句計算結(jié)果為true
!運(yùn)算是非運(yùn)算菌瘫，它是一個單目運(yùn)算符蜗顽，把true變成false，false變成true：
! true; // 結(jié)果為false
! false; // 結(jié)果為true
! (2 > 5); // 結(jié)果為true
布爾值經(jīng)常用在條件判斷中雨让，比如：
var age = 15;
if (age >= 18) {
alert('adult');
} else {
alert('teenager');
}```
比較運(yùn)算符
當(dāng)我們對Number做比較時雇盖，可以通過比較運(yùn)算符得到一個布爾值：
2 > 5; // false
5 >= 2; // true
7 == 7; // true
實際上，JavaScript允許對任意數(shù)據(jù)類型做比較：
false == 0; // true
false === 0; // false
要特別注意相等運(yùn)算符==栖忠。JavaScript在設(shè)計時崔挖，有兩種比較運(yùn)算符：
第一種是==比較，它會自動轉(zhuǎn)換數(shù)據(jù)類型再比較娃闲，很多時候虚汛，會得到非常詭異的結(jié)果；
第二種是===比較皇帮，它不會自動轉(zhuǎn)換數(shù)據(jù)類型卷哩，如果數(shù)據(jù)類型不一致，返回false属拾，如果一致将谊，再比較。
由于JavaScript這個設(shè)計缺陷渐白，不要使用==比較尊浓，始終堅持使用===比較。
另一個例外是NaN這個特殊的Number與所有其他值都不相等纯衍，包括它自己：
NaN === NaN; // false
唯一能判斷NaN的方法是通過isNaN()函數(shù)：
isNaN(NaN); // true
最后要注意浮點(diǎn)數(shù)的相等比較：
1 / 3 === (1 - 2 / 3); // false
這不是JavaScript的設(shè)計缺陷栋齿。浮點(diǎn)數(shù)在運(yùn)算過程中會產(chǎn)生誤差，因為計算機(jī)無法精確表示無限循環(huán)小數(shù)。要比較兩個浮點(diǎn)數(shù)是否相等瓦堵，只能計算它們之差的絕對值基协，看是否小于某個閾值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
--------
>#####數(shù)組
數(shù)組是一組按順序排列的集合，集合的每個值稱為元素菇用。JavaScript的數(shù)組可以包括任意數(shù)據(jù)類型澜驮。例如：
[1, 2, 3.14, 'Hello', null, true];
上述數(shù)組包含6個元素。數(shù)組用[]表示惋鸥，元素之間用,分隔杂穷。
另一種創(chuàng)建數(shù)組的方法是通過Array()函數(shù)實現(xiàn)：
new Array(1, 2, 3); // 創(chuàng)建了數(shù)組[1, 2, 3]
---------
>#####對象
JavaScript的對象是一組由鍵-值組成的無序集合，例如：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
--------
>#####變量
變量的概念基本上和初中代數(shù)的方程變量是一致的卦绣，只是在計算機(jī)程序中耐量，變量不僅可以是數(shù)字，還可以是任意數(shù)據(jù)類型迎卤。
變量在JavaScript中就是用一個變量名表示拴鸵，變量名是大小寫英文、數(shù)字蜗搔、$和_的組合，且不能用數(shù)字開頭八堡。變量名也不能是JavaScript的關(guān)鍵字樟凄，如if、while等兄渺。申明一個變量用var語句缝龄，比如：
var a; // 申明了變量a，此時a的值為undefined
var $b = 1; // 申明了變量$b挂谍，同時給$b賦值叔壤，此時$b的值為1
var s_007 = '007'; // s_007是一個字符串
var Answer = true; // Answer是一個布爾值true
var t = null; // t的值是null
---------
>#####條件判斷
JavaScript使用```if () { ... } else { ... }```來進(jìn)行條件判斷。例如口叙，根據(jù)年齡顯示不同內(nèi)容炼绘，可以用if語句實現(xiàn)如下：
var age = 20;
if (age >= 18) { // 如果age >= 18為true，則執(zhí)行if語句塊
alert('adult');
} else { // 否則執(zhí)行else語句塊
alert('teenager');
}```
其中else語句是可選的妄田。如果語句塊只包含一條語句俺亮，那么可以省略{}：
var age = 20;
if (age >= 18)
alert('adult');
else
alert('teenager');
省略{}的危險之處在于，如果后來想添加一些語句疟呐，卻忘了寫{}脚曾，就改變了if...else...的語義，例如：
var age = 20;
if (age >= 18)
alert('adult');
else
console.log('age < 18'); // 添加一行日志
alert('teenager'); // <- 這行語句已經(jīng)不在else的控制范圍了
如果還要更細(xì)致地判斷條件启具，可以使用多個if...else...的組合：
var age = 3;
if (age >= 18) {
alert('adult');
} else if (age >= 6) {
alert('teenager');
} else {
alert('kid');
}
循環(huán)JavaScript的循環(huán)有兩種本讥，一種是for循環(huán)，通過初始條件、結(jié)束條件和遞增條件來循環(huán)執(zhí)行語句塊：
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000
for ... in
for循環(huán)的一個變體是for ... in循環(huán)拷沸，它可以把一個對象的所有屬性依次循環(huán)出來：
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
alert(key); // 'name', 'age', 'city'
}```
**while**
for循環(huán)在已知循環(huán)的初始和結(jié)束條件時非常有用旨椒。而上述忽略了條件的for循環(huán)容易讓人看不清循環(huán)的邏輯，此時用while循環(huán)更佳堵漱。
while循環(huán)只有一個判斷條件综慎，條件滿足，就不斷循環(huán)勤庐，條件不滿足時則退出循環(huán)示惊。比如我們要計算100以內(nèi)所有奇數(shù)之和，可以用while循環(huán)實現(xiàn)：
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500```
在循環(huán)內(nèi)部變量n不斷自減愉镰，直到變?yōu)?1時米罚，不再滿足while條件，循環(huán)退出丈探。
do ... while
最后一種循環(huán)是do { ... } while()循環(huán)录择，它和while循環(huán)的唯一區(qū)別在于，不是在每次循環(huán)開始的時候判斷條件碗降，而是在每次循環(huán)完成的時候判斷條件：
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100```
用do { ... } while()循環(huán)要小心隘竭，循環(huán)體會至少執(zhí)行1次，而for和while循環(huán)則可能一次都不執(zhí)行讼渊。
--------
>#####Map
Map是一組鍵值對的結(jié)構(gòu)动看，具有極快的查找速度。
舉個例子爪幻，假設(shè)要根據(jù)同學(xué)的名字查找對應(yīng)的成績菱皆，如果用Array實現(xiàn)，需要兩個Array：
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];```
給定一個名字挨稿，要查找對應(yīng)的成績仇轻，就先要在names中找到對應(yīng)的位置，再從scores取出對應(yīng)的成績奶甘，Array越長篷店，耗時越長。
如果用Map實現(xiàn)甩十，只需要一個“名字”-“成績”的對照表船庇，直接根據(jù)名字查找成績，無論這個表有多大侣监，查找速度都不會變慢鸭轮。用JavaScript寫一個Map如下：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
初始化Map需要一個二維數(shù)組，或者直接初始化一個空Map橄霉。Map具有以下方法：
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
由于一個key只能對應(yīng)一個value窃爷，所以邑蒋，多次對一個key放入value，后面的值會把前面的值沖掉：
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
Set
Set和Map類似按厘，也是一組key的集合医吊，但不存儲value。由于key不能重復(fù)逮京，所以卿堂，在Set中，沒有重復(fù)的key懒棉。
要創(chuàng)建一個Set草描，需要提供一個Array作為輸入，或者直接創(chuàng)建一個空Set：
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重復(fù)元素在Set中自動被過濾：
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
注意數(shù)字3和字符串'3'是不同的元素策严。
通過add(key)方法可以添加元素到Set中穗慕，可以重復(fù)添加，但不會有效果：
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
通過delete(key)方法可以刪除元素：
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
第一部分結(jié)束語
本來是想在大神的基礎(chǔ)上加一些自己的見解的妻导，但是看了不少次了逛绵，還是覺得大神寫的真是精煉，寥寥幾句加進(jìn)去也無異于畫蛇添足倔韭，所以直接搬運(yùn)我覺得精華的一部分就來啦术浪。明天再繼續(xù)寫其他的。我先去看下后面的內(nèi)容~~~
