js一些梳理

 前端學習網站：掘金　　博客園　　CSDN　大前端

瀏覽器組成 1.Shell部分2.內核
內核的組成 1.渲染引擎 負責頁面顯示 2.JS引擎 3. 其餘模塊
主流內核介紹
>> * Trident(IE內核)
>> * Gecko(火狐FireFox內核)
>> * Webkit(蘋果Safari內核)
>> * Presto(歐朋Opera內核)
>> * Webkit的分支Blink內核(谷歌Chrome內核)

JS引擎---Chrome瀏覽器,使用新的JS引擎V8,能夠直接把JS代碼轉換爲機器碼,因此執行速度大大提升
JS的組成
* ECMAScript
* DOM(Document Object Model)
* BOM(Browser Object Model)

JS運行在哪裏---JS是一門解釋性語言,運行在瀏覽器中,由瀏覽器的JS引擎負責解釋運行JS代碼。

JS是一門語言
>> * 任何屬性均可以修改
>> * 任何標籤均可以有ID屬性,能夠經過ID屬性獲取該元素
>> * 修改屬性時，HTML當中怎麼寫，JS當中就怎麼寫,但class是特例,用className
>> * 修改樣式的格式：obj.style.屬性＝值
>> * JS用style修改屬性時，若是CSS的屬性有"-"的話，一般把"-"去掉，而後把"-"後面的單詞首字母大寫
>> * 傳統的作法是把script標籤寫在head標籤裏面
>> * script標籤中的type屬性能夠不用寫, 默認就是type="text/javascript"
>> * 延遲屬性defer,添加該屬性後,腳本文件會在整個頁面都解析完畢後執行
>> * 異步屬性async,添加該屬性後,腳本會當即下載執行,但不妨礙頁面中的其餘操做

noscript標籤
指定在不支持腳本的瀏覽器中顯示替代內容
>> * 不支持腳本指瀏覽器自身不支持腳本，或，支持，可是被禁用了

變量命名
> * 第一個字符必須是字母,下劃線(_)或者美圓符號($)
> * 其餘字符能夠是字母,下劃線(_)或者美圓符號($)或者數字
> * 命名通常採用駝峯大小寫格式,即第一個字母小寫,剩下的每一個單詞首字母大寫
> * 不能用關鍵字,保留字作爲標示符

* 嚴格模式(strict mode)
> * 做用:告訴JS引擎切換到嚴格模式下解析代碼,這種模式能夠消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲,這是在ES5中新增的一種運行模式
>> * 針對整個文件,將"use strict"放在腳本文件的第一行,則整個腳本都將以"嚴格模式"運行,若是這行語句不在第一行,則無效
>> * 針對單個函數,將"use strict"放在函數體的第一行,則整個函數以"嚴格模式"運行。
> * 注意點:
>> * 一樣的代碼,在"嚴格模式"中,可能會有不同的運行結果;一些在"正常模式"下能夠運行的語句,在"嚴格模式"下將不能運行。
function sayHi(){
"use strict"
alert(!this);
}

循環結構
1-while循環
初始值;
while(循環退出條件){
循環體(語句)
循環退出條件的改變
}
2-for循環
for(初始值;循環退出條件;循環退出條件的改變){
循環體(語句)
}

在使用屬性時,用[]能夠代替全部的.,可是.不必定能代替[]

數組
> * 能夠經過下標來訪問數組中的元素
> * 數組的下標是從0開始的
> * 能夠經過數組的length屬性獲取到數組的長度
> * getElementsByTagName方法獲取的數據返回的就是一個數組

數據類型 Undefined、Boolean、Number、String、function

Object包括 對象、數組、null

Undefined 未定義
> * 未定義類型只有一個值undefined,這個值的意思是變量沒有定義
> * 未定義有兩種狀況,一個是真的沒有定義,一個是定義了可是沒有賦值

Null 空對象
> * 空對象類型只有一個值null,表明一個空對象指針,因此用 typeof 檢測時會返回 'object'

Boolean 布爾類型
> * 布爾類型有兩個值:true和false
> * 真:true,非零數字,非空字符,非空對象,
> * 假:false,數字零,空字符,null,undefined

Number 數字類型
> * 用來表示數字
> * 能夠表示整數和小數(也叫浮點數或者雙精度數)

String 字符串類型
> * 用單引號或者雙引號括起來的字符序列
> * 單引號和雙引號表示的字符串徹底同樣

Object 對象類型
var car = {type:"Fiat", model:500, color:"white"};
> * 數組在ES中是對象
> * 函數在ES中是對象,但函數也有一些特殊的屬性,因此用 typeof 檢測時會返回 'function'
> * 對象是一組數據和功能的集合
> * 對象是變量的容器
> * 對象是屬性和方法的容器。
> * 對象的方法定義了一個函數，並做爲對象的屬性存儲

JS變量的類型由值決定,而且隨着值的變化而變化

顯式轉換parseInt 和 parseFloat

> * 能把首位不是字符的字符串轉化爲數字
例如：'a123' 不會轉化 返回一個NaN
'12a3' 轉化爲12 返回一個number類型的數字

> * parseInt用來轉換整數,parseFloat能夠轉換整數和小數
> * 轉換時忽略字符串前面的空格
> * 若是第一個字符不是數字或者負號加數字,會返回NaN(Not a Number)
> * 從左到右解析直到第一個非數字爲止

isNaN(x) 返回true或false
> *因爲NaN和NaN並不相等,因此用isNaN函數來判斷轉換後的值是否是數字

變量的做用域
全局變量 >> 定義在全部函數外面,全部的函數均可以使用的變量
局部變量 >> 定義在函數的內部,指定在函數內部或者函數的子函數中使用
> * 函數執行時依賴於變量的做用域,這個做用域時在定義的時候決定的,而不是在調用的時候決定

變量的提高 var
定義會被提高 賦值不會被提高

變量的類型,Undefined,Null,Boolean,Number,String
> * 基本類型訪問的變量的實際值
> * 基本類型不能動態的添加屬性
> * 基本類型變量複製時會新建一個變量並分配空間,將變量的值分配在新的空間上

引用類型
> * 引用類型主要指保存在內存中的對象,包括對象,數組,函數
> * 引用類型訪問的是引用,引用是指向內存的一個指針
> * 引用類型能夠動態的添加屬性
> * 引用類型複製時不會新建空間,只是複製了一個新的引用

關係 > <, >,<=,>=,==,!=,===,!==
== 不區分類型的相等 計算時會先轉換類型，再比較 <相等式>
!= 相等式的非形式
=== 區分類型的相等 計算時不作類型轉變，類型不一樣就必定不等 <恆等式>
!== 恆等式的非形式

邏輯 與(&&),或(||),否/非(!)

函數的返回值
在函數體內經過return把函數的執行結果返回
> * 一個函數只能有一個返回值
> * 沒有返回值或者只有return的函數返回值是undefined
> * 函數的返回值是在調用的時候獲取的

閉包 子函數可使用父函數中的變量
> * 變量的值始終保持在內存中，不會在調用後被自動清除。
> * 大量使用下降網頁性能 ie瀏覽器中會內存泄露
> * 當在函數內部的定義變量不用var a=1;時 用a=1;時 該定義變量會成爲全局定義變量

函數function(){}做用域
* 塊級做用域:在代碼塊(花括號中的代碼)中聲明的變量在代碼塊外不可用
* 函數做用域:在函數內部聲明的變量在函數內部以及子函數中均可以使用
* JS沒有塊級做用域,而是函數做用域
* JS中由於是函數做用域,因此有聲明提高的現象,即JS函數中聲明的全部變量(不涉及賦值)都被提早到函數的頂部
var a=function(){} 這種匿名函數變量a會被提高 函數內的賦值不會被提高 只有當調用時纔會被初始化
function a(){} 這種命名函數編譯後函數聲明和他的賦值都會被提早。也就是說函數聲明過程在整個程序執行以前的預處理就完成了，因此只要處於同一個做用域，就能夠訪問到，即便在定義以前調用它也能夠。
因此匿名函數節省資源

遞歸調用
本身調用本身的函數

