前言：
最近在前端這塊，發(fā)現(xiàn)自己生疏了，連最基本的js都忘的差不多了。于是趁著周末，參考了廖雪峰老師的JS教程以及自己對JS的理解，重新梳理了一遍。如果有什么錯誤還請大家及時指出。
一.js的歷史：略過
二.js的規(guī)范及版本：
說起javascript，不得不提ECMAScript，ECMA（European Computer Manufacturers Association）組織定制了JavaScript語言的標(biāo)準(zhǔn)，被稱為ECMAScript標(biāo)準(zhǔn)。
目前最新版本2017年發(fā)布的ES7.0 ,但是現(xiàn)在用的最多的還是ES5.1,以及2015年發(fā)布的ES6.0(其實(shí)也不多)。我們學(xué)習(xí)還是以ES5.1為主，附帶學(xué)習(xí)一些ES6.0的新特性。
三.js的位置：理論上可以放在html的任意位置，但常見的有2種放法
1.</head>標(biāo)簽內(nèi)（不推薦）：我們知道，服務(wù)器返回一個html文件，瀏覽器首先會將html文件裝載至內(nèi)存，生成dom tree，然后自上而下解析，遇到<script>標(biāo)簽時，瀏覽器馬上會執(zhí)行，執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容（包括頁面的渲染、其它資源的下載）。因?yàn)闉g覽器需要一個穩(wěn)定的DOM樹結(jié)構(gòu)，而js中很有可能有代碼直接改變了DOM樹結(jié)構(gòu)，比如使用 document.write 或 appendChild。所以需要重新構(gòu)建DOM樹。不過我們可以在<script>標(biāo)簽上使用defer="defer"屬性，告訴瀏覽器延遲加載js,就不會阻塞頁面后續(xù)dom的解析。遺憾的是這個屬性只有部分瀏覽器支持。（IE,FireFox）
2.</body>標(biāo)簽前(推薦)：這種方式，dom tree 已經(jīng)解析完畢。此時執(zhí)行腳本不會改變dom樹的原有的結(jié)構(gòu)。
四.js的三大組成部分：
1.ECMAScript：這是JS的核心。很好理解，javascript是ES的一個實(shí)現(xiàn)，它遵從ES的標(biāo)準(zhǔn)。ES定義了JS的基本語法，JS的數(shù)據(jù)類型等等。
2.DOM(文檔對象模型)：DOM是 HTML 和 XML 的應(yīng)用程序接口，也就是對節(jié)點(diǎn)的操作。
3.BOM(瀏覽器對象模型)：JS是運(yùn)行在瀏覽器上，BOM是其對瀏覽器窗口進(jìn)行訪問和操作接口。
五.JavaScript的數(shù)據(jù)類型
1.Number（數(shù)值型）：JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示。其中也包含NaN(Not A Number) ，Infinity（無限大）以及十六進(jìn)制數(shù)（0x開頭）。
2.字符串（' '," "）:被單引號或雙引號包含的任意字符。推薦使用雙引號。如果要表示'，可以使用\進(jìn)行轉(zhuǎn)義，常見的轉(zhuǎn)義符有：\n表示換行，\t表示制表符。多個字符串之間可以使用+拼接。在ES6標(biāo)準(zhǔn)中，使用了一種模版字符串進(jìn)行拼接${字符串}，類似于java中的El表達(dá)式。
JS中，字符串也是不可變的（和java中的String類一樣），常用的字符串方法有：
a.toUpperCase()：把字符串a(chǎn)全部變?yōu)榇髮?br>
a.toLowerCase()：把字符串a(chǎn)全部變?yōu)樾?br>
a.indexOf(str)：返回字符串str在字符串a(chǎn)的位置，索引從0開始，沒有則返回-1
a.substring(index1,[index2]):返回字符串a(chǎn)在index1和indexe2中的子串，索引從0開始，不包含index2.
a.substr(index,[length]):兩個參數(shù)都為正,返回字符串a(chǎn)從index開始length個的子串。索引從0開始，length參數(shù)可選，不寫則返回index到a結(jié)尾的子串（不推薦）
a.slice(start,end); 兩個參數(shù)可正可負(fù)，正值代表從左截取，負(fù)值代表從右截取，返回值：[start,end)的字符串
charAt(index)：返回index下標(biāo)處的字符串；
a.split(separator,limit)：字符串分割為數(shù)組，參數(shù)1指定字符串或正則表達(dá)式，參數(shù)2指定數(shù)組的最大長度（若用于數(shù)組）；
arr.join(separator)：數(shù)組連接成字符串，參數(shù)為連接符。
str.replace(rgExp/substr,replaceText) 替換字符串，返回替換后的字符串，參數(shù)1是替換前的字符串，參數(shù)2是替換后的字符串
str.match(rgExp); 匹配給定的正則表達(dá)式，返回true或false;
看完發(fā)現(xiàn)基本上和java就是一毛一樣啊，嗯，oracle估計要將JavaScript團(tuán)隊告上法庭，原因是JS很多方法侵犯了Java的版權(quán)（滑稽臉 =.=）
3.Boolean(布爾值):true 和 flase 判斷時用
4.null和undefined:表示空和未定義，差別不是很大，我們一般用null就行，判斷參數(shù)是否傳遞可以用underfined
5.數(shù)組：創(chuàng)建數(shù)組可以使用[]和 new Array(),但我們一般都用前者。數(shù)組的索引從0開始（同java數(shù)組），如果訪問超出索引的元素，返回underfined.例：var arr = [1, 2, 3.14, 'Hello', null, true];數(shù)組的長度可以用length屬性獲取。常用的數(shù)組方法：
基本方法：
arr.toLocaleString()：返回數(shù)組的本地字符串形式，用，分開每個元素；
arr.toString()：返回數(shù)組的字符串形式，用，分開每個元素；
arr.valueOf()：返回Array[length];
棧方法（先進(jìn)后出）：
arr.push():向數(shù)組末尾添加新的元素，返回的是數(shù)組新的長度，不會創(chuàng)建新的數(shù)組；
arr.pop():刪除數(shù)組最后一個元素并且返回該元素。如果數(shù)組為空就返回undefined，不會創(chuàng)建新的數(shù)組；
隊列方法：（先進(jìn)先出）：
arr.shift():刪除數(shù)組中第一個元素，返回第一個元素的值。該方法會改變原數(shù)組的長度，不會創(chuàng)建新的數(shù)組
arr.unshift():，向數(shù)組頭部添加元素，返回的是新數(shù)組的長度，不會創(chuàng)建新的數(shù)組；
排序方法：
arr.reverse():返回反轉(zhuǎn)的數(shù)組；
arr.sort():按照升序排列數(shù)組，內(nèi)部會調(diào)用toString()方法；
實(shí)例如下：
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
var values = [0, 1, 2, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
操作方法:
arr.concat(arr1):連接2個數(shù)組，返回新的連接后的數(shù)組；
arr.splice(index,howmany,[element1],.....,[elementX]):可用于插入、刪除或替換數(shù)組的元素;
具體如下：
刪除（index,howmany）：要刪除的第一項的位置和要刪除的項數(shù)。
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
console.log(colors); // greeen, blue
console.log(removed); // red
添加（index,howmany,element1）：起始位置、0（要刪除的項數(shù)）和要插入的項
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // []
替換（index,howmany,element1.....elementX）：起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]
arr.indexOf(element):同字符串的indexOf()方法；
arr.slice(index1,index2):同字符串的slice()方法，返回一個新的數(shù)組；
arr.join(separator):按照指定的字符串拼接數(shù)組元素，返回拼接后的字符串
Tips:多維數(shù)組：即數(shù)組的元素又是一個數(shù)組：例如，
var arr = [[1, 2, 3], [400, 500, 600], '-'];
這時可以通過多個下標(biāo)進(jìn)行訪問：var one = arr[0][1]//2
6.對象：JS的對象由鍵—值對組成，key是字符串類型，value可以是任意類型。
例：var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
訪問對象的屬性可以用對象名.屬性名：person.name
JS的對象可以動態(tài)賦值，例如：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // undefined
7.變量：JS中申明一個變量用var關(guān)鍵字，注意，JS是弱類型語言，變量可以賦不同類型的值，例：var a = 3 ,a = "3"也是可以的。
六.JS的運(yùn)算符
基本同java, 常見的有：+，-，*，/,%,&&,||,!,==,===
其中：== 和 ===是有一定區(qū)別的，
我們?nèi)绻莾H僅比較String，Number 的值，還是用==,比較對象等高級數(shù)據(jù)類型，用===.
另外唯一能判斷NaN的方法是通過isNaN()函數(shù)： NaN===NaN //false
isNaN(NaN)//true
另外：JS把null、undefined、0、NaN和空字符串''視為false，其他值一概視為true;
七：JS中的基本彈框：
alert()； 彈出個提示框 （確定）
confirm()； 彈出個確認(rèn)框 （確定，取消）
prompt()； 彈出個輸入框 讓用戶輸入東西
八.strict模式
這是由于JS的早期的一個BUG,如果申明變量不適用var關(guān)鍵字，該變量是一個全局變量，后來ES對其修復(fù)，在JS的第一行寫上：'use strict';
現(xiàn)在多數(shù)瀏覽器都支持這個標(biāo)準(zhǔn)，我們最好也按這個來。
九：JS的循環(huán)：
1.普通for循環(huán)，for(;;)
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000
2.for ... in循環(huán)：
1>.循環(huán)對象
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}
2>循環(huán)數(shù)組
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
3.while循環(huán)：
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
4.do...while循環(huán)：
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
用法基本同java，沒什么好講的
十.Map（ES6新增）：一組鍵值對的集合,鍵不能重復(fù)
'use strict';
var m = new Map();
var s = new Set();
console.log('你的瀏覽器支持Map和Set！');
1.Map的創(chuàng)建與基本方法：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
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
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
沒什么好說的，代碼說話
十一：Set：一組key的集合，key不能重復(fù)。
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
沒什么好說的。。。
十二.iterable:（ES6新增）：我怎么感覺就是抄襲java的呢？Map,Set,Iterable,就差個List了。。。
for ... of循環(huán)（ES6新增）：
'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
console.log('你的瀏覽器支持for ... of');
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
console.log(x);
}
for (var x of s) { // 遍歷Set
console.log(x);
}
for (var x of m) { // 遍歷Map
console.log(x[0] + '=' + x[1]);
}
for...in 與for...of的區(qū)別：一個Array數(shù)組實(shí)際上也是一個對象.
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
console.log(x); // 'A', 'B', 'C'
}
forEach()循環(huán)（ES5.1）：看到這里，我不得不懷疑JS和java的關(guān)系了。。。常威，你還說你不會武功！！！
'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當(dāng)前元素的值
// index: 指向當(dāng)前索引
// array: 指向Array對象本身
console.log(element + ', index = ' + index);
});
循環(huán)Set:Set沒有索引，因此回調(diào)函數(shù)的前兩個參數(shù)都是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
循環(huán)Map:Map的回調(diào)函數(shù)參數(shù)依次為value、key和map本身
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
先寫這么多。。。收工ING
