如何編碼解碼 編碼：var code=encodeURI("原文"); 解碼：var 原問=decodeURI("code"); 用encodeURIComponent代替encodeURI 用decodeURIComponent代替decodeURI eval 專門執行字元串格式的表達式 var ...
如何編碼解碼
編碼：var code=encodeURI("原文");
解碼：var 原問=decodeURI("code");
用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI
eval 專門執行字元串格式的表達式
var 表達式的結果=eval("表達式")
while迴圈
語法:
while(迴圈條件){
迴圈操作;
}
三目運算(簡化的if...else)
語法：條件?操作1:操作2
相當於if(條件){
操作1;
}else{
操作2;
}
強化版語法：條件1?操作1:條件2?操作2:條件3?操作3:操作4;
if(條件1){
操作1;
}else if(條件2){
操作2;
}
else{
操作3;
}
for 與 while
1、while迴圈 一般比較適合用於 不太確定迴圈次數的時候使用
2、for迴圈 一般適用於 已經確定了 迴圈次數的時候使用
***js內置對象：ES標準中規定的，瀏覽器廠商已經實現的對象(屬性和方法)
11個：String Number Boolean -> 包裝類型
Array Date Math RegExp
Error Function Object
Global全局對象 -> 在瀏覽器中被window代替
***包裝類型：專門封裝原始類型的數據，並提供對原始類型數據的操作方法的對象
為什麼：原始類型的數據不包含任何屬性和功能
本身不能加.調用方法和屬性
何時使用：只要試圖用原始類型的變數調用屬性和方法時，都會自動創建並且調用包裝類型對象
何時釋放：方法調用後，自動釋放！並返回方法執行的結果。
為什麼null和undefined不能打.：因為沒有對應的包裝類型
isFinite：判斷一個數是否在有效範圍內
javascript：infinite 無窮大 5/0
var bool=isFinite(num)
do{
迴圈體;
}while(條件)
continue：跳過本次迴圈，繼續判斷迴圈條件,結束本次
break：直接退出迴圈，不再執行迴圈條件判斷，直接結束
7、★★★★★★★★Function
js中函數都是一個對象，函數名都是引用函數對象的變數
創建函數：3種
1、聲明方式：function 函數名(參數列表){函數體}
只有聲明方式創建的函數，才能被聲明提前
鄙視題：js中正確的創建函數的方法
function compare(a,b){return a-b};
var compare=function(a,b){return a-b};
var compare=new Function("a","b","return a-b");
****聲明提前(hoist):
在程式執行前
將var聲明的變數和function聲明的函數
集中到*當前作用域*的開始位置創建
賦值留在原地
強調：只有聲明方式定義的函數才能被提前
直接量方式創建的函數，不能提前
只要遇到先使用後創建的，一定實在考聲明提前
解決：先把代碼轉換為提前後的樣子，再去判斷
****按值傳遞：兩個變數間賦值或將變數作為參數傳遞時
其實只是將變數中的值複製了一個副本給對本 - 複製副本，各用個的
如果傳遞的都是原始類型數據的值
修改新變數，原變數不受影響的
如果傳遞的是引用類型的對象 -- 保存地址值 - 地址值互用，誰用都會發生改變
通過新變數修改對象，等效於直接修改原對象
****重載(overload)：相同函數名，不同參數列表的多個函數
可在調用時，根據傳入參數的不同
自動選擇對應的函數執行
為什麼：減輕調用者的負擔！
問題：js的語法不支持重載！
js不允許多個同名函數同時存在。
如果同時存在，最後定義的函數會覆蓋之前所有同名函數
解決：arguments對象
什麼是arguments：函數中，專門接受所有傳入的參數的對象
arguments是類數組對象：長的像數組的對象
只有兩點和數組相同：
1、都可用下標訪問每個元素
比如：arguments[1]
2、都有length屬性記錄參數個數
比如：arguments.length
強調：類數組對象不是數組
幾乎所有數組API，都不能使用！
何時創建：在調用函數時，自動創建的函數局部變數！
變相實現了重載
****匿名函數：創建函數時，不適用任何變數引用的函數
何時使用：如果一個函數，只會執行一次！
為什麼：節約記憶體！
因為匿名函數對象，沒有變數引用著
用完，自動立刻釋放！
如何使用：2種
1、自調：函數定義完，立刻執行！
(function(參數列表){
函數體
})();
2、回調：將函數作為對象，傳遞給其他函數調用！
arr.sort(function(a,b){return a-b});
//排序後，比較器函數自動釋放！
1、閉包
作用域(scope)：2種
1、全局作用域
全局變數：隨處可用，可反覆使用
2、函數作用域
局部變數：只有函數調用時，函數內部才可用
調用結束後，釋放
包含：參數和在函數內部聲明的變數
***函數的執行原理：
0、程式載入時：
創建執行環境棧，保存函數調用的順序的數組
首先壓入全局執行環境(EC)
全局EC引用全局對象window
window中將要保存全局變數
1、定義時
創建函數對象，封裝函數的定義。
在函數對象中定義scope屬性，記錄函數來自的作用域
全局函數的scope都來window
2、調用前
在執行環境棧中壓入新的EC
創建活動對象AO：保存本次函數調用用到的局部變數
在EC中添加 scope.chain 屬性引用AO
設置AO的parent為函數的scope引用的對象
3、調用時
變數的使用規則：優先使用局部變數
如果局部沒有才去全局找
4、調用完
函數的EC出棧，AO自動釋放，局部變數也就自動釋放
***閉包：保護一個可反覆使用的局部變數的一種詞法結構
為什麼：全局變數：優點：可重覆使用
缺點：隨處可用，容易被污染
局部變數：優點：僅內部可用，不會被污染
缺點：一次性
如何實現：3步
1、確定受保護的變數？
2、定義專門使用變數的函數
3、用外層函數，將受保護的變數和操作變數的函數包裹起來
外層函數返回內層函數
鄙視時：
1、判斷閉包，找到受保護的變數，確定其值
2、外層函數調用了幾次？就創建了幾個閉包
受保護的變數就有幾個副本
3、同一次外層函數調用，返回的內部函數，都是使用同一個受保護的變數
嚴格模式的目的
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除代碼運行的一些不安全之處，保證代碼運行的安全；
提高編譯器效率，增加運行速度；
為未來新版本的Javascript做好鋪墊。
語法和行為改變
全局變數顯式聲明：一定加var
禁止使用with語句
禁止this關鍵字指向全局對象
對象不能有重名的屬性
函數不能有重名的參數
禁止八進位表示法
不允許對arguments賦值
禁止使用arguments.callee
1、★★★★★★★★Array
3、****數組API：瀏覽器廠商已經實現的函數，程式員不需要創建，直接使用
0、arr.indexOf() 從前往後查找 返回下標 只能找1個
arr.lastindexOf() 從後往前查找 返回下標 只能找1個
0、arr.every()對數組中的每一項運行給定函數，如果該函數對每一項都返回 true ，則返回 true
var arr=[1,2,3,4,5,6,7,8,9];
var result=arr.every(function(value,index,array){//此函數會接收三個參數：數組項的值、該項在數組中的位置、數組對象本身。
return value>0;
});
alert(result);//true
0、arr.some()對數組中的每一項運行給定函數，如果該函數對任意一項返回 true ，則返回 true 。
var arr=[1,2,3,4,5,6,7,8,9];
var result=arr.some(function(value,index,array){//此函數會接收三個參數：數組項的值、該項在數組中的位置、數組對象本身。
return value>7;
});
alert(result);*/
0、arr.filter()對數組中的每一項運行給定函數，返回該函數結果為 true 的項組成的數組。
var newarr=arr.filter(function(value,index,array){//index索引array數組本身
console.log(index+'----'+value+'-----'+array[index]);
return value>3;
});
console.log(newarr);//[4, 5, 6, 7, 8, 9]
0、arr.map()對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
var newarr=arr.map(function(value,index,array){
return value>5;
return value*=100;
});
console.log(newarr);*/
0、arr.foreach()對數組中的每一項運行給定函數。這個方法沒有返回值。
var arr=[1,2,3,4,5,6,7,8,9];
arr.forEach(function(value,index,array){
console.log(index+'----'+value+'-----'+array);
});
0、arr.reduce()迭代數組的所有項，然後構建一個最終返回的值。從數組的第一項開始，逐個遍歷到最後。
var arr=[1,2,3,4,5,6,7,8,9,10];
var result=arr.reduce(function(prev,value,index,array){
console.log(prev +'----'+ value);//prev:每一次迭代的結果 value:數組項的值。
return prev+value
},100);//100：迭代的初始值。prev指向它，如果沒有這個值prev指向數組的第一項。
alert(result);
1、 toString()：不改變原數組，返回新的字元串
1、var str = String(arr);
每個元素值之間用逗號分隔
2、Array.isArray() 判斷是否是數組類型
3、arr.concat() 數組拼接 不修改原數組
4、arr.slice()：截取 不修改原數組,返回新數組 含頭不含尾 省略第二個參數，表示從starti一直獲取到結尾
var a = [1,2,3,4,5]; a.slice(0,3); // 返回 [1,2,]
5、arr.join("連接符"); 會改變原數組
可自定義連接符
省略"連接符"，等效於String()
固定套路：
1、將單個字元數組拼接為單詞（無縫連接）
arr.join("")
問題：頻繁的字元串拼接會浪費記憶體
解決：先將要拼接的子字元串，放入一個數組，最後將數組無縫拼接為字元串
6、arr.splice：刪除，添加，替換
強調：直接修改原數組！ 返回所有被刪除的元素組成的子數組
刪除：arr.splice(starti,n)
添加：arr.splice(starti,0，值1，值2...)
強調：原starti位置的元素，以及後續的元素，都會被順移
替換：arr.splice(starti,n,值1，值2...)
從starti位置開始，刪除n個元素，在插入新元素
強調：刪除的個數n，和插入新元素個數不必相同
7、翻轉數組：arr.reverse(); 改變原數組
8、arr.push() 可以接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。
9、arr.pop() 從數組末尾移除最後一項，減少數組的length值，然後返回移除的項。
10、arr.unshift()方法能夠在數組前端添加任意個項 返回新數組的長度。
11、arr.shift() 方法能夠移除數組中的第一個項並返回該項，同時將數組長度減 1。
12、arr.sort(); 排序 會改變原數組
問題1：預設只能將所有元素轉為string後，在排列
解決：自定義比較器函數
1、必須有兩個參數a,b，在被調用時，自動接受正在比較的兩個元素值
2、必須返回數字來表示兩個值的大小
如果a>b,就返回一個正數
如果a<b,就返回一個負數
如果a=b,就返回0
如何使用比較器：將比較器函數作為參數，傳入sort();
問題2：所有演算法預設只有升序排列
解決：將比較器中的a-b，換成b-a，讓後數-前數;
2、★★★★★★★★String 多個字元組成的*只讀*字元數組
1、大小寫轉換：將字元串中每個英文字母統一轉為大寫 或 小寫
var upper = str.toUpperCase();
var lower = str.toLowerCase();
2、str.charAt(i);等效於 str[i] 獲取指定位置的字元：
3、var num=str.charCodeAt(i); 獲取指定位置的字元的unicode號：
4、var char=String.fromCharCode(num); 從unicode號翻譯為原文：
5、檢索字元串：查找關鍵詞的位置。
1、 var i = str.indexOf("關鍵詞"，fromi);
從fromi位置開始，查找右側下一個關鍵詞的位置
第二個參數：表示開始查找的位置
可省略，如果省略，表示從0位置開始
返回值：找到：返回關鍵詞第一個字元的位置的下標 沒找到：返回-1
2、從後向前找：var i = str.lastIndexOf("關鍵詞"，fromi)
從fromi位置開始，查找左側下一個關鍵詞的位置
第二個參數：省略，預設從length-1開始
註意：以上兩個方法，預設只要第一個就結束了，如果希望找出全部的關鍵字位置，需要用while迴圈，
判斷只要不等於-1，就可以一直執行
6、截取子字元串：
str.slice(starti,n);支持負數參數，截取到不包含下標n 返回新字元串
str.substring(starti,n)不支持負數參數 返回新字元串
str.substr(starti,n);截取n個，返回新字元串
7、replace替換字元串 string.replace("tmd", "*");返回新字元串
8、str.split() 將字元串以參數分割為數組，返回數組
var str='abcadeafg' str.split('a') //["", "bc", "de", "fg"]
4、★★★★★★★★Math
1、取整：3種
1、上取整：只要超過，就取下一個整數
Math.ceil(num);
2、下取整：無論超過多少，都省略小數部分
Math.floor(num);
3、四捨五入取整：夠五進位，不夠就捨棄
Math.round(num); 返回數字，但只能取整
vs num.toFixed(d); 可以指定小數位數，但返回字元串
自定義round方法：
按任意小數位數四捨五入
返回數字類型
電腦有攝入誤差
// function round(num,d){//555.555 2位
// //將num乘以 10 的d次方 55555.49
// num*=Math.pow(10,d);
// console.log(num)
// //用round將num四捨五入 55555
// num=Math.round(num);
// //返回num除以10的d次方 //555.55
// return num/Math.pow(10,d);
// }
// var new1=round(555.555,2);
// console.log(new1);
2、乘方和開方
乘方：Math.pow(底數,冪) 比如：Math.pow(10,2)
開方：Math.sqrt(num) 只能開平方
3、最大值和最小值：返回參數中最大或最小的一個值
Math.max(x,y,z);
Math.min(x,y,z);
獲取數組中的最大值或最小值
問題：Math.max()/min() 不支持數組參數！
解決：Math.max.apply(Math,arr);
Math.max.(...arr);
4、絕對值：Math.abs(num);//負數辯正數
5、隨機數：Math.random(); 在0~1之間取隨機小數
可能取到0，但不可能取到1
在min~max之間取隨機整數的公式：
parseInt(Math.random()*(max-min+1)+min);
三角函數複習
圓的方程：
X=a+Math.sin(angle*Math.PI/180)*r
Y=b+Math.cos(angle*Math.PI/180)*r
x,y--盒子的位置
a,b--圓心的位置
angle--角度
r--半徑
勾股定理複習
C=Math.sqrt(a*a+b*b)
5、★★★★★★★★Date
創建：4種
1、創建一個日期對象，獲得客戶端當前系統時間
var date = new Date();
2、創建一個日期對象，封裝自定義時間
var date = new Date("yyyy/MM/dd hh:mm:ss");
本質：其實日期對象中封裝的是1970年1月1日0點至今的毫秒數
3、創建一個日期對象，封裝自定義時間
var date = new Date(yyyy,MM-1,dd,hh,mm,ss);
取值返回：MM：0~11 只有月份需要修正
dd：1~31
hh：0~23
ss，mm：0~59
4、複製一個日期對象：
為什麼：日期對象的API都直接修改原日期對象
無法獲得修改前的日期
何時複製：只要希望起始時間和截止時間同時保存時
都要先複製一個副本，再用副本修改
var endDate = new Date(startDate.getTime());
分量：時間的單位
年月日星期：FullYear Month Date Day
時分秒毫秒：Hours Minutes Seconds Milliseconds
三句話：
1、命名：年月日星期 都不帶s
時分秒毫秒 都以s結尾
2、每個分量，都有一對兒getXXX/setXXX
其中，get負責獲取一個分量的值
set負責設置一個分量的值
特殊：Day,沒有set方法
3、取值範圍：FullYear 就是當前的年份數字
Month：0~11
Date：1~31
Day：0 1 2 3 4 5 6
日
Hours：0~23
Minutes，Seconds：0~59
計算：
1、兩個日期對象相減，結果是毫秒差
2、對每個分量做加減計算，三步：
step1：取出要計算的分量值
var n = date.getXXX();
step2：對取出的分量，做加減
step3：計算後的分量值，設置回去
date.setXXX(n);
簡寫：date.setXXX(date.getXXX()+或-n)
比如：+3年
date.setFullYear(date.getFullYear()+3);
+4月
date.setMonth(date.getMonth()+4);
+10分鐘
日期轉字元串：
預設：轉為國際日期標準格式
1、轉成當地的時間格式
date.toLocaleString(); //返回日期 + 時間
2、轉成當地時間格式，僅保留日期部分
date.toLocaleDateString(); //返回日期部分
3、轉成當地時間格式，僅保留時間部分
date.toLocaleTimeString(); //返回時間部分
問題：瀏覽器相容性，輸出格式不一樣
解決：自定義格式化方法
3、★★★★★★★★Regexp
什麼是：定義字元串中字元出現規則的表達式
何時使用：查找 替換 驗證
2、備選字元集：[] 規定*一位*字元可用的備選字元列表
[a-zA-Z\u4e00-\u9fa5_]{6,14}
強調：1、一個中括弧，只能匹配一個字
2、正則表達式不能僅匹配部分規則：必須全部匹配
特殊：1、如果備選字元集中有部分連續字元
可用-省略中間字元
比如：一位數字：[0-9]
一位字母：[a-zA-Z]
一個數字，字母或者下劃線：[0-9a-zA-Z_]
一個漢字：[\u4e00-\u9fa5]
3、預定義字元集：專門對常用字元集的簡化寫法：
一位數字：\d -> [0-9]
一位字母，數字或下劃線：\w -> [0-9a-zA-Z_]
一位空白字元：\s 包括：空格，換行，製表符
一位除換行外的任意字元：.
問題：預定義字元集是固定的，不靈活
解決：需求和預定義字元集完全匹配，優先使用預定義字元集，如果需求和預定義字元集不完全匹
就只能自定義普通字元集了
4、量詞：規定一個字元集出現次數的規則
1、有明確數量
{n,m}：前邊相鄰的字元集，最少出現n次，最多出現m次
{n,}：前邊相鄰的字元集，最少出現n次，最多出現無限次
{n}：前邊相鄰的字元集，只能出現n次
2、沒有明確數量
?：可有可無，但最多1個
*：可有可無，數量不限
+：至少一個，多了不限
5、選擇和分組：
選擇：兩個規則中二選一匹配
規則1|規則2
分組：將多個字元集臨時組成一組子規則
6、指定匹配位置：
開頭和結尾：^表示字元串的開頭位置
$表示字元串的結尾位置
特殊：預設正則表達式匹配字元串的一部分即可
如果希望完整匹配：前加^後加$
單詞邊界：\b 開頭，結尾，空格
密碼強度：8為字母，數字的組合
至少一位大寫字母和一位數字
1、預判整個字元串，從頭到位不只由字母組成
結論：可能有數字，或有特殊符號
(?![a-zA-Z]+$)
2、預判整個字元串，從頭到尾不只由小寫字母和數字組成
結論：可能有大寫字母，或特殊符號
(?![0-9a-z]+$)
如果前兩個條件都滿足：說明：
可能有數字，小寫字母，大寫字母，或特殊符號
3、只能是8為字母或數字的組合
[a-zA-Z0-9]{8} -- 排除特殊符號了
^(?![a-zA-Z]+$)(?![a-z0-9]+$)[a-zA-Z0-9]{8}$
2、****String中支持正則的API
2、search：支持正則，不能指定下次開始位置，不支持g，返回下標 -- 適合判斷有沒有
3、match：支持正則，支持ig，可以找到所有關鍵詞的內容，無法獲得下標。 -- 適合獲得所有關鍵詞的內容
4、即獲得每個關鍵詞的位置，又獲得其內容
var arr=reg.exec(str);
在str中，查找符合reg規則的第*一個*敏感詞
如果不加g，也只能找到第一個
如果加g，可用迴圈反覆調用，找所有
返回值：arr[0]保存著敏感詞的內容
arr.index保存著當前敏感詞的位置
在使用exec查找關鍵詞的同時，可以用RegExp.$n獲得本次找到的關鍵詞的部分的內容
貪婪模式與懶惰模式
1、貪婪模式：正則表達式預設匹配最長的符合條件的字元串
2、懶惰模式：僅匹配最短的符合條件的字元串
貪婪改懶惰：.*? .+?
2、驗證：檢查字元串和正則表達式是否*完全*匹配
如果：var bool=reg.test(str);
查找str是否符合reg的規則要求
返回值：驗證通過，返回true，否則返回false
6、★★★★★★★★Error
錯誤處理：當程式發生錯誤時，保證程式不會異常中斷的機制
為什麼：程式預設只要碰到錯誤就會閃退，用戶體驗差
如何錯誤處理：
try{
可能發生錯誤的代碼段
}catch(err){
如果發生錯誤，才執行的錯誤處理代碼
}finally{
無論是否發生異常，都會執行的代碼段
}
其實finally是可以省略的
強調：err會在錯誤發生時，自動獲得一個錯誤對象
錯誤對象：封裝錯誤信息的對象
在發生錯誤時，自動創建
js錯誤對象的類型：6種
語法錯誤：SyntaxError
引用錯誤：ReferenceError
類型錯誤：TypeError
範圍錯誤：RangeError
EvalError，URIerror
性能：放在try中的代碼，效率都會降低
解決：1、儘量在try中僅包含可能出錯的代碼。
2、大多數異常，都可以提前預知並預防
大多數異常都可用if提前判斷錯誤
***判斷瀏覽器相容性：
判斷瀏覽器是否支持Ajax對象：XMLHttpRequest
try catch中的return
1、finally中沒有return
如果不出錯，首先會確定try中的return的結果
**再執行finally中的代碼
最後返回結果
如果出錯，首先執行catch中的代碼
確定catch中return的結果
在執行finally中的代碼
最後返回結果
2、finally中有return，finally中的return會覆蓋之前的所有的return
拋出自定義異常：
在一個架構級的函數中，向函數的調用者拋出自定義異常
目的在提醒調用者，錯誤的使用了函數。
如何拋出：throw new Error("自定義錯誤信息");
8、★★★★★★★★Objiect
面向對象：三大特性（封裝 繼承 多態）
什麼是面向對象：程式中都是用對象來描述現實中的一個事物
什麼是對象：程式中描述現實中一個具體事物的程式結構
包括：屬性和方法
為什麼面向對象：現實中所有的數據都必須包含在一個事物中才有意義
如何創建自定義對象
封裝：將一個事物的屬性和功能集中定義在一個對象中
現實中一個事物的屬性，會成為對象的屬性
而一個事物的功能，會成為對象的方法
3種：
1、對象直接量：
var obj={
"屬性名":屬性值,
...
"方法名":function(參數列表){函數體}
}
強調：其實屬性名和方法名的引號可以省略
如何訪問屬性和方法
obj.屬性名 -- 用法同普通變數
等效於：obj["屬性名"];
obj.方法名() -- 用法同普通函數
等效於：obj["方法名"]();
強調：如果用.就不能加""
如果用[]，就必須加""
強烈建議：用.訪問對象的屬性和方法
*****js中一切都是對象，一切對象的底層都是hash數組
特殊：1、訪問到不存在的屬性，返回undefined
2、隨時可添加不存在屬性
this：在當前對象的方法內，引用正在調用方法的對象
何時使用：當前對象的方法內，要訪問當前對象自己的屬性時，就*必須*寫成this.屬性名
何時創建對象：今後都要先封裝對象，在調用對象的屬性和方法。
2、使用new關鍵詞
var obj=new Object();//創建空對象
obj.屬性名=值;
...
obj.方法名=function(){}
其中new Object()
new可省略，()也可以省略，但是不能同時省略
*****3、使用構造函數反覆創建多個結構相同的對象
使用直接量創建對象的問題：僅適合創建一個單獨的對象
反覆創建多個結構相同的對象，則代碼冗餘度太高！
不便於維護
解決：先定義構造函數，再用構造函數反覆創建對象
什麼是構造函數
專門定義一類對象統一結構的函數
如何定義：function 類型名(屬性參數列表){
this.屬性名=屬性參數值;
...
this.方法名=function(){}
}
如何調用構造函數創建對象
var obj=new 類型名(屬性值列表)
new的執行過程：4個事
1、創建一個空對象：new Object()
2、？
3、用新創建的空對象，調用構造函數
4、返回新對象的地址，保存到左邊的變數中
實例化：用構造函數創建一個新對象
構造函數是一類對象的統一結構
每個對象是構造函數的實例
遍歷一個對象的屬性：
for(var i in obj){
obj[i]//當前屬性值
}
1、*****面向對象
面相對象和麵相過程的區別（概念）
面向過程--函數式(過程化).
面向過程：面向過程的思想是把一個項目、一件事情按照一定的順序，從頭到尾一步一步 地做下去，先做什麼，後做什麼，
一直到結束。
弊端：全局變數、全局函數。
面向對象(OOP)：強調類的概念，通過類可以創建任意多個具有相同屬性和方法的實例對象。
面向對象：面向對象的思想是把一個項目、一件事情分成更小的項目，或者說分成一個個
更小的部分，每一部分負責什麼方面的功能，最後再由這些部分組合而成為一個整體。
工廠模式
工廠模式是軟體工程領域一種廣為人知的設計模式，這種模式抽象了創建具體對象的過程。
工廠模式的實現方法非常簡單，通過封裝解決了創建多個相似對象的問題，但是卻無從
識別對象的類型，因為全部都是Object，不像Date、Array等
構造函數模式雖然好用，但也並非沒有缺點。使用構造函數的主要問題，就是每個方法都要在每個實例對象上重新創建一遍。
1、*****繼承：父對象的成員(屬性和方法)，子對象可以直接使用
為什麼繼承：代碼重用！節約了記憶體空間！
何時繼承：只要多個子對象共有的屬性和方法，都要集中定義在父對象上
js中的繼承：都是通過原型實現的 -- 繼承原型
什麼是原型：保存一類子對象共有屬性和方法的父對象
所有子對象都自動繼承原型對象
每個構造函數都有一個prototype屬性，應用自己的原型對象
對象成員的訪問規則
1、先在對象本地找自有屬性
2、如果自己沒有，就自動通過__proto__找到原型對象的自有屬性和共有屬性
自有屬性：保存在對象本地的屬性
共有屬性：保存在父對象中的屬性，所有子對象共有
面試題：判斷自有和共有屬性：
1、判斷自有屬性：obj.hasOwnProperty("屬性名");
如果返回true，說明"屬性名"是obj的自有屬性
如果返回false，說明2種可能，共有或沒有
2、判斷共有屬性：2個條件
1、不是自有：hasOwnProperty返回false
2、在原型鏈上包含:"屬性名" in 對象
檢查"屬性名"是否定義在對象的原型鏈上
if(obj.hasOwnProperty("屬性名")==false && "屬性名" in obj){
是一個共有屬性
}
原型鏈：由各級對象，通過__proto__逐級繼承，實現的鏈式繼承關係
只要在原型鏈上包含的成員，子對象都可以繼承
修改或刪除屬性：
1、修改或刪除自有屬性：
修改：obj.屬性名=新值;
刪除：delete obj.屬性名;
2、修改或刪除共有屬性：
不能用子對象直接操作
如果用子對象操作
1、修改：obj.共有屬性=新值; -- 危險
結果：在obj本地添加同名的自有屬性
2、刪除 delete obj.共有屬性; -- 無效
要想修改和刪除共有屬性，只能通過原型對象本身
所有內置對象，幾乎都有構造函數和原型對象
只有Math沒有構造函數
構造函數用於創建內置對象的實例：new 構造函數(...)
new Object 10個內置對象 是平級關係
內置對象的原型對象：保存所有內置對象的可以用的API
判斷瀏覽器不支持指定API
比如：判讀Array類型不支持indexOf
見案例：exec01
if(Array.prototype.indexOf===undefined){
Array.prototype.indexOf=function(value,fromi){
}
}
1、*****繼承
如何獲取一個對象的原型對象
語法：Object.getPrototypeOf(obj);
等效與__proto__
檢查對象間的父子（繼承）關係
語法：父對象.isPrototypeOf(子對象);
判斷父對象是否是子對象的父級
強調：isPrototypeOf不但可以檢查直接父級，還可以檢查所有原型鏈上的父級對象
*****判斷一個對象是不是數組
1、typeof無法區分對象和數組，預設返回都是[object Class]
2、判斷當前對象是否繼承自Array.prototype
Array.prototype.isPrototypeOf(obj)
如果返回true，說明是數組，否則不是數組
3、obj instanceof 構造函數
判斷obj是否是構造函數的實例
4、輸出對象的字元串形式
在Object的prototype中保存著原始的toString方法
原始的toString 預設輸出[object Object]
5、Array.isArray(obj)
***重寫（override）：子對象覺得父對象的成員不好用，可在本地定義同名成員，覆蓋父對象中的成員。
屬於多態的一種
借用函數：使用另一個對象，臨時調用指定的函數
函數中的this，被替換為了臨時對象
函數.call(臨時對象) 相當於： 臨時對象.函數()
****實現自定義繼承
1、實現兩個對象間的繼承
子對象.__proto__=父對象 //可能禁止訪問內部屬性
相容：Object.setPrototypeOf(子對象,父對象)
讓子對象繼承父對象
2、通過修改構造函數的原型對象來修改多個子對象的父對象
時機：應該在開始創建對象之前！
3、即繼承對象，又擴展結構
2步
1、借用父類型構造函數
父類型構造函數.apply(this,arguments);
*****call vs apply
功能完全一樣，都是借用函數，並傳入參數
差別：call，要求分散傳入參數
apply，要求將參數放入在集合中傳入
2、讓子類型的原型，繼承父類型的原型
Object.setPrototypeOf(子類型.prototype,父類型.prototype)
1、★★★★★★★★DOM：Document Object Model
專門操作網頁內容API W3C DOM標準 瀏覽器廠商實現DOM標準
DHTML：一切實現網頁動態效果的技術的統稱
HTML+CSS+javascript
鄙視題：HTML XHTML DHTML XML
HTML：超文本標記語言，專門用於編寫網頁內容的語言
XHTML：更嚴格的HTML標準
DHTML：一切實現網頁動態效果的技術的統稱
XML：可擴展的標記語言 -- 可自定義標簽名的標記語言（配置文件和數據格式）
DHTML模型：
BOM：Broweser Object Model
瀏覽器對象模型
專門操作瀏覽器視窗的API
沒有標準，基本主流瀏覽器已經實現了功能，所以，用的不多
DOM：Document Object Model
專門操作網頁內容API
W3C DOM標準 瀏覽器廠商實現DOM標準
DOM：本來是可以操作一切結構化文檔的：HTML和XML
核心DOM：可以操作一切結構化文檔的API
萬能！但是API比較繁瑣
增 刪 改 查
HTML DOM：專門操作網頁內容的API
其實是基於核心DOM的簡化版本
API簡潔！僅對複雜HTML元素提供了簡化 -- 不是萬能
改 複雜元素：增加 和 刪除
實際開發：優先使用HTML DOM
HTML DOM實現不了的，用核心DOM補充
2、***DOM Tree：保存所有網頁內容的樹狀結構
***遍歷節點樹：對每個子節點執行相同的操作
遞歸：函數內，又調用了自己
何時使用：遍歷不確定層級深度的樹形結構時
如何實現遞歸：
1、先實現遍歷直接子節點的方法
強調：childNode是動態集合
動態集合：不保存完成的節點屬性，只保存節點的位置
只要訪問動態集合，都會導致重新查找DOM樹
優：快速返回查找結果
缺：每次訪問動態集合，都重新查找 -- 效率低
遍歷時：都要先將length屬性存在變數中
2、對每個子節點，執行和父節點相同的操作
演算法：深度優先！優先遍歷當前節點的子節點
子節點遍歷，才跳到兄弟節點
遞歸 vs 迴圈
1、遞歸：優：直觀，易用
缺：占用更多資源，效率低
2、迴圈：優：幾乎不占用資源，效率高
缺：難度高，代碼量大
DOM中所有的節點對象
DOM元素類型
節點可以分為元素節點、屬性節點和文本節點...，他們分別用不同的數字代表類型。
例如：元素(1) 屬性(2) 文本(3)
每個元素節點又有三個非常有用的屬性，分別為：nodeName、nodeType、nodeValue
childNodes節點的集合
childNodes(新方法)/chilrend(不包含空白) 獲取當前元素節點的所有子節點,這裡麵包含空白節點，但在IE9之前，IE瀏覽器會自動忽略空白節點.
節點的高級選取 前面的方法會包含空白節點
firstChild/firstElementChild 獲取當前元素節點的第一個子節點
lastChild/lastElementChild 獲取當前元素節點的最後一個子節點
previousSibling/previousElementSibling 獲取當前節點的前一個兄弟節點
nextSibling/nextElementSibling獲取當前節點的後一個兄弟節點
ownerDocument 獲取該節點的文檔根節點（document）
document.documentElement 獲取的html標簽元素
document.title 獲取title標題元素
document.body 獲取body標題元素
parentNode 獲取當前節點的父節點
****鄙視題：getXXXByXXX vs querySeletorXXX
差別：
返回值：
動態集合：
優：查詢結構塊，缺：導致重覆檢索DOM樹
非動態集合
優：保存完整的屬性，不會導致重覆檢索
缺：查詢效率低
何時使用：
如果一次查詢即可得出結果，優先getXXXByXXX
如果需要多次查詢才能得到結果，優先使用querySeletorXXX
2、屬性
DOM元素的所有屬性節點都保存在一個集合中：attributes
可用下標或者屬性名訪問每個屬性
1、讀取屬性值：
核心DOM：
1、elem.attribute[下標/"屬性名"].value
*2、elem.getAttribute("屬性名") //value
3、elem.getAttributeNode("屬性名").value
何時使用：萬能 即可獲得標準屬性，又可以獲得自定義屬性
HTML DOM：elem.屬性名 -- 只能獲得標準屬性
讀取css裡面屬性
//標準瀏覽器：getComputedStyle(元素對象)['屬性名']; 帶單位
//IE8及以下：元素對象.currentStyle['屬性名']
2、設置屬性值：
核心DOM
*1、elem.setAttribute("屬性名","屬性值");
2、elem.setAttributeNode(attrNode);
HTML DOM：elem.屬性名=屬性值; -- 只能改標準屬性 不是這種方式添加的屬性不能直接獲取；
3、移除屬性
核心DOM：
elem.removeAttribute("屬性名");
何時使用：萬能的
HTML DOM：elem.屬性名=""; -- 相當於移除
4、判斷有沒有
核心DOM：
elem.hasAttribute("屬性名") //返回bool
強調：萬能 ，即可判斷標準屬性，又可以判斷自定義屬性
HTML DOM：elem.屬性名!="";
標準屬性 vs 自定義屬性
標準：即可用核心DOM訪問，有可用HTML DOM訪問
自定義：只能用核心DOM
編碼解碼
編碼：var code=encodeURI("原文");
解碼：var 原問=decodeURI("code");
問題2：url中不允許出現保留字元：比如： ： /
解決：用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI
eval：專門執行字元串格式的表達式
var 表達式的結果=eval("表達式")
如果傳入eval的表達式有錯誤，JS引擎會在執行時報錯
1、元素的內容
elem.innerHTML：獲取或設置元素開始標簽到結束標簽之間的HTML代碼內容，沒有相容性問題。
何時使用：只要獲得完整的HTML原文時
只要批量設置元素內容時，都要使用innerHTML先拼接好字元串，再一次性賦值。
elem.textContent：獲取或設置元素開始標簽到結束標簽之間的純文本的正文
忽略html標簽：將特殊符號翻譯為正文
有相容性問題：IE8 老IE：elem.innerText
3、樣式
內聯樣式：優先順序最高，會覆蓋其他地方的樣式
僅僅當前元素可用，不會影響其他元素
elem.style.css屬性名
elem.style.css屬性名="值"
elem.style.cssText=屬性名="值" 連寫
內部樣式表和外部樣式表：
var sheet=document.styleSheets[i];//獲取某一個樣式表
var rules=sheet.cssRules||sheet.rules;//當前樣式表中所有的選擇器
var rule=rules[i];//獲取第幾個選擇器
rule.style.transform="rotate(0deg)";//給當前選擇器修改樣式
修改的缺點：1、複雜
2、優先順序不一定能覆蓋到其他樣式
3、牽一發而動全身（改一個有可能多個都被改變）
使用場合，用於獲取樣式
1、添加和刪除元素
1、添加單個元素：3步
1、創建一個空元素
語法：var elem = document.createElement("標簽名");
2、將新元素，載入到指定DOM樹上的父元素下
語法：parent(父元素).appendChild(elem) //將我們的elem追加到parent的最後一個子元素的後面
parent(父元素).insertBefore(elem,已有元素); //將elem插入到"已有元素"的前面
parent(父元素).replaceChild(elem,已有元素); //用elem替換"已有元素"
強調：每一次修改DOM樹，都會導致重新layout，頻繁修改DOM樹，會效率降低
解決：先在記憶體中，將DOM子樹拼接好，在整體加到DOM樹裡面
2、批量添加多個平級子元素(兄弟元素)
1、創建一個文檔片段：Document Fragment
文檔片段：記憶體中臨時存儲多個DOM元素的臨時父元素
何時使用：只要添加多個拼接子元素的時候，都要先將子元素，放入到我們的文檔片段中保存(緩存)
var frag = document.createDocumentFragment();
2、將子元素追加到文檔片段裡面去，臨時保存
frag.appendChild(子元素);
其實frag的用法和普通父元素是完全一樣的
3、將文檔片段整體追加到頁面上
parent.appendChild(frag);
強調：Fragment不會出現在DOM樹上
3、刪除子元素：parent(父元素).removeChild(子元素);
2、*****event對象
事件：用戶手動觸發的 或者 瀏覽器自動觸發的狀態的改變
事件對象：在事件發生時，自動創建的，專門封裝事件信息的對象
事件處理函數：在事件發生時，自動調用執行的函數
事件對象獲取：
IE8：window全局有一個屬性event，在事件發生時，保存事件對象
相容：elem.onXXX=function(e){
e=e||window.event;
}
也可以通過arguments[0]獲取
事件對象屬性
clientX,clientY：滑鼠相對於可視區的位置。
pageX,pageY： 滑鼠相對於文檔的位置。
offsetX,offsetY：滑鼠相對於操作元素(滑鼠點擊元素)到元素邊緣(左上)的位置.
screenX,screenY：滑鼠相對於顯示屏的位置.
3、事件監聽器（事件綁定）（相容）--可以綁定多個函數在一個對象上
target.addEventListener("事件類型", 函數, 是否捕獲(布爾值))--標準瀏覽器事件監聽
target.removeEventListener()--標準瀏覽器取消監聽
target.attachEvent("事件類型",函數) --IE瀏覽器事件監聽
target.detachEvent() --IE瀏覽器取消監聽
註意：移除事件監聽的參數和添加事件監聽的參數是一致的。
實現相容：
if(elem.addEventListener){
elem.addEventListener("事件名//不要加on",函數對象//方法名不要加())
}else{
elem.attachEvent("on事件名",函數對象);
}
DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。
DOM：3個階段
1、捕獲階段，由外向內
捕獲：記錄所有要執行的事件處理函數
2、目標觸發：優先觸發目標元素上的事件處理函數
目標元素：實際發生事件的元素
3、由內向外，冒泡執行
IE8：2個階段，沒有捕獲
改變事件觸發的順序
設置事件處理函數在捕獲階段就提前執行
如何設置：elem.addEventListener("事件名//不要加on",函數對象//方法名不要加(),"capture");
capture:true:在捕獲階段提前執行
false：在冒泡階段執行(預設)
只有DOM的addEventListener可以修改觸發順序
IE8的attachEvent沒有第三個參數，不能修改事件觸發順序
事件委托機制
利用冒泡機制，將子元素事件委托給父元素執行。
oUl.onclick=function(ev){
var ev=ev||window.event;
var element=ev.target;
if(element.nodeName=='LI'){
alert(element.innerHTML);
}
}*/
1、取消冒泡
DOM：e.stopPropagation()
IE8：e.cancelBubble=true;
if(event.stopPropagation){
event.stopPropagation(); //標準瀏覽器
}else{
event.cancaleBubble==true; //老ie
}
2、html dom對象
1、Image對象
創建img元素：var img = new Image();
屬性：width、height、src
強調：不是所有元素都可以new！只有個別可以
2、select對象：代表一個select
屬性：options：獲取select下所有的option子元素的*集合*！
下標訪問，length屬性，遍歷
selectedIndex：獲取當前選中項的下標
方法：add(option)：將option添加到select下
相當於：appendChild(option)
remove(i)：刪除i位置的option
相當於：removeChild(子元素);
時間：onchange：當前選中項發生改變的時候觸發
3、option對象：代表select下麵的一個option元素
創建：var opt = new Option(innerHTML,value);
相當於：
1、var opt = document.createElement("option");
2、opt.innerHTML="";
3、opt.value=value;
屬性：index：獲取當前option的下標
text：獲取當前option的文本
value：獲取當前option的value
selected：獲取當前option被選中了嗎
簡寫：創建option後，立刻追加到select中
select.add(new Option(text,value))
4、table對象：代表html的table元素
屬性：rows 獲取所有行
方法：
insertRow(i) 在指定位置插入一個tableRow對象
deleteRow(i) 在指定位置刪除一個tableRow對象
5、tableRow：代表html表格行
屬性：
cells 獲得所有的格(td)
innerHTML 獲取當前行的所有的內容
rowIndex 獲取當前tr在整個表格中的下標
方法：
insertCell(i) 在指定位置插入一個tableCell對象
deleteCell(i) 在指定位置刪除一個tableCell對象
6、tableCell對象
屬性：cellIndex
innerHTML
colSpan
rowSpan
7、form對象：代表一個form元素
獲得form元素：document.forms[i/"id"/"name"];
方法：reset() 重置哪個form表單
submit(); 手動提交
事件：onsubmit：當正式提交表單之前，自動觸發，專門用來在表單提交前，實現驗證
查找表單裡面的元素：form.elements[i/"id"/"name"];
可簡寫：form.id/name
只能找到帶name屬性的額數據採集元素(input)或按鈕
elem.focus();//讓指定元素獲得焦點
1、★★★★★★★★BOM：Browser Object Model 專門操作用瀏覽器視窗的API -- 沒有標準
window對象：扮演2個角色
1、它代替了ES裡面的Global，充當全局作用域
包含所有的全局對象，方法以及變數
2、指代當前打開的瀏覽器視窗
1、location對象
window.location.href= "http://www.xxxxxxxx.net" ; 跳轉後有後退功能
window.location.replace("http://www.xxxxxxxx.net") ; 跳轉後沒有後退功能
window.location.search 從問號 (?) 開始的 URL（查詢部分）
window.location.reload(true)方法 刷新頁面,如果參數為true,通過緩存刷新。
2、window.open("url","_self");跳轉後有後退功能
window.open("url","_blank");可以打開多個頁面
window.open("url","name","config") config是配置視窗初始化大小和位置的配置*字元串*
window.open('http://www.baidu.com','newwindow','width=200,height=200')
其中width和height相當於innerHeight innerWidth
3、window.close() - 關閉當前視窗
window.moveTo(left,top) - 移動當前視窗
window.resizeTo(newwidth,newheight) - 調整當前視窗的尺寸
4、history對象
history.back() 等同於按瀏覽器的後退按鈕
history.forward() 等同於按瀏覽器的前進按鈕
history.length 屬性 -- history對象中緩存了多少個URL
history.go(-2)或 history.go("任意.html") 向前或向後移動，
5、navigator對象
navigator.userAgent 用戶代理信息，通過該屬性可以獲取瀏覽器及操作系統信息
6、screen對象：保存屏幕的解析度信息
screen.width screen.height完整屏幕寬高
screen.availWidth screen.availHeight 去掉任務欄的剩餘寬高
BOM的常用事件
onload事件：頁面內容載入完成（DOM結構，圖片.....）
onscroll事件：拖動瀏覽器的滾動條觸發此事件。
onresize事件：瀏覽器視窗縮放所觸發的事件。
可視區的寬高
document.documentElement.clientWidth
document.documentElement.clientHeight
offsetleft 元素相對於父級的距離
offsettop
offsetwidth 元素寬度
offsetheight
滾動條距離（某些瀏覽器下麵做相容）
document.documentElement.scrollTop || document.body.scrollTop
2、定時器
timer=setInterval(任務function(){},間隔毫秒數) 創建定時器
timer獲得定時器的序號，唯一表示記憶體中的一個定時器
強調timer通常不是局部變數
clearInterval(定時器序號=timer); 暫停定時器
timer=null; 定時器清除
timer=setTimeout(任務,等待時間)
clearTimeout(定時器序號=timer);
timer=null
}else{
e.cancelBubble=true;//老IE包含了主流瀏覽器
}
阻止瀏覽器的預設行為
ev.preventDefault(); 標準瀏覽器阻止預設事件,DOM事件使用此方法取消預設事件。
ev.returnValue = false; 非標準瀏覽器（IE8）阻止預設事件
return false; 退出執行, 所有觸發事件和動作都不會被執行. 可以用來替代 preventDefault
COOKIE的概念
Cookie又叫會話跟蹤技術是由Web伺服器保存在用戶瀏覽器上的小文本文件，它可以包含相關用戶的信息。
cookie的特點
禁用Cookie後，無法正常登陸。
cookie是與瀏覽器相關的，不同瀏覽器之間所保存的cookie也是不能互相訪問的；
cookie可能被刪除。因為每個cookie都是硬碟上的一個文件；
cookie安全性不夠高。
數組、對象cookie的存儲和訪問。
1、JSON.parse 函數
作用：將 JavaScript 對象表示法 (JSON) 字元串轉換為對象，具有json格式檢測功能。
2、JSON.stringify()函數
作用：將 JavaScript 值轉換為 JavaScript 對象表示法 (JSON) 字元串
1、★★★★★★★★ES6
this的應用及指向問題
this是Javascript語言的一個關鍵字。它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。
隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是調用函數的那個對象。
this的使用情況：
1、作為普通函數調用，這時函數屬於全局性調用，因此this就代表全局對象window。
2、作為對象方法的調用，這時this就指這個當前對象。（事件處理函數同理）
3、作為構造函數調用，所謂構造函數，就是通過這個函數生成一個新對象（實例）。這時，this就指這個新對象（實例）。
4、apply 、 call 、bind的介紹（函數的方法）
apply 、 call 、bind 三者都是用來改變函數的this對象的指向的；第一個參數都是this要指向的對象，也就是想指定的上下文；
從第二個參數開始，就是函數的本身的參數；
但bind 是返回對應函數，便於稍後調用；apply 、call 則是立即調用 。
5、應用總結
我們都知道定時器的匿名函數里不能寫this，它會指向window，但有了bind方法以後，我們可以隨意設定this 的指向。
利用變數賦值改變this執行（將正確的this存儲下來)。
http://es6.ruanyifeng.com/
let和const命令
ES6新增了let命令，用來聲明變數。它的用法類似於var，但是所聲明的變數，只在let命令所在的代碼塊內有效。
只要塊級作用域記憶體在let命令，它所聲明的變數就“綁定”這個區域，不再受外部的影響。
不存在變數提升
let不允許在相同作用域內，重覆聲明同一個變數。
ES6允許塊級作用域的任意嵌套，外層無法讀取內層作用域的變數，反之可以
允許在塊級作用域內聲明函數,外部同樣可以訪問
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
const聲明的常量，也與let一樣不可重覆聲明。
const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。
核心：var 和 let const的區別
變數的解構賦值
ES6允許按照一定模式，從數組和對象中提取值，對變數進行賦值，這被稱為解構.
解構的作用是可以快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者 obj[key]等傳統方式進行賦值
數組的解構賦值
對象的解構賦值
字元串的解構賦值。
函數參數的解構賦值（利用數組和對象解構傳參賦值）
擴展運算符
擴展運算符用三個點號表示，功能是把數組或類數組對象展開成一系列用逗號隔開的值
rest運算符
rest運算符也是三個點號，不過其功能與擴展運算符恰好相反，把逗號隔開的值序列組合成一 個數組
字元串擴展
模板字元串
模板字元串（template string）是增強版的字元串，用反引號（`）標識。它可以當作普通
字元串使用，也可以用來定義多行字元串，或者在字元串中嵌入變數（${}）。
repeat(n)方法返回一個新字元串，表示將原字元串重覆n次。
includes()：返回布爾值，表示是否找到了參數字元串。
startsWith()：返回布爾值，表示參數字元串是否在源字元串的頭部。
endsWith()：返回布爾值，表示參數字元串是否在源字元串的尾部。
=>函數
函數預設值
箭頭函數有幾個使用註意點。
1、函數體內this對象，就是定義時所在的對象，而不是使用時所在的對象。This不會改變了。
2、不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
3、不可以使用arguments對象，該對象在函數體內不存在。
4、箭頭函數一定是匿名函數。
5、箭頭函數應用總結：
箭頭函數適合於無複雜邏輯或者無副作用的純函數場景下，例如用在map、reduce、filter的回調函數定義中；
不要在最外層定義箭頭函數，因為在函數內部操作this會很容易污染全局作用域。最起碼在箭頭函數外部包一層普通函數，
將this控制在可見的範圍內；
箭頭函數最吸引人的地方是簡潔。在有多層函數嵌套的情況下，箭頭函數的簡潔性並沒有很大的提升，
反而影響了函數的作用範圍的識別度，這種情況不建議使用箭頭函數。
Symbol類型
symbol--表示獨一無二的值，它是js中的第七種數據類型。
基本數據類型：null undefined number boolean string symbol
引用數據類型：object
Symbol():首字母大寫。
symbol 函數前不能使用new,否則會報錯，原因在於symbol是一個原始類型的
值，不是對象。
1、symbol函數接收一個字元串作為參數，表示對symbol的描述，主要是為了
在控制台顯示，或者轉為字元串的時候，比較容易區分。描述的內容相同僅僅表示
的是描述，不代表其他的意義。
2、symbol數據類型轉換。
symbol可以利用String()、toString()轉換成字元串
利用Boolean()或者！轉換成布爾值(只有true值)
不能轉換成數字。
不能使用任何運算符進行運算。
3、作為對象的屬性名。
4、註意事項
不能直接使用[symbol()]作為鍵值，最好添加對應的參數進行區分，而且也不能被 for...in遍歷出來。但可以通過
Object.getOwnPropertySymbols(obj)方法獲 取一個對象所有的symbol屬性。
Set（array）和Map(object)結構
ES6提供了數據結構set. 它類似於數組，但是成員的值都是唯一的，沒有重覆的值。
Set 本身是一個構造函數，用來生成 Set 數據結構，數組作為參數。
每一項即是鍵也是值,鍵和值是相同的。
1、創建一個Set；
2、Set類的屬性--size
3、Set類的方法
Set.add(value) 添加一個數據，返回Set結構本身，允許進行鏈式操作。
Set.delete(value) 刪除指定數據，返回一個布爾值，表示刪除是否成功。
Set.has(value) 判斷該值是否為Set的成員，返回一個布爾值。
Set.clear() 清除所有的數據，沒有返回值。
forEach()：使用回調函數遍歷每個成員
數據結構--map
JavaScript 的對象（Object），只能用字元串當作鍵。這給它的使用帶來了很大 的限制。ES6 提供了 Map 數據結構。
它類似於對象，但是“鍵”的範圍不限於 字元串，各種類型的值（包括對象）都可以當作鍵。Symbol類型當作key輸出時
無法確認是同一個key.
1、創建一個map
2、map類的屬性--size
3、map類的方法
map.set(key,value) :設置鍵名key對應的鍵值value,然後返回整個map結構，如 果key已經有值，則鍵值會被更新，否則就生成該鍵，可以鏈式操作。
map.get(key) get方法讀取key對應的鍵值，如果找不到key，返回undefined
map.delete(key) 刪除某個鍵，返回true.如果刪除失敗，返回false.
map.has(key) 方法返回一個布爾值，表示某個鍵是否在當前map對象之中。
map.clear() 清除所有數據，沒有返回值
map.keys() 返回鍵名的遍歷器
map.values() 返回鍵名/鍵值的遍歷器
map.entries() 返回鍵值對的遍歷器
map.forEach() 使用回調函數遍歷每個成員。
Generators生成器函數和iterator介面
1、Generators生成器函數
Generator 函數是 ES6 提供的一種非同步編程解決方案
Generator 函數是一個狀態機，封裝了多個內部狀態。
2、iterator介面
遍歷器（Iterator）就是這樣一種機制。它是一種介面，為各種不同的數據結構提供統一的訪問
機制。任何數據結構只要部署 Iterator 介面，就可以完成遍歷操作
Iterator 的作用有三個：
一是為各種數據結構，提供一個統一的、簡便的訪問介面；
二是使得數據結構的成員能夠按某種次序排列；
三是 ES6 創造了一種新的遍歷命令for...of迴圈，Iterator 介面主要供for...of消費。
如何檢測數據可以使用for...of【Symbol.iterator】
數組和對象的擴展
數組的擴展方法
1、Array.from()方法用於將對象轉為真正的數組(類數組轉數組)
2、Array.of()方法用於將一組值，轉換為數組。
3、fill()方法使用給定值，填充一個數組。
對象的擴展方法
1、對象的簡潔表示法
2、object.assign()用於對象的合併，將源對象的所有可枚舉屬性，複製到目標對象。
1、★★★★★★★★PHP: Hypertext Preprocessor
中文名：“超文本預處理器” 是一種免費開源的伺服器端腳本程式。主要適用於Web開發領域。
PHP 是一種非常弱的類型語言。在大多數編程語言中，變數只能保存一種類型的數據，
而且這個類型必須在使用變數之前聲明。而在 PHP 中，變數的類型是由賦值給變數的值確定的。
變數的八大數據類型
四種標量類型：
boolean （布爾型）
integer （整型）
float （浮點型, 也稱作 double)
string （字元串）
兩種複合類型：
array （數組）
object （對象）
最後是兩種特殊類型：
resource （資源）：資源是由專門的函數來建立和使用的，例如打開文件、數據連接、圖形畫布。
NULL （NULL）
數據類型的獲取和設置：gettype( ) settype( )
php的輸出：echo、print、print_r、var_dump
函數(變數的作用域)
php 表單 (get post request)
php 數組
創建數據的兩種方式
array創建
range()：建立一個包含指定範圍單元的數組
數組的相關方法介紹
count()和 sizeof()（別名） 統計數組下標的個數，數組的長度
array_count_values() 統計數組中所有的值出現的次數
array_unshift() 函數將新元素添加到數組頭
array_push() 函數將每個新元素添加到數組的末尾。
array_shift()刪除數組頭第一個元素，與其相反的函數是
array_pop(),刪除並返回數組末尾的一個元素。
sort() 數組排序
foreach() 提供了遍曆數組的簡單方式,僅能夠應用於數組和對象
array_unique() 移除數組中重覆的值(生成新數組)
數組的遍歷
for迴圈
foreach迴圈
返回JSON格式數據
json_encode() 對變數進行JSON編碼
json_decode() 對JSON格式的字元串進行解碼
1、★★★★★★★★資料庫 MYsql
MySQL操作
顯示當前存在的資料庫
SHOW DATABASES;
選擇你所需要的資料庫
USE guest;
查看當前所選擇的資料庫
SELECT DATABASE();
查看有多少張表
SHOW TABLES
查看一張表的所有內容
SELECT * FROM guest;
創建一個資料庫
CREATE DATABASE book;
在資料庫里創建一張表
create table numberone(
sid tinyint(2) unsigned not null auto_increment primary key,
url varchar(200) not null,
title varchar(100) not null
)DEFAULT CHARSET=utf8;//設置字元編碼為utf8;
顯示表的結構
DESCIRBE users;
給表插入一條數據
INSERT INTO users () VALUES ();
篩選指定的數據
SELECT * FROM users WHERE 條件;//users:表名
修改指定的數據
UPDATE users SET sex = '男' WHERE username='Lee';
刪除指定的數據
DELETE FROM users WHERE username='Lee';
刪除指定的表
DROP TABLE users;
刪除指定的資料庫
DROP DATABASE book;
MySQL 常用數據類型
整數型：TINYINT，SMALLINT，INT，BIGINT(帶符號和無符號)
TINYINT ： 1個位元組 -128 -- 127（0-255）
INT ： 4 個位元組 -2147483648 -- 2147483647（0 -4294967295）
浮點型：FLOAT，DOUBLE
FLOAT：占4個位元組。
字元型：CHAR，VARCHAR
CHAR:定長類型，一般用於性別、密碼等。
VARCHAR：可變類型，