函數的不定參數
> * 每個函數都有一個參數數組,數組的名字是arguments
> * 嚴格模式arguments.callee已被廢棄
> * 參數數組中的值由‘調用時’傳遞,按照傳遞參數的順序存儲在數組中

數組的定義
1.var arr = new Array(1,2,3);
2.var arr = [1,2,3]
1和2的做用時同樣的,方法2效率上更高一些
> * 能夠改變數組的length屬性,改變後的值是數組的實際長度,能夠經過這種方法清空數組

DOM節點
子節點包括>> 文本節點>> 元素節點
document.createElement('li')
document.getElementById('ul1')
document.getElementsByTagName('li') 獲取一個數組
document.getElementsByName(elementName) 經過節點的name獲取節點 返回具備一樣名稱的節點數組
document.getElementsByClassName("example");返回文檔中全部指定類名的元素集合數組
document.querySelector('#xxx/.xxx') 能夠用id, 類, 類型, 屬性, 屬性值等來選取元素對於多個選擇器，使用逗號隔開，返回一個匹配的元素。方法返回匹配指定選擇器的第一個元素。若是你須要返回全部的元素，請使用 querySelectorAll() 方法替代。

> * 獲取子節點的方法
var aLi=aUl.childNodes 獲取父元素的全部子節點
var aLi=aUl.children 獲取父元素的全部元素節點 children[0]第一個
>> * oParentNode.childNodes,返回一個數組,包含父節點中的全部文本節點和元素節點
>> * 經過nodeType屬性來判斷節點的類型,1爲元素節點,3爲文本節點
>> * oParentNode.children,返回一個數組, 包含父節點中的全部元素節點

> * 獲取父節點的方法
var oBox2.parentNode 獲取子元素的父節點
var oBox2.offsetParent 獲取參考絕對定位貼靠的元素節點
> * oNode.parentNode,子節點的父節點對象
> * oNode.offsetParent,子節點絕對定位時,獲取參考的父節點對象

> * xxx的第一個子節點 xxx.firstChild,
> * xxx的第一個元素子節點 xxx.firstElementChild，
> * xxx的最後一個子節點 xxx.lastChild
> * xxx的最後一個元素子節點 xxx.lastElementChild，

> * 兄弟節點
> * 下一個兄弟節點nextSibling,
下一個兄弟元素節點nextElementSibling
> * 前一個兄弟節點previousSibling,
前一個兄弟元素節點previousElementSibling

獲取節點的值
獲取dom節點以後，是一個對象 對象上有childNodes、innerHTML、innerText 等好多屬性
獲取dom節點數組 childNodes是一個數組包含元素節點和文本節點
獲取一個dom節點 好比<p>4545</p> childNodes數組裏只有文本節點
節點.innerHTML html
節點.innerText 文本值

獲取樣式函數
> * 獲取行間樣式 elem.style[attr] css樣式表中的獲取不到
> * 獲取系統已定義過的參數 與行間樣式 getComputedStyle(obj,false)[attr]
Window.getComputedStyle()方法返回一個對象，返回的style是實時的，該對象在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的全部CSS屬性的值
Window.getComputedStyle(elem,null).getPropertyValue("height")

obox.offsetLeft/Top/Width/Height 獲取obox的left值 offsetLeft 獲取的是相對於父對象的左邊距
obox..style.left 獲取或設置相對於 具備定位屬性(position定義爲relative)的父對象 的左邊距
1. style.left 返回的是字符串，如28px，offsetLeft返回的是數值28
2. style.left是讀寫的，offsetLeft是隻讀的，因此要改變div的位置，只能修改style.left

操做屬性
> * 獲取屬性的值:getAttribute(名稱),有屬性獲取值,沒有屬性返回null
> * 設置屬性:setAttribute(名稱,值) 例如xxx.setAttribute('value','123')
> * 刪除屬性:removeAttribute(名稱)

建立元素 document.createElement('標籤名')
var node=document.createElement('li')

追加元素 parentNode.appendChild(node)
在父元素全部子元素的末尾插入名字爲node的子元素
在不建立node的時候會把頁面已經存在的node添加到parentNode裏

插入元素
> parentNode.insertBefore(node1,node2), 把node1插入在node2以前

刪除元素
> parentNode.removeChild(node)

給p、div等一些非表單元素的標籤加上contenteditable="true"能使該標籤變爲可編輯模式
* textarea差很少 區別在沒有滾動條而是內容在撐起高度 placeholder不可用
* 雙向綁定數據 你編輯完 直接就能獲取到值 很神奇

定時器 按照異步類型執行
* setInterval(fn,時間) 開啓循環型定時器
* setTimeout(fn,時間) 開啓延遲型定時器

* clearInterval(定時器) 關閉循環型定時器
* clearTimeout(定時器) 關閉延遲型定時器
關閉的爲開啓時的定時器

> * 循環型定時器在定時器關閉前會一直按照設定的間隔時間執行,延遲型定時器只執行一次
> * 定時器中指定的時間指的是該時間後把代碼加入到執行隊列中,若是隊列空閒就當即執行

窗口可視高度 window.innerHeight 隨窗口拉伸變化 移動端可表示手機的CSS像素 物理像素*dpr（2）=document.documentElement.clientHeight

document.body   頁面的body節點

• document.body.clientHeight  頁面body的高 不算頁面最上面的margin-top和頁面最下面的margin-bottom
• document.body.scrollTop  滾動距離-最後一屏到頂部的距離
• document.body.clientHeight  頁面可視窗口的高

document.documentElement  頁面的html節點

• document.documentElement.scrollHeight  HTML總高
• document.documentElement.scrollTop  滾動距離-最後一屏到頂部的距離
• document.documentElement.clientHeight  頁面可視窗口的高

>> * document.body.scrollTop 滾動距離,safari用
>> * document.documentElement.scrollTop 滾動距離,chrome/ff...用
>> * window.onresize事件,窗口大小發生變化時觸發
>> * window.onscroll事件,滾動條變化時觸發

頁面觸底事件

window.onscroll = function (){
　　var marginBot = 0;
　　if (document.documentElement.scrollTop){
　　　　var X=document.documentElement.scrollHeight;
　　　　var Y=document.documentElement.scrollTop+document.body.scrollTop;
　　　　var Z=document.documentElement.clientHeight;
　　　　marginBot=X-Y-Z;
　　} else {
　　　　var J=document.body.scrollHeight;
　　　　var I=document.body.scrollTop;
　　　　var K=document.body.clientHeight;
　　　　marginBot=J-I-K;
　　}
　　if(marginBot<=0) {
　　　　//do something
}} 

節點的寬高
elem.style.width :行間樣式-寫在HTML的樣式的元素 內容的寬高
elem.offsetWidth/offsetHeight：內容+內邊距(padding)+邊框+滾動條寬度
getComputedStyle(elem,false)['width'] : 內容的寬高


* window表明一個瀏覽器對象
* window對象是一個全局對象,所以在全局做用域中聲明的變量函數會變成window對象的屬性和方法

window.open() > 打開一個新窗口並進入新打開的窗口對象
* window.open("about:blank","_blank");
* window.open("about:blank");默認blank
* window.open("about:blank","_self");
* window.open("http://www.kuazhu.com");

window.close() * 不能關閉用戶打開的窗口

window.navigator.userAgent * 當前瀏覽器的信息

window.location 當前頁面的相關信息對象,能夠讀取和賦值
* document.location和window.location是同一個對象
* window.location.href 屬性表明當前頁面的完整url
* window.location.assign(url),assign方法會打開url,若是把location.href或者location設置爲一個url值,也會調用assign方法
* location的其餘屬性

window.histroy * 用戶上網的記錄,從窗口被打開的那一刻算起
history.go(-1) == history.back()
history.go(1) == history.forward()

交互
var res = prompt("請輸入你的姓名？");
肯定 res爲輸入的文字 無內容肯定爲空'' 取消爲null

var res = confirm("你肯定刪除嗎?");
肯定爲true 取消爲false

而後逐級向上傳播事件 爲冒泡
從事件傳遞的最上面逐級向下傳播 爲捕獲
阻止事件冒泡 event.stopPropagation()

鼠標事件
> event.clientX 和 event.clientY是鼠標的當前可視區座標 不包括滾動的距離
> obj.onmousedown 當鼠標按下去時
> obj.onmouseup 當鼠標按鍵被鬆開
> document.onmousewheel 鼠標滾輪事件
> oEvent.wheelDelta 向下滾滾輪爲正值向上滾滾輪爲負值

鍵盤事件
* 鍵盤按下 obj.onkeydown
* 鍵盤擡起 obj.onkeyup
* 鍵盤代碼 event.keyCode event.keyCode==12 值爲數字
* 輔助鍵 event.ctrlKey event.shiftKey event.altKey

默認行爲是瀏覽器的自帶行爲
document.oncontextmenu 右鍵菜單
阻止默認行爲
> * 方法一 return false
> * 方法二 event.preventDefault()

事件
* 事件是用戶或者瀏覽器執行的某中動做,如click/mouseover
* 事件處理程序是響應事件的函數,事件處理程序以on開頭,如onclick/onmouseover

基本事件綁定 obj.addEventListener(事件名,函數,false) > 事件名沒有on

自定義事件綁定

1.先定義一個new一個命名事件，detail裏面能夠寫參數，也可爲空

var myEvent = new CustomEvent('event_name', {
　　detail: { title: 'This is title!'},
});

2.在dom元素上綁定該自定義名字的事件，而後回調爲要觸發的函數
dom.addEventListener('event_name', function(event){
　　to do something....
});

3.設定觸發時機，當何時觸發該自定義的事件

window.onresize=function(){
　　dom.dispatchEvent(myEvent);
}

事件移除 obj.removeEventListener(事件名,函數,false)
> 移除事件監聽只能是移除有函數名的，不能移除匿名函數的

事件委託 利用事件冒泡來達到委託的效果

event對象常見的屬性和方法總結
* event.type 當前事件類型
* event.target 事件源對象,直接點擊的對象
* event.currentTarget 綁定事件的對象
* event.clientY/event.clientX 可視區(瀏覽器)的內沿到鼠標的距離
* event.pageY/event.pageX 可視區(瀏覽器)的內沿加滾動距離到鼠標的距離
* event.screenY/event.screenX 顯示器屏幕內沿到鼠標的距離
* event.preventDefault() 阻止默認行爲
* event.stopPropagation() 阻止冒泡
* event.keyCode 鍵盤編碼
* event.ctrlKey event.shiftKey event.altKey 輔助鍵

事件種類
onload、onscroll、onresize、onclick、onmouseover/onmouseenter

dom.onscroll=function(){}
> * 鼠標穿過事件源對象或其子元素時觸發onmouseover,對應的有onmouseout
> * 鼠標穿過事件源對象時觸發，無視冒泡行爲onmouseenter,對應的有onmouseleave
onmouseout/onmouseleave
onmousemove
onmousedown
onmouseup
onkeydown
onkeyup

表單事件
onfocus 表單獲取焦點觸發
onblur 表單失去焦點觸發
onchange 頁面內容有改動,失去焦點執行
onkeypress 鍵按下去觸發,鍵不擡起會一直觸發
onkeyup 鍵擡起觸發,包括功能鍵
oninput 輸入後觸發,不包括功能鍵
onsubmit form表單提交事件
onreset form表單重置事件

對象就是一個能夠提供特定功能的黑盒子,使用者不用關心功能的具體實現,只要知道怎麼用就能夠了

什麼是面向對象的程序設計 > 開發具備特定功能的黑盒子

對象的特色
> * 封裝 把具體的功能實現包起來,對外不公開
> * 抽象 根據具體的業務需求把須要的屬性和方法抽取出來
> * 繼承 子類具備父類的方法和屬性,而後子類再開發本身特有的方法和屬性
> * 多態 把子類賦給父類,賦值後的父類具備子類的特性

* 對象的組成 >屬性(變量) >方法(函數)
對象的屬性不能重複

js對象和json的區別
var json='{"name":"tom","age":18}';
var json='[{"name":"tom","age":18},{"name":"ammy","age":20}]';
>> * json是一種數據傳輸格式,js對象是類的實例,不能直接傳輸
>> * json的鍵必須添加雙引號,值不能是函數,js對象鍵不用加雙引號,值能夠是任意類型,若是js對象的屬性不是一個合法的變量名時須要加雙引號
>> * json能夠經過JSON.parse(jsonstr)轉換爲js對象,js對象能夠用JSON.stringify(jsobj)轉換爲json

構造函數建立
1.用系統自帶的對象建立對象
>> * 缺點:會有把系統自帶的方法和屬性覆蓋掉的風險

2.用Object對象來建立對象
>> * Object是全部對象的父類
>> * 建立的對象方法和屬性不能共用

3.用工廠模式的函數建立對象
>> * 不能用new來建立對象
>> * 方法不能被實例共享,每一個對象實例都生成一個相同的方法

4.用new關鍵字建立對象 － 構造函數
>> * new 的做用,函數會在一開始建立一個對象，而且這個對象就是this,最後會把這個this對象返回出去
>> * 直接用new後能夠把用工廠模式函數中建立對象和返回對象省略,可是方法仍是不能被實例共享
>> * 用new後,把工廠模式函數能夠看作是類,類名通常首字母大寫
>> * 構造函數方法共享－將構造函數裏面的方法指向全局函數
>> * 缺點1.全局函數會在其餘地方調用，這時會有風險
>> * 缺點2.若是方法太多，就須要建立大量的全局函數
>> * 缺點3.違背面向對象的封裝特性

5.構造原型模式
>> * 原型 prototype 是存在於構造函數上的一個對象,全部的實例對象均可以訪問原型對象
>> * 能夠在原型對象prototype添加共用的屬性或者方法
>> * 變化的屬性和方法寫在構造器中
>> * 動態原型模式
>> * 能夠把原型對象prototype上的定義寫在構造函數中,定義以前須要惟一執行判斷

用來建立對象的函數叫構造函數,也叫類

對象實例 > 由構造函數建立的一個具體的對象

靜態方法和實例方法
> 添加在構造函數上的方法是靜態方法,靜態方法的調用方法是 構造函數.方法名()
> 添加在構造函數的原型對象上的方法是實例方法,實例方法的調用方法是 對象的實例.方法名()

原型鏈
原型就是一個對象，全部的實例共享對象上的方法和屬性
> * 一但有構造函數，系統會自動的給構造函數添加一個原型對象prototype
> * 系統會給原型對象上添加一個constructor對象(prototype.constructor)，就是構造器，整個構造器指向構造函數自己
> * 系統會給原型對象上添加另一個__proto__的對象(prototype.__proto__)，該對象指向Object的原型對象(Object.prototype)
> * Object的原型對象(Object.prototype) 裏面也有constructor對象和__proto__對象,constructor對象指向Object本身，__proto__對象指向null
> * Object的原型對象(Object.prototype) 裏面除了constructor對象和__proto__對象外，還有一些系統自帶的方法，好比toString(),valueOf()等等
> * 能夠在原型對象上添加本身的方法和屬性，這些方法和屬性也會被全部的實例共享
> * 對象的實例有本身的屬性和方法,同時系統會給對象實例添加__proto__對象，__proto__對象對象就是構造函數的原型對象
>* 實例對象的__proto__對象-->構造函數的原型對象，構造函數的原型對象的__proto__-->Object的原型對象，Object的原型對象的__proto__ -->null

原型鏈上的屬性
添加
>> 在實例上添加一個實例上的同名屬性會覆蓋原來的
>> 若是在實例對象上添加了一個構造函數原型對象上的同名屬性，訪問時會找到實例對象上的該屬性
刪除
>> 經過delete 刪除屬性
>> 刪除實質是判斷有沒有該屬性，若是有刪除返回真，若沒有，直接返回真
>> 若是刪除了原型上的屬性，全部實例都訪問不到該屬性
判斷
>> 判斷對象上是否有本身實例上指定的屬性,如obj1.hasOwnProperty('name')
>> 判斷對象的原型鏈上是否有指定的屬性,如"LEGS" in obj1;
>> 判斷屬性只在原型上有
function hasPrototypeProperty(obj,name){
return !obj.hasOwnProperty(name) && (name in obj);
}

屬性的定義
定義單個屬性
Object.defineProperty(
對象,
屬性名,
{value:屬性值,
enumerable:true,//是否能夠枚舉,默認是false
writable:true,//是否可寫(賦值),默認是false
configurable:true//是否可刪除,是否能夠修改屬性的權限，默認是false}
);

定義多個屬性
Object.defineProperties(對象,{
屬性名1:{value:屬性值,writable:true},
屬性名2:{value:屬性值,enumerable:true},
屬性名3:{value:屬性值}
});

查看屬性的權限
Object.getOwnPropertyDescriptor(對象,屬性名)

繼承
> 改變函數內部的this指向
>> 調用函數時,函數名.call(參數1,參數2....),call 第一個參數是被調用函數裏面的this,後面是對應的參數列表
>> 調用函數時,函數名.apply(參數1,[]),apply 第一個參數是被調用函數裏面的this,第二個是參數接受一個數組作爲參數列表
>> 函數名.bind(參數),bind會返回一個函數,函數內部的this就是bind的參數

繼承1
function 子類(屬性1,屬性2,屬性3){
父類.call(this,屬性1,屬性2);//屬性的繼承
this.屬性3 = 屬性3; //子類的屬性
}
子類.prototype = 父類.prototype; //方法的繼承
子類.prototype.方法 = function(){} //子類的方法
> 缺點:因爲方法的繼承是引用賦值,因此父類也會有子類的方法

繼承2
function 子類(屬性1,屬性2,屬性3){
父類.call(this,屬性1,屬性2);//屬性的繼承
this.屬性3 = 屬性3; //子類的屬性
}
//方法的繼承
for(i in 父類.prototype){
子類.prototype[i] = 父類.prototype[i];
}
子類.prototype.方法 = function(){} //子類的方法
> 缺點:若是父類的方法是不可枚舉的,子類就繼承不到

繼承3
function 子類(屬性1,屬性2,屬性3){
父類.call(this,屬性1,屬性2);//屬性的繼承
this.屬性3 = 屬性3; //子類的屬性
}
//方法的繼承
子類.prototype = new 父類();//子類的prototype指向父類的一個實例
子類.prototype.constructor = 子類;
子類.prototype.方法 = function(){} //子類的方法
> 缺點:調用兩次父類的構造函數,同時在子類的原型上產生了沒必要要的父類的屬性

繼承4
function 子類(屬性1,屬性2,屬性3){
父類.call(this,屬性1,屬性2);//屬性的繼承
this.屬性3 = 屬性3; //子類的屬性
}
//方法的繼承
子類.prototype = Object.create(父類.prototype);
子類.prototype.constructor = 子類;
子類.prototype.方法 = function(){} //子類的方法
Object.create(參數)會建立一個新對象,新建立對象的__proto__對象就是參數

分組
str.match(/\d+/g);
以()內正則爲標準 把字符串str分組

替換字符
var reg = /is/g;
str.replace(reg,"**");

var reg = /\bis\b/g;
str.replace(reg,"**");

var reg = /淘寶|京東/g;
str.replace(reg,"**");

var reg = /<[^<>]+>/g;
str.replace(reg,"**");

郵箱校驗
var reg = /^\w+@[0-9a-z-]+\.[a-z]+$/i;
reg.test(value)

是否有漢字
var reg = /[\u4e00-\u9fa5]+/g;
reg.test(value)

計算漢字的長度
function getLength(str){
return str.replace(/[\u4e00-\u9fa5]/g,"aa").length;
}

* URL解析
var reg = /(\w+):\/\/([\w\.]+)\/(\w*)/;
str.match(reg)

建立正則對象
* 方法一(構造函數): new RegExp(規則,修正模式) 如:new RegExp('a','g')
* 方法二(字面量): /規則/修正模式 如:var reg = /a/

原子(正則中的最小匹配單位)
* 可見原子-鍵盤輸出後能夠看得見的字符,如符號,英文,數字等
> 注意,如下字符具備特殊含義,若是要使用本來的字符意思,須要在前面添加\來轉義
> > . * + ? $ ^ | \ () {} []
* 不可見原子-鍵盤輸出後看不見的字符,如換行(\n),回車(\r),製表符(\t),垂直製表符(\v) 換頁符(\f)

原子篩選
* | 豎線兩邊任意匹配 至關於或
* [] 括號中任意一個原子,能夠寫區間(閉區間),如[a-z0-9]
* [^] 括號中任意一個原子以外的原子
* 注意:通常狀況下,正則中的一個字符對應字符串中的一個字符, 例如:/ab\t/表示字符串中連續出現字符 ab製表符
[]內是單獨的字符 /[ab]/表明 a或b ；/ab/表明 ab 至關於/(ab)/

原子集合
* . 除了回車和換行外的任意字符 等價[^\r\n]
* \d 任意數字,等價[0-9], \D 任意非數字 等價[^0-9]
* \w 任意數字,字母,下劃線 等價[0-9a-zA-Z_],\W 任意非數字,字母,下劃線 等價[^0-9a-zA-Z_]
* \s 空白符 等價於[\t\n\f\r],\S 非空白符 等價於[^\t\n\f\r]

量詞(限定前面原子出現的次數)
* {n} 前面原子剛好出現n次
* {n,} 前面原子最少出現n次
* {n,m} 前面原子最少出現n次,最多出現m次
* + 前面原子最少出現1次 等價{1,}
* ? 前面原子最少出現0次,最多出現一次 等價{0,1}
* * 前面原子最少出現0次 {0,}

'abcdeaada'.replace(/a{0,1}/g,'*');輸出// "**b*c*d*e***d**"
'abcdeaada'.replace(/a{0,}/g,'*');輸出// "**b*c*d*e**d**"

匹配模式
* 貪婪模式-儘量多的匹配(默認)
'12345'.replace(/\d{2,4}/,'X');
"X5"
* 非貪婪模式-儘量少的匹配(在量詞後添加?)
'12345'.replace(/\d{2,4}?/,'X');
"X345"

邊界控制
* ^ 匹配字符串開始的位置,限制必須以其後面的原子開頭，前面不能有任何東西
* $ 匹配字符串結尾的位置，限制必須以其前面的原子結束，後面不能有任何東西
* \b 單詞邊界 /is/ 表示爲任何形式存在的is /\bis\b/ 表示爲單獨存在的is
* \B 非單詞邊界
* () 把括號裏面的正常表達匹配的結果看成一個原子來看,起到分組的效果,分組後能夠經過反向引用來取得分組後的值,反向引用從$1開始

//匹配四個一個小寫字母加一個數字的字符串
'a1b2c3d4aaaa'.replace(/([a-z]\d){4}/,"*"); //"*aaaa"
//將年月日替換成月日年
'2018-05-09'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1'); //"05/09/2018"

修正模式
* i(ignoreCase) 忽略大小寫,默認區分大小寫,能夠經過正則對象上的global屬性查看
* g(global) 匹配全部的,默認只找到第一個,能夠經過正則對象上的ignoreCase屬性查看

前瞻
* 正則從文本頭部向文本尾部解析,文本尾部成爲"前",前瞻就是向前(文本尾部)檢查是否符合斷言

* 正向前瞻 exp(?=assert)
匹配到exp的內容後(再看文本的前/內容的後)符合不符合assert,符合的話就匹配exp的內容

字符後面是數字的字符
'a2*3b&'.replace(/\w(?=\d)/g,'X') //X2*3b&

* 負向前瞻 exp(?!assert)、
匹配到exp的內容後再看(再看文本的前/內容的後)符合不符合assert,不符合的話就匹配exp的內容

//字符後面不是數字的字符
'a2*3b&'.replace(/\w(?!\d)/g,'X') //"aX*XX&"

> lastIndex 當前正則匹配內容的最後一個字符的下一個位置
> source 正則的文本字符串

* RegExp.prototype.test(str);
檢驗str是否符合reg的規則
> test方法測試字符串是否有匹配到正則的字符串,有返回true,沒有返回false
> 若是全局匹配時,每一次匹配後正則對象上的lastIndex屬性會更改,改成匹配內容的最後一個字符的下一個位置,因此結果會不可靠,通常使用test方法時建議不要全局匹配
> 若是非全局匹配時,lastIndex始終是0,也就是說始終從第0個元素開始查找

var reg = /\w/g;
console.log("0::",reg.lastIndex);//0
console.log("1::",reg.test('ab'));//true
console.log("2::",reg.lastIndex);//1
console.log("3::",reg.test('ab'));//true
console.log("4::",reg.lastIndex);//2
console.log("5::",reg.test('ab'));//false
console.log("6::",reg.lastIndex);//0

* RegExp.prototype.exec(str);
> exec方法對字符串執行搜索,並更新正則對象上的lastIndex屬性,若是沒有匹配的返回null,有的話返回一個數組:
>> * 數組的第0個元素是匹配的內容,若是有分組,從下標是1開始是對應分組的內容
>> * index 是匹配內容第一個字符的位置
>> * input 是被搜索的字符串
> * 若是非全局匹配時,lastIndex始終是0,也就是說始終從第0個元素開始查找

var reg = /(\d{4})-(\d{2})-(\d{2})/g;
var str = 'a2018-05-10b';
console.log(reg.lastIndex);//0
console.log(reg.exec(str));//["2018-05-10", "2018", "05", "10", index: 1, input: "a2018-05-10b", groups: undefined]
console.log(reg.lastIndex);//11
console.log(reg.exec(str));//null
console.log(reg.lastIndex);//0
console.log(reg.exec(str));//["2018-05-10", "2018", "05", "10", index: 1, input: "a2018-05-10b", groups: undefined]

字符串方法中使用正則
*String.prototype.search(reg)
('x') 或 (/x/)；返回找到第一個X字符的下標
> * 從字符中檢索於正則相匹配的字符串,返回第一個匹配結果的index,查不到返回-1
> * search方法不執行全局匹配,它會忽略g,而且老是從字符串開始檢索

* String.prototype.match(reg)
> * 非全局匹配的結果和exec同樣
> * 全局匹配,會找到字符串中的全部匹配字符串,若是沒有匹配的話返回null,有的話返回一個()內需求的數組:
該數組中的每一項就是一個匹配結果,該數組和exec不同的地方是第0元素，該數組沒有匹配的內容，只有分組的內容，不接受()的識別,數組中沒有index和input等屬性，
>> * 全局匹配不須要分組
var reg = /(\d{4})-(\d{2})-(\d{2})/g;
var str = 'a2018-05-10b';
console.log(str.match(reg));//["2018-05-10"]

* String.prototype.split(reg)
> 根據正則匹配的內容把字符串分隔成數組
根據()內的規則分割，以/\d/數字爲分割符
'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]

* String.prototype.replace(reg,str2)
> 把字符串中 通過正則reg匹配的子串 用 str2 進行替換
* String.prototype.replace(reg,function(通過正則reg匹配的子串,index,原值))
index爲通過正則reg匹配的子串的下標
原值爲String.prototype的值
> 把字符串中 通過正則reg匹配的子串 傳遞到回調函數進一步處理,用函數的返回值來替換匹配項，能夠對通過正則reg匹配的子串進行更進一步的約束，達到本身需求的結果
var str = 'a1b2c3d4'.replace(/\d/g,function(match,index,origin){
return parseInt(match)+1;
})

獲取表單元素
* document.forms 表明頁面全部的表單集合
* document.forms[0].elements 表明某一個表單中的全部表單元素集合

* 獲取一個表單中的元素的方法
> 表單元素集合[下標]
> 表單元素集合["元素名"]
> 表單元素集合.元素名
> 表單.元素名
> 同名的表單元素返回一個節點集合
* 表單元素.form 表明表單元素所在的form

表單元素的屬性
* 禁用表單元素
> * 表單元素.disabled = true;

> * 表單元素.readOnly = true;
>> 只針對input(text/password)/textarea
>> 值會被提交

* 複選框選中屬性 checked
> * 設置選中 aCheckBox[0].checked = true
* 單選框選中屬性 checked
> * 設置選中 aRadio[0].checked = true
* 下拉框選中屬性 selected
> * 設置某個選項選中 oSelect.options[i].selected = true
> * 經過選中屬性獲取全部選中項

表單元素方法
* 設置焦點 表單元素.focus();
* 移除焦點 表單元素.blur();

表單的提交和重置
1.HTML按鈕默認提交
2.input type="submit"
3.input type="image"
4.button type="submit"

> * 表單被提交,數據沒有發送前觸發-form.onsubmit事件
> * 能夠在該事件中經過阻止默認行爲來阻止表單的提交

* 給普通按鈕綁定事件,調用 form的submit()方法提交
這種form的 調用submit()函數方法不會觸發 form.onsubmit事件

1.HTML按鈕默認提交重置
2.input type="reset"
3.button type="reset"
> * 事件在表單重置前觸發 form.onrest
> * 能夠經過阻止默認行爲來阻止重置

* 給普通按鈕綁定事件,調用 form的reset()方法重置
這種form的 調用reset()函數的方法 會觸發form.onrest事件

控制區錯誤提示
語法錯誤(SyntaxError)
> 不符合JS語法的錯誤,控制檯會出現錯誤而且有行號提示
運行時錯誤(Runtime Error)
> JS無語法錯誤,在運行時發生的錯誤
* ReferenceError 變量引用異常觸發的錯誤
* TypeError 類型使用時錯誤
* RangeError 遞歸爆棧時觸發
邏輯錯誤
> * 在程序須要開始跟蹤的地方打斷點
>> * 在程序中須要開始跟蹤的地方添加debugger關鍵字
>> * 在控制檯的source面板中單擊須要跟蹤程序的行號
> * Watch 須要跟蹤的變量
>> * 能夠Watch一個表達式
>> * 能夠在控制檯中更改變量的值

> * Resume script execution 按鈕,
執行腳本到下一個斷點的位置

> * Step over next function call
跳過函數的內部執行,把函數當作一個語句來看

> * Step into next function call,
進入到函數的內部執行

> * Step out current function ,
跳出當前的到函數內部執行

> * Deactivate breakpoints/Activate breakpoints,
關閉和打開斷點

> * Pause on exceptions,
異常處中止

>> * 若是選上 Pause on caught exceptions的話會在try語句中中止

主動觸發異常
在程序中若是有些不可避免的錯誤發生時,能夠主動的拋出一個異常,而後用try-catch語句來捕獲異常

拋出異常
throw new Error('error msg');

捕獲異常
try{
...//有可能出現異常的代碼
}catch(e){
...//異常處理
}finally{
...//無論有沒有異常都會處理,例如清理工做
}



(function(){})();
* 至關於該匿名函數的自我調用，封閉函數不會污染全局，變量封閉，用過一次就失效
* 封閉做用域,匿名函數自我調用解決變量做用域,不會污染全局變量
* 封閉做用域傳遞參數,解決i值問題
> * 子函數會使用做用域鏈中最近的變量,若是整個做用域中都沒有定義,則報錯
> * 父函數不能訪問子函數中定義的變量

函數節流舉例
function throttle(fn,delay){
var timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(fn,delay);
}
}
window.onresize = throttle(function(){
console.log(window.innerWidth);
},400)


* 過濾，把函數的每一次返回值爲真的原數組中的值組成新的數組並返回。返回的都是知足value爲真的部分
var newArr = arr.filter(function(value,index){
return value > 10;
})

* 全真判斷，全部值爲真的狀況下返回真,不然返回假 有一個假就是假
var bRes = arr.every(function(value,index){
return value > 10;
})

* 有真判斷，有一個值爲真的狀況下返回真,不然返回假 有一個真就是真
var bRes = arr.some(function(value,index){
return value > 10;
})


HTTP(HyperText Transfer Protocol)超文本傳輸協議

HTTP協議就是用來規範客戶端(瀏覽器)和服務端通訊規則的

> 常見的網絡協議還有不少，如
> * FTP(File Transfer Protocol)文件傳輸協議
> * POP3(Post Office Protocol Version 3)郵局協議-版本3
> * SMTP(Simple Mail Transfer Protocol)簡單郵件傳送協議
> * TCP/IP(Transmission Control Protocol/Internet Protocol)傳輸控制協議/Internet協議

HTTPS（全稱：Hyper Text Transfer Protocol over Secure Socket Layer）,安全套接字層超文本傳輸協議HTTPS。爲了數據傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證服務器的身份，併爲瀏覽器和服務器之間的通訊加密。

OSI(Open System Interconnection)開放式系統互聯的七層架構
* 1 物理層(設備之間的比特流傳輸,物理接口)
* 2 數據鏈路層(成幀,用MAC地址訪問媒介)
* 3 網絡層(寫入IP地址(數據源和數據目標的地址),選路)
* 4 傳輸層(肯定是用TCP協議傳輸仍是UDP協議傳輸)
> * 傳輸控制協議TCP可靠可是慢
> * 用戶數據協議UDP不可靠可是快
* 5 會話層(安全協議,目錄訪問協議)
* 6 表示層(轉碼/解碼,加密/解密)
* 7 應用層(提供應用數據,各類應用協議,如HTTP,FTP,SMTP...)

發送從應用層開始向下傳輸,接受從物理層開始向上傳輸

TCP/IP 4層模型
* 網絡接口層(對應7層中的物理層和數據鏈路層)
* 網際互聯層(對應7層中的網絡層)
* 傳輸層(對應7層中的傳輸層)
* 應用層(對應7層中的應用層,表示層和會話層)

訪問頁面流程詳解
* 客戶在瀏覽器輸入網址或者刷新頁面
* 域名解析(以http://www.kuazhu.com/爲例)
1 瀏覽器搜索自身的DNS緩存
查看瀏覽器緩存 chrome://net-internals/#dns
2 若是瀏覽器緩存沒有或者過時，就去操做系統自身的DNS緩存查找
3 讀取本地的HOST文件
windows：C:\Windows\System32\drivers\etc
OS:/etc/hosts
4 向寬帶運營商服務器發起域名解析請求,寬帶運營商服務器查看自身的緩存
5 運營商服務器發起一個迭代的DNS解析請求
5.1 找根域的服務器
5.2 根域服務器裏面有com域的地址,根域讓去找com域的服務器
5.3 com域服務器裏面有kuazhu.com域的IP地址,com域服務器讓去找kuazhu.com域的服務器
5.4 kuazhu.com域的服務器(通常是域名註冊商)裏面有對應的IP地址和域名的映射,找到後將IP地址發給運營商服務器
5.5 運營商服務器把結果返回給客戶操做系統,同時操做系統將其緩存起來,
操做系統把結果返回給瀏覽器

* 瀏覽器獲取IP地址後,發起TCP/IP 三次握手

第一次握手：客戶端發送syn包（syn=j）到服務器，並進入SYN_SENT狀態，等待服務器確認；SYN：同步序列編號（Synchronize Sequence Numbers）。

第二次握手：服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時本身也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態；

第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1），此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP鏈接成功）狀態，完成三次握手。

完成三次握手，客戶端與服務器開始傳送數據

* TCP/IP鏈接創建後，開始發送HTTP請求
瀏覽器發送請求行到服務器(請求行包括請求方法 uri 協議/版本等)
瀏覽器發送請求頭到服務器,結束後發送一個空白行告訴服務器再也不有請求頭(請求頭包含許多有關的客戶端環境信息)
瀏覽器發送請求體到服務器(請求體主要是請求參數)

服務器應答處理而且返回響應行(響應行包括協議/版本 狀態碼 狀態消息)
服務器返回響應頭,結束後發送一個空白行告訴客戶端再也不有響應頭(響應頭包含許多有關的服務端環境信息)
服務器返回響應體(響應體主要是返回的數據)

關閉TCP鏈接

* 瀏覽器渲染服務器返回的內容

* HTTP一旦請求完成,鏈接就會斷開,所以鏈接是沒有記憶的,無狀態的

Queued at
添加處處理隊列的時間

Started at
開始處理的時間

Stalled 瀏覽器要發出請求到這個請求能夠發出的等待時間，通常是代理協商、以及等待可複用的TCP鏈接釋放的時間，不包括DNS查詢、創建TCP鏈接等時間等

DNS Lookup
執行DNS查找時間

Initial connection
創建TCP鏈接的時間，就至關於客戶端從發請求開始到TCP握手結束這一段，包括DNS查詢+Proxy時間+TCP握手時間。

Request sent:請求的第一個字節發出前到最後一個字節發出後的時間

Waiting：請求發出後到收到響應的第一個字節所耗費的時間，包括數據的傳輸和服務器對請求的處理時間

Content Download:收到響應的第一個字節開始到收到響應的最後一字節結束所耗費的時間

HTTP的請求方法
GET方法
用於獲取數據
請求是參數的大小有限制(400k)
參數以及參數的值會顯示在地址欄中，安全性極低

POST方法
用於提交數據(表單的提交)
請求是參數的大小基本沒有限制
參數不會顯示在地址欄中，相對安全

URL uniform resource locator 統一資源定位器
能夠理解爲地址欄中的網址

URL的格式
完整格式：https://www.kuazhu.com:443/courseList
協議://域名:端口號/資源文件

服務器
安裝了Web服務器軟件的電腦就能夠提供管理網站的服務,咱們稱之爲Web服務器。
常見的Web服務器軟件有:Apache,IIS,Tomcat,Nginx,NodeJs等

NodeJs 初識
* 官網 https://nodejs.org/ 下載安裝,注意要下載LTS版本的
* NodeJs安裝完成後,去終端用node -v 查看,若是有版本號說明安裝成功
* 若是node命令找不到,Windows的用戶注意環境變量的配置
* NodeJs安裝的同時會安裝npm(node package manager)

ajax請求流程：
* 客戶端建立一個ajax對象
* 用ajax對象和服務端創建鏈接
* 用ajax對象發送請求到服務端
* 用ajax對象接收服務端返回的數據

定義變量let
> * let定義過的變量不能再定義,var定義過的變量能夠從新定義
> * let定義的變量不會聲明提高,var定義的變量會發生聲明提高
> * let定義的變量在let命令所在的代碼塊內有效,var定義的變量在函數範圍內有效

定義常量cons t(一旦定義,值就不能改變)
> * 定義常量的時候必須賦初值
> * 常量不能夠再次賦值
> * const定義的常量保證的是常量的地址不能夠改變
> * 對於簡單數據來講值就保存在變量指向的那個內存地址,所以不能夠再賦值
> * 對於複雜數據來講常量指向數據保存的地址,const保證的是這個地址不變,但地址指向的數據是能夠修改的
> * const定義的常量在const命令所在的代碼塊內有效
> * const定義的常量不會聲明提高

結構解析
* 做用:從數組或者對象中提取值而後對變量進行賦值
* 數組的結構解析:按照對應位置,把等號右邊數組中的值賦給等號左邊數組中的變量,數組能夠嵌套

>> * 若是解構不成功,變量的值就等於undefined
>> * 若是等號的右邊不是數組,會報錯
>> * 能夠在等號右邊數組中設置默認值,當等號左邊數組中對應位置的值是undefined時默認值纔會生效。

* 對象的結構解析:按照對應屬性名,把等號右邊對象中的屬性的值賦給等號左邊對象中的同名屬性

> * 等號左邊對象中的屬性的值是真正被賦值的變量名,若是屬性的值省略,屬性的值和屬性的名稱相同

模版字符 反引號+${}
`字符 ${javascript表達式}`

擴展運算
* 擴展運算符三個點...
* 數組的擴展運算就是將一個數組轉爲用逗號分隔的參數序列
* 數組的擴展運算的應用

函數調用時使用把數組轉換爲參數列表
function add(n1,n2){
return n1+n2;
}
let arr = [11,22];
add(...arr);

函數定義時使用把參數列表轉換爲數組
function add(...arr){
let result = 0;
for(let i = 0;i<arr.length;i++){
result += arr[i]
}
return result;
}
add(11,22);

求數組的最大數
let arr = [11,22,44,88,77];
//ES5
Math.max.apply(null,arr)
//ES6 用擴展運算
Math.max(...arr)

深拷貝數組
let arr1 = [11,22,44,88,77];
//ES5
let arr2 = arr1.concat();
//ES6 用擴展運算
let arr2 = [...arr1];

對象的擴展運算符...用於取出參數對象的全部可遍歷屬性,拷貝到當前對象之中

拷貝對象(淺拷貝)

let obj1 = {name:'Tom',age:18};
let obj2 = {...ojb1};

> 若是對象中有複雜數據類型,拷貝的是數據的地址
遍歷器
* 遍歷器(Iterator)是一種接口,實現了該接口的數據結構就能夠完成遍歷操做
* 遍歷器接口主要供for...of循環來使用,也就是說實現了遍歷器接口的數據類型均可以用for...of循環來遍歷數據

Set 相似於數組,但值惟一的數據結構
Set對象的size屬性返回Set實例的值的總數

Set對象的操做方法
> * add(value):添加某個值,返回 Set 結構自己
> * delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功
> * has(value):返回一個布爾值,表示該值是否爲Set的成員
> * clear():清除全部值,沒有返回值

Set對象的遍歷方法
> * keys():返回鍵名的遍歷器
> * values():返回鍵值的遍歷器
> * entries():返回鍵值對的遍歷器
> * forEach(function(value,key){}):使用回調函數遍歷

> * Set只有值沒有鍵,因此key和value同樣
> * Set的遍歷順序就是插入順序

Map
* 相似於對象,但鍵的範圍不限於字符串,各類類型的值(包括對象)均可以看成鍵的數據結構
* Map對象的size屬性返回Map實例的鍵值對的總數

* Map對象的操做方法
> * set(key,value):設置鍵名key對應的鍵值爲value，而後返回整個 Map 結構,若是key已經有值，則鍵值會被更新，不然就新生成該鍵。
> * get(key):讀取key對應的鍵值，若是找不到key，返回undefined。
> * delete(key):delete方法刪除某個鍵，返回true。若是刪除失敗，返回false。
> * has(key):has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。
> * clear():清除全部鍵值,沒有返回值

Map對象的遍歷方法
> * keys():返回鍵名的遍歷器
> * values():返回鍵值的遍歷器
> * entries():返回鍵值對的遍歷器
> * forEach(function(value,key){}):使用回調函數遍歷
> * Map的遍歷順序就是插入順序

Symbol
* Symbol是一種新的數據類型,表示獨一無二的值
* Symbol值經過Symbol函數生成
* Symbol函數能夠接受一個字符串做爲參數,表示對Symbol實例的描述
* Symbol的主要做用是用來表示對象的屬性名
* Symbol值做爲對象屬性名時,不能用點運算符,在對象的內部頁不能夠

class類
* class類是ES6面向對象的語法糖
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
show(){
console.log('I am '+this.name+' and I am '+this.age+' years old');
}
showName(){
console.log('I am '+this.name);
}
showAge(){
console.log('I am '+this.age+' years old');
}
static sayHi(){
console.log('Hi...')
}
}

class Student extends Person{
constructor(name,age,major){
super(name,age);
this.major = major;
}
show(){
super.show();
console.log('I am from '+this.major)
}
showMajor(){
console.log('I am from '+this.major)
}
}
> * 用class定義的類也是函數
> * constructor方法是類的默認方法,經過new命令生成對象實例時,自動調用該方法。
> * 一個類必須有constructor方法,若是沒有顯式定義,系統默認添加一個空的constructor方法
> * constructor方法默認返回實例對象
> * 在class 中定義的方法其實是給原型對象上添加方法
> * 類不存在變量提高
> * 靜態方法前面添加static關鍵字,調用時用 類名.方法名 的形式調用

> * 父類的靜態方法,能夠被子類繼承
> * 經過extends關鍵字實現繼承
> * 子類必須在constructor方法中調用super方法,該super方法其實是調用父類的constructo
> * 子類若是沒有定義constructor方法,系統默認添加一個空的constructor方法,而且在這個方法會被默認添加一個空的super方法
> * 在子類的構造函數中,只有調用super以後,纔可使用this關鍵字
函數參數默認值
* 直接在參數定義的時候賦值來爲爲函數的參數設置默認值
function show2(x,y="world"){
console.log(x,y);
}
show2("hello");//hello world

* 參數默認值不是傳值的,而是每次都從新計算默認值表達式的值
let x = 1;
function show(i=x+1){
console.log(i);
}
show();//2
x = 2;
show();//3

* 結構解析和默認參數結合
function show2(url,{method="GET",body="name=Tom"} = {}){
console.log(method,body);
}
show2();//GET name=Tom
show2('http://kuazhu.com');//GET name=Tom
>* 默認值參數應該是參數的尾部參數,不然不能省略

rest參數
* rest參數就是在函數定義時使用擴展運算(...變量名)把參數列表轉換爲數組

箭頭函數
* 箭頭函數就是使用"箭頭"(=>)來定義函數

* 箭頭函數的基本用法
let fn = (x,y)=>{
console.log(x,y);
return x + y;
}
* 若是函數體只有返回值,函數體的花括號和return語句能夠省略,簡寫:
let fn = (x,y)=> x + y
* 若是隻有一個參數,圓括號能夠省略,簡寫:
let fn = x =>{
console.log(x);
return x + 10;
}
* 箭頭函數中的this是在定義時肯定的(定義時屬於誰),而不是在運行時肯定(誰調用)的
function Timer(id){
this.id = id;
setTimeout(function(){
console.log(this,this.id);//window 99
},100)
}
var id = 99;
let t = new Timer(100);
> * function 定義的函數,this是在運行時肯定的,運行時函數屬於誰this就是誰,上面例子中的延遲函數會在100毫秒後由window對象來調用,因此裏面的this是window對象
> * function 定義的函數,能夠經過call/bind/apply來改變函數的內部this
function Timer(id){
this.id = id;
setTimeout(()=>{
console.log(this,this.id);//Timer?{id: 100} 100
},100);
}
var id = 99;
let t = new Timer(100);
> * 箭頭函數致使this老是指向函數定義生效時所在的對象
> * 上面例子中延遲函數中匿名函數在定義的時候是屬於Timer的實例對象,因此裏面的this就是Timer對象
> * 用let定義的函數不會聲明提高

Promise的概念
* Promise 是一種異步編程解決方案
* 將異步操做以同步操做的流程表達出來,避免了層層嵌套的回調函數
* Promise對象提供統一的接口,使得控制異步操做更加容易

Promise的特色
* Promise有三種狀態
> * pending（進行中）
> * fulfilled（已成功）
> * rejected（已失敗）
* 只有異步操做的結果,能夠決定當前是哪種狀態,任何其餘操做都沒法改變這個狀態

* 一旦狀態改變,就不會再變

* Promise對象的狀態改變，只有兩種可能：

>* 從pending變爲fulfilled
>* 從pending變爲rejected

Promise的使用
* Promise構造函數接受一個函數做爲參數,該函數的兩個參數分別是resolve和reject
* resolve函數在異步操做成功時(從pending變爲fulfilled)調用,並將異步操做的結果做爲參數傳遞出去
* reject在異步操做失敗時(從pending變爲rejected)調用,並將異步操做報出的錯誤做爲參數傳遞出去
* Promise實例生成之後,能夠用then方法分別指定resolved狀態和rejected狀態的回調函數,rejected狀態的回調函數能夠省略
* Promise 新建後就會當即執行

### Promise對象的方法
* then(resolved狀態的回調,rejected狀態的回調)
> * then方法返回的是一個新的Promise實例

* catch(回調)
> * 若是異步操做拋出錯誤,狀態就會變爲rejected,當then中沒有指定rejected狀態的回調時就會調用catch方法指定的回調函數
> * 若是運行中拋出錯誤,也會被catch方法捕獲

* finally(回調)
> * 無論Promise對象最後狀態如何,都會執行的操做
> * finally方法的回調函數不接受任何參數

Promise靜態方法
* Promise.resolve()
> * 若是參數是Promise實例,那麼Promise.resolve將不作任何修改、原封不動地返回這個實例
> * 若是參數是一個具備then方法的對象,resolve方法會將這個對象轉爲 Promise 對象而後就當即執行該對象的then方法
> * 若是參數參數不是具備then方法的對象,或根本就不是對象,返回一個新的 Promise 對象,狀態爲resolved
> * 不帶有任何參數,直接返回一個resolved狀態的 Promise 對象

* Promise.reject()
> * 返回一個新的Promise實例,該實例的狀態爲rejected,參數會原封不動地做爲reject的理由

* Promise.all()
> * 接受一個Promise實例數組做爲參數,返回一個新Promise實例
> * 當數組中的全部Promise實例的狀態都變成fulfilled時,Promise實例的狀態纔會變成fulfilled,此時,返回值組成一個數組傳遞給新Promise實例的回調函數
> * 當數組中有一個Promise實例被rejected,新Promise實例的狀態就變成rejected,此時第一個被reject的實例的返回值會傳遞給新Promise實例的回調函數

* Promise.race()
> * 接受一個Promise實例數組做爲參數,返回執行最快的那個promise對象


//ajax 利用原生XMLHttpRequest函數建立
function ajax(method,url,data,fnSucc,fnFaild){
// 1.建立一個ajax對象
var oAjax = new XMLHttpRequest();
//post方法處理
if(method.toLowerCase() == 'post'){
oAjax.open(method,url,true);
//設置請求頭,該方法必須在open和send中間調用
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post發送的數據
oAjax.send(data);
}else{
if(data){
url = url+"?"+data;
}
// 2.用ajax對象創建鏈接
// oAjax.open(請求方法，請求地址，是否異步)
oAjax.open(method,url,true);
// 3.用ajax對象發送請求
oAjax.send();
}
// 4.用ajax對象接收數據
oAjax.onreadystatechange = function(){
// console.log(oAjax.readyState);
// 0 尚未初始化
// 1 已經初始化，可是尚未調用open方法
// 2 send方法已經調用
// 3 返回了部分數據
// 4 數據徹底返回
if(oAjax.readyState == 4){//請求完成，代表全部的數據已經返回，但並不表明成功
if(oAjax.status == 200){//成功
fnSucc(oAjax.responseText);
}else{//失敗
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
}
}
跨域方案 協議,域名,端口和服務器的協議,域名,端口有一個不一致就會發生跨域

通常瀏覽器的端口號都是443 通常登陸的省略了
* CORS(Cross-origin resource sharing)跨域方案

> 服務器端設置響應頭
res.setHeader("Access-Control-Allow-Origin","*")

> * Access-Control-Allow-Origin設置能夠跨域的域名 *表明全部
> * 一次只能只能設置一個值

> * 簡單請求
> * 請求方法必須是 HEAD,GET,POST之一
> * 請求頭中的字段僅限於 Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type
> * Content-Type 的值僅限於application/x-www-form-urlencoded,multipart/form-data,text/plain

* 複雜請求
不知足簡單請求的時候就是複雜請求,複雜請求會先發一次OPTIONS方法進行預檢(preflight)請求

例如設置以下請求頭後該請求就會變爲複雜請求
oAjax.setRequestHeader('abc','abc');
須要在服務器端設置以下響應頭才能實現請求
res.setHeader("Access-Control-Allow-Headers","abc");
> Access-Control-Allow-Headers 表示服務端接受的跨域請求的字段

服務器端響應頭Access-Control-Expose-Headers
> Access-Control-Expose-Headers表示容許客戶端經過getResponseHeader方法獲取的字段
> CORS方式下默認只能獲取6個基礎字段,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma

ES6文件的模塊
定義 export default/export
引用 import from
export跟export default 有什麼區別呢？以下：
一、export與export default都可用於導出常量、函數、文件、模塊等
二、你能夠在其它文件或模塊中經過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便可以對其進行使用
三、在一個文件或模塊中，export、import能夠有多個，export default僅有一個
四、經過export方式導出，在導入時要加{ }，export default則不須要
這樣來講其實不少時候export與export default能夠實現一樣的目的，只是用法有些區別。注意第四條，經過export方式導出，在導入時要加{ }，export default則不須要。使用export default命令，爲模塊指定默認輸出，這樣就不須要知道所要加載模塊的變量名。
var name="李四";
export { name } import { name } from "/.a.js"
能夠寫成：
var name="李四";
export default name import name from "/.a.js" 這裏name不須要大括號

ES5文件的模塊
定義
module.exports ={

　　Home:'xxxxx',

　　toString(){}

}對象上添加屬性導出值
exports對象和module.exports對象是同一個對象，導出的始終是module.exports指向的對象
引用
var xxx=require('文件名'),執行對應的文件而且返回該文件對應的modeule.exports對象
xxx.Home/xxx.toString()
>* ES5和ES6文件模塊混用也能用



本地存儲
cookie的設置
document.cookie = 'key1=value1';
document.cookie = 'key2=value2';

cookie有效期的設置
var oDate = new Date();
oDate.setDate(oDate.getDate() + 14);
document.cookie = "name=Tom;expires="+oDate;

cookie的特色:
>* cookie是document對象上的一個屬性
>* cookie的大小限制是4k
>* cookie會存在於請求頭中
>*主域名中的cookie會在子域名中存在

Storage
localStorage 和 sessionStorage的api相同

設置 window.localStorage.setItem('username',value)
獲取 getItem(key)
刪除 removeItem(key)
清除全部 clear()
內容個數 length
獲取key的值 key(num)

localStorage 和 sessionStorage的存儲時效不一樣
>* localStorage 持久化
>* sessionStorage 網頁會話結束失效

localStorage 和 sessionStorage的存儲容量不一樣
>* localStorage 2-5Mb左右
>* sessionStorage 2-10Mb左右,部分瀏覽器 沒有限制

>* Storage僅能存儲字符串
>* Storage的數據不能在不一樣的域中共享

Buffer是用來存放二進制數據的容器

stream流是一種處理數據的抽象接口,是將數據分割成一段一段的來處理,提升效率

fs讀寫文件的模塊

http模塊 http.createServer((req,res)=>{}) 建立一個服務器實例
req 它實現了 可讀流 接口
res 它實現了 可寫流 接口

querystring模塊
字符串轉obj
querystring.parse(帶&的字符串)

path模塊
path.normalize(path)//規範路徑
path.extname(path)//獲取文件名後綴 如.jpg

url模塊
req.url地址爲www.127.0.0.1:3000/user/load/xxx.html?abc=123&ddd=444
pathname = url.parse(req.url,true).pathname;//爲 /user/load/xxx.html
query = url.parse(req.url,true).query; //{abc：123，ddd：444

SQL數據庫
Oracle ,SQL Server,DB2,Sybase
MySQL,PostgreSQL,sqlite
NoSQL(not only sql)數據庫
MongoDB
CouchDB
HBase
Redis
SQL數據庫結構化,適合中大型系統
NoSQL數據庫數據模型比較簡單,但操做比較靈活,適合微架構
SQL數據庫和NoSQL數據庫不是二選一的關係,而是相互輔助和補充的關係

$ pm2 logs 顯示全部進程日誌
$ pm2 stop all 中止全部進程
$ pm2 restart all 重啓全部進程
$ pm2 reload all 0秒停機重載進程 (用於 NETWORKED 進程)
$ pm2 stop 0 中止指定的進程
$ pm2 restart 0 重啓指定的進程
$ pm2 startup 產生 init 腳本 保持進程活着
$ pm2 web 運行健壯的 computer API endpoint (http://localhost:9615)
$ pm2 delete 0 殺死指定的進程
$ pm2 delete all 殺死所有進程

運行進程的不一樣方式：
$ pm2 start app.js -i max 根據有效CPU數目啓動最大進程數目
$ pm2 start app.js -i 3 啓動3個進程
$ pm2 start app.js -x 用fork模式啓動 app.js 而不是使用 cluster
$ pm2 start app.js -x -- -a 23 用fork模式啓動 app.js 而且傳遞參數 (-a 23)
$ pm2 start app.js --name serverone 啓動一個進程並把它命名爲 serverone
$ pm2 stop serverone 中止 serverone 進程
$ pm2 start app.json 啓動進程, 在 app.json裏設置選項
$ pm2 start app.js -i max -- -a 23 在--以後給 app.js 傳遞參數
$ pm2 start app.js -i max -e err.log -o out.log 啓動 並 生成一個配置文件