JavaScript常見輸出
window.alert()? 彈出框警告
document.write()? 將內容寫到HTML文檔中
innerHTML 寫入到HTML元素中
console.log() 控制臺輸出
1 函數中的arguments使用
每個函數內部都有一個 arguments ，系統內置的。
arguments是用來儲存實際傳入的參數
//求傳入任意數字的和？varsum=0;//求和的數functionsumFunction(){for(i=0;i<arguments.length;i++){//arguments.length代表當前輸入已存儲參數的個數。sum+=arguments[i];}returnsum;}alert(sumFunction(1,2,3,4,5,6));
2 函數的作用域
任何程序運行時候都要占用空間，函數調用的時候也要去占用空間
垃圾回收機制：調用完函數之后，系統會分配對應的空間給這個函數使用（空間大小一般由函數里聲明的變量和形參決定），當函數使用完畢以后，這個內存會被釋放，還給系統。
在函數內部聲明的變量和形參是屬于當前函數的內存空間。
內存管理機制：在函數中聲明的變量和形參，會隨著函數的調用被創建，隨著函數的調用結束而銷毀。在函數中聲明的變量和形參，有效范圍是當前函數（當前函數的大括號內），作用域，局部作用域。
vara=10,b=20;// 聲明在全局的變量叫全局變量functionshow(a){varb=100;// 在函數內部聲明，局部變量a+=5;alert(a+","+b);}
3 函數遞歸
滿足以下三個特點就是遞歸：
函數自己調用自己
一般情況有參數
一般情況下有return
注：遞歸可以解決循環能做的所有事情，有一些循環不容易解決的事情，遞歸也能解決。
//計算1~n的和？//正常函數寫法functionsum(n){varres=0;for(i=1;i<=n;i++){res+=i;}returnres;}alert(sum(100));//遞歸寫法/* 方法：1.首先去找臨界值，即無需計算，獲得的值。
? ? ? ? ? ? ? ? ? ? 2.找這一次和上一次的關系。
? ? ? ? ? ? ? ? ? ? 3.假設當前函數已經可以使用，調用自身算上一次。
? ? ? ? ? ? ? ? ? ? sum（100）== sum（99）+ 100；
? ? ? ? ? ? ? ? ? ? sum（n）== sum （n-1）+n；
? ? ? ? ? ? ? ? */functionsum(n){if(n==1){return1;}returnsum(n-1)+n;}alert(sum(100));
4 函數閉包
滿足以下特點的叫做閉包
函數嵌套函數
內部函數使用外部的形參和變量
被引用的形參和變量就不會被 【垃圾回收機制所回收，使內部函數的變量常駐內存中】
window.onload=function(){//閉包實現按鈕遍歷完后，點擊按鈕輸出對應的鍵值。varoBtn=document.getElementsByTagName("button");for(vari=0;i<oBtn.length;i++){oBtn[i].onclick=(function(index){returnfunction(){alert(index);}})(i);//這里的i相當于傳入函數的參數 所以就是index就是等于i }/* 上面的是簡寫成立即執行函數的閉包
? ? ? ? ? ? ? ? for(var i = 0;i < oBtn.length;i++){
? ? ? ? ? ? ? ? ? ? oBtn[i].onclick = btnClick(i);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //btnClick(0) index = 0
? ? ? ? ? ? ? ? function btnClick(index){
? ? ? ? ? ? ? ? ? ? return function(){
? ? ? ? ? ? ? ? ? ? ? ? alert(index);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } */
5 數組方法
方法格式返回值說明
Math.random()var sum = Math.random() * 10數字隨機數：? 隨機生成0 ~ 1之間的小數
push()數組.push(參數1，參數2，...)插完元素以后的數組的長度給數組的末尾添加元素
pop()數組.pop()? 不用傳參取下一個元素從數組末尾取下一個元素
shift()數組.shift()? 不用傳參取下的元素從數組頭部取下一個元素
unshift()數組.unshift(參數1，參數2，...)插完元素以后的數組的長度給數組的頭部插入元素
concat()數組.concat(數組，數據，...)合并成的新數組，原數組不會改變拷貝原數組，生成新數組
slice()數組.slice(start, end)生成新數組原數組不會發生改變可以基于當前數組獲取指定區域元素 [start, end] 提取出元素生成新數組
splice()數組.slice(開始截取的下標, 截取的長度，插入數據1，插入數據2...)截取下來的元素組成的數組對元素進行增刪改
join()數組.join(字符串)拼接好的字符串將數組中的元素，用傳入的拼接符，拼接成一個字符串
reverse()數組.reverse()逆序后的數組，此方法會修改原數組數組逆序
sort()數組.sort()排序后的數組，此方法會修改原數組默認從小到大排序，按照字符串排序
6 ECMA5新增數組方法
方法格式參數返回值說明
indexOf()數組.indexOf(item，start)item 任意數據，start 小標，可以不傳，默認為0-1 沒有查到，>= 0 查到元素的下標在數組 中查找item元素下標
forEach()數組.forEach(item,index){函數}item遍歷到的當前數組的內容，index遍歷到的當前數組元素下標item與index數組遍歷
map()數組.map(item, index, arr){函數}不會改變原數組，而是將里面函數執行一次返回新數組遍歷當前數組，然后調用參數中的方法
filter()數組.filter((item, index,array) => {函數})運行定義的函數后，返回符合的數組數組過濾
som()數組.some((item，index，arr) => {函數})有返回true，沒有返回false，只要找到符合條件的元素，后面的循環就停止了在數組中查找是否有符合內容的元素
every()數組.every((item，index，arr) => {函數})有返回true，沒有返回false，只要找不到符合條件的元素，后面的循環就停止了在數組中查找是否有符合內容的元素
reduce()歸并arr.reduce(prev, next, index, arr)prev第一次是 下標為0的元素，第二次開始 上次遍歷retturn的值，next 從下標1開始，當前遍歷到的元素，arr數組本身
// reduce()歸并vararr=[34,65,33,87,24,56]varres=arr.reduce((prev,next,index,arr)=>{console.log(prev+","+next);returnprev+next})alert(res)
7 字符串方法
方法格式參數返回值說明
indexOf() 字符查找字符串.indexOf(text, start)text需要查找的字符串，start從哪里開始查找的下標-1說明沒有找到查找text在字符串中的位置
lastIndexOf()字符串.lastIndexOf(text)text需要查找的字符串-1說明沒有找到查找text在字符串最后一次出現的位置
search()字符串.search(text)text需要查找的字符串或者 正則表達式-1說明沒有找到查找text在字符中第一次出現的位置
match（）字符串.search(text)text需要查找的字符串或者 正則表達式null說明沒有找到匹配返回字符串中的所有符合text規則的字符數組
substring()字符串.substring(start, end)start, end 開始位置與結束位置新的字符串將字符串中 [start, end] 提取，生成一個新的字符串
substr()字符串.substr(start, length)start開始位置，length要生成新字符串的長度新的字符串提取字符串
slicce()字符串.slicce(start, end)start, end 開始位置與結束位置，不包括第end位新的字符串提取start到end 的字符串
replace() 過濾替換supStr.replace(oldStr,newStr)oldStr舊字符串，newStr新字符串新的字符串用newStr將supStr中的oldStr替換掉，生成新的字符串
new RegExp('\','g')txtData.replace(newRegExp('\','g'), '/')替換字符串中所有匹配上的字符或則使用replaceAll()但是兼容性不高
split() 字符串分割字符串.split(分隔符，length)分隔符為字符串里面的字符，lenth控制返回數組元素格式，一般不用數組對數組會用分隔符進行分割，將分割后的子串，放到數組中
字符串大小寫轉換toLowerCase(） 轉換成大寫toUpperCase() 轉換成小寫改變原字符串字符大小寫轉換
concat字符串拼接字符串.concat(字符串1，字符串2，...)字符新的字符串拼接字符串
fromCharCode()將ASCII編碼轉換成對應的字符。
8 正則表達式
/*
? ? ? ? ? ? ? ? 敏感詞過濾
? ? ? ? ? ? */vararr=[/靠/ig,/tmd/ig,/nm/ig,/cao/ig];functionbtnClick(){varoTxt=document.getElementById("txt1");varoMsg=document.getElementById("msg");varoValue=oTxt.value;for(i=0;i<arr.length;i++){oValue=oValue.replace(arr[i],"*");}oMsg.innerHTML=oValue;oTxt.value='';}
9 對象方法
delete 關鍵字 刪除對象屬性或者方法
varobj={name:'zhangsan',age:23}deleteobj.ageconsole.log(sunStr);// {name:'zhangsan'}
Math 數學運算函數
方法說明
Math.random()返回0 ~ 1之間的隨機小數（可能是 0，不可能是 1）
Math.max(num1, num2)返回較大的數
Math.min(num1, num2)返回較小的數
Math.abs(num)絕對值
Math.ceil(19.3)向上取整（20）
Math.floor(11.8)向下取整（11）
Math.pow(x, y)x的y次方
Math.sqrt(num)開平方
日期對象
// 獲取當前時間vartimeDate=newDate()conlose.log(tiemDate)// 傳入時間初始化vartimeDate=newDate("2000-01-01")vartimeDate=newDate("2000/01/01")// 傳入參數順序 年 月 日 時 分 秒 毫秒 vartimeDate=newDate(2000,0,1,8,30,50)// 可以直接傳入某一時間距離1970年1月1日至今的毫秒數vartimeDate=newDate()conlose.log(tiemDate)
方法說明
set/getDate()從Date對象中返回一個月中的某一天
getDay()從Date對象返回一周中的某一天（0 ~ 6）
set/getMonth()從Date對象中返回月份（0 ~ 11）
set/ getFullYear()從Date對象中返回年份
set/getHours()返回Date對象中的小時（0 ~ 23）
set/getMinutes()返回Date對象中的分鐘（0 ~ 59）
set/getSeconds()返回Date對象中的秒數（0 ~ 59）
set/getMilliseconds()返回Date對象的毫秒
set/getTime()返回1970年1月1日至今的毫秒數
getTimezoneOffset()返回本地時間與格林標準時間的分鐘差
對象遍歷方法
對象遍歷? 只能通過for ..in 方法
varperson={username:"zhangsan",age:18,sex:"男"}for(variinperson){document.write("對象遍歷："+i+","+person[i])}
10 setInterval定時器
格式：
vartimer=setInterval(函數，毫秒數)clearInterval(timer)// 取消定時器
功能：每隔對應毫秒數，執行一次傳入的函數
11 Bom對象
系統對話框
方法參數返回值說明
alert()無無彈出警告窗
confirm()無確認返回true，取消 false帶取消和確定的提示框
prompt()1.面板顯示內容 2.輸入框里面默認參數（可以不傳）確認返回輸入框內容，取消返回null帶輸入框的提示框
varres=prompt("請輸入內容",100);conlose.log(res)
open() 打開新窗口
參數1參數2參數3
跳轉的url? 打開一個新窗口，加載url字符串，給打開的窗口起一個名字一串特殊含義的字符串
functionbtnClick(){open("http://www.baidu.com","xxx")}
History 歷史記錄
window.history 掌管的是，當前窗口（注意不是瀏覽器）歷史記錄（只要加載的url不一樣就會產生歷史記錄）
history .length? 輸出當前窗口歷史記錄條數
history .back? 返回上一條歷史記錄
history .forward() 前進到下一條歷史記錄
history .go()? 參數? 0 刷新當前頁面? ? 正整數? 前進n條記錄? 負整數? 后退n條記錄
location頁面跳轉
方法說明
location.assign(url)在當前窗口跳轉到url
location.replace(url)在當前窗口替換成新的url，不會產生歷史記錄
location.reload(url)刷新當前窗口
location.reload(true)不經過瀏覽器緩存強制從服務器加載
12 Dom操作
節點獲取
方法返回值功能
document.getElementById(id)符合條件的一個節點通過id獲取節點
node.getElementsByTagName(標簽名)偽數組/l類數組從node節點，通過元素標簽名獲取元素節點
node.getElementsByClassName(class名)偽數組/l類數組通過class獲取符合條件的元素節點
document.getElementsByName(name屬性的值)節點通過name屬性的值獲取符合條件的元素節點
document.querSelector(css選擇器)一個元素節點，找到符合條件的第一個元素節點傳入的參數為css選擇器
document.querySelectorAll(css選擇器)一個偽數組
node.parentNodenode的父節點獲取node節點的父節點
節點元素樣式獲取
方法說明
node.currentStyle['height']? IE方法或者 getComputedStyle(node).['height']? 谷歌方法node表示元素節點，[] 里面是獲取的樣式屬性
node.getAttribute("class")獲取node節點的class屬性的值
node.setAttribute("class" , “box”)給node節點添加值為box的class屬性
node.removeAttribute("title")刪除node節點的tille屬性
node.innerHTML = "..."插入的html標簽會被解析
node.innerText= "..."插入純文本，里面寫入html便簽也不會解析
node.outerHTML= "..."從外標簽開始到外便簽結束? 會解析標簽
訪問子節點方法
方法說明
childNodes()訪問當前節點下所有的子節點
firstChild()訪問子節點中的首位
lastChild()訪問子節點中的最后一位
nextSibling()訪問當前節點兄弟節點中的下一個節點
previousSibling()訪問當前節點兄弟節點的上一個節點
節點操作
方法返回值說明
document.createElement()新創建的標簽創建一個新節點
node1.appendChild(node2)將node2 節點 插入到node1 節點的末尾
document.createTextNode(文本)新創建的文本標簽穿件文本節點（純文本）
box1.parentNode.insertBefore(box2, box1)將box2節點添加到box1的前面
box1.parentNode.replaceChild(box2, box1)
node.cloneNode()克隆出來的新節點克隆node節點本身和子節點
box.parentNode.removeChild(box)將box節點從頁面上刪除
ps：parentNode 表示的是此節點的上級父節點
元素寬高、邊距獲取
offsetWidth? ? 元素寬度獲取
offsetHeight? ? 元素高度獲取
offsetLeft? ? ? 元素距離左側距離獲取
offsetTop? ? 元素距離上面距離獲取
varoDiv=document.getElemenByid("div1")alert(oDiv.offsetWidth)// width + border + padding (眼睛實際看到的寬度)
瀏覽器寬高獲取
獲取瀏覽器高度寫法
varwindowHeight=document.documentElement.clientHeight||document.body.clientHeight
獲取瀏覽器寬度寫法
varwindowWidth=document.documentElement.clientWidth||document.body.clientWidth
13 事件與事件類型
鼠標事件
事件名稱說明
click單機
dblclick雙擊
mouseover鼠標移入（會重復觸發）
mouseout鼠標移出（會重復觸發）
mousemove鼠標移動（會不停觸發）
mousedown鼠標按下
mouseup鼠標抬起
mouseenter鼠標移入（不會重復觸發）
mouseleave鼠標移出（不會重復觸發）
鍵盤事件
事件名稱說明
keydown鍵盤按下 （如果按下不放手會一直觸發）
keyup鍵盤抬起
keypress鍵盤按下（只支持字符鍵）
window 事件
事件名稱說明
load當頁面加載完成以后觸發
unload當頁面解構的時候觸發（刷新頁面，關閉當前頁面） IE瀏覽器兼容
scroll頁面滾動事件
resize窗口大小發生變化時觸發
表單事件
事件名稱說明
blur失去焦點
focus獲取焦點
select當我們在輸入框內選中文本時候觸發
change當我們對輸入框的文本進行修改并且失去焦點的時候
submit當我們點擊submit上的按鈕才能觸發
reset當我們點擊reset上的按鈕才能觸發
14 事件對象獲取
oBtn.onclick=function(ev){// 事件對象獲取方式? 固定寫法vare=ev||window.eventalert(e)}
獲取當前鼠標的位置
x坐標y坐標說明
clientXclientY原點位置：可視窗口的左上角
pageXpageY原點位置：整個頁面的左上角（包含滾動出去的滾動距離）
screenXscreenY原點位置：電腦屏幕的左上角
document.onmousedown=function(ev){vare=ev||window.event;alert(e.clientX+","+e.clientY)alert(e.screenX+","+e.screenY)}
事件對象屬性
shiftKey? ? 按下shift鍵，為true，默認為false
altKey
ctrlkey
metaKey
window系統? 按下window鍵為true
macos系統? ? 按下command鍵為true
注：和其他的操作進行組合，形成一些快捷鍵的操作
document.onmousedown=function(ev){vare=ev||window.event;vararr=[]if(e.shiftKey){arr.push("shift")}if(e.altKey){arr.push("altKey")}if(e.ctrlKey){arr.push("ctrlKey")}}
鍵盤事件對象屬性
keyCode? 鍵碼
which
返回值：鍵碼返回的是大寫字母的ASCII碼值，不區分大小寫
格式：var which = e.which || keyCode
注：只在keydown下支持
charCode? 字符碼
which
返回值：字符碼區分大小寫，當前按下鍵對應的ASCII碼值
格式 ： var which = e.which || charCode
注：只在keypress下支持
window.keypress=function(ev){vare=ev||window.eventvarwhich=e.which||e.charCodealert(which)// 可以通過判斷 獲取的到which 來 確認執行定義的函數}
Target目標觸發
Target的指向就是觸發當前事件的元素，this永遠指向當前函數的主人。
varoUl=document.getElementById("ul1")oUl.onclick=function(ev){vare=ev||window.eventvartarget=e.target||window.event.srcElementalert(this.tagName)alert(target.innerHTML)}
阻止事件冒泡
有瀏覽器兼容問題
cancelBubble = true
stopPropagation()
varaDivs=document.getElementsByTagName("div")for(vari=0;i<aDivs.length;i++){aDivs[i].onclick=function(ev){vare=ev||window.eventalert(this.id)cancelBubble=true// 阻止冒泡stopPropagation()// 阻止冒泡}}
事件委托
實現步驟：
找到當前節點的父節點或則祖先節點
將事件添加到找到的這個父節點或則祖先節點上
找到觸發對象，判斷觸發對象是否是想要的觸發對象，進行后續操作
如下：li 委托 ul 將點擊的li變成紅色
varoUl=document.getElmentById("ul1")oUl.onclick=function(ev){vare=ev||window.eventvartarget=e.target||window.event.srcElementif(target=e.nodeName.toLowerCase()=="li"){target.style.backgroundColor='red'}}<ul id="ul1"><li></li><li></li><li></li></ul>
事件監聽器
removeEventListener（） 刪除事件中的函數
格式：node.removeEventListener（）
參數：
第一個參數：事件類型
第二個參數：刪除函數的名稱
addEventListener()? ? 給元素的事件添加函數
格式： node.addEventListener("click")
參數：
第一個參數：事件類型
第二個參數：綁定函數
第三個參數：布爾值
true? 事件捕獲
false? 事件冒泡? 默認
15 localStorage 本地存儲
只能存儲String
localStorage 對象
localStorage .setItem(name,value);? ? 寫入
localStorage .getItem(name);? 讀取
localStorage .removeItem(name);? ? 刪除
16? 強制改變this指向
call() 方法
格式：函數名.call()
參數：
第一個參數：傳入該函數this指向的對象，傳入什么強制指向什么
第二個參數：將原函數的參數往后順延一位
apply() 方法
格式：函數名.apply()
參數：
第一個參數：傳入該函數this指向的對象，傳入什么強制
第二個參數：數組? 數組放我們原有所有參數
bind() 方法
預設this指向
functionshow(x,y){alert(this)alert(x+","+y)}// call方法show.call("call",20,40)// apply 方法show.apply("apply",[20,40])// bind 方法show.bind("bind")(40,50)
17 ECMA6數組方法
Array.from()// 將偽數組轉換成真數組
方法返回值說明
find((item，index，arr) => {函數})找到的元素在數組中查找符合條件的元素，只要找到一個符合的元素，就終止遍歷
findIndex((item) => {函數})找到符合元素的下標
數組.copywithin(開始下標，start，end)[start,end] 范圍數組內容覆蓋
18 ECMA6對象合并
Object.assign 合并對象
將所有傳入的對象，都合并到第一個對象中
varobj1={a:10}varobj2={b:20,c:30}varobj3={d:40,f:["hello","world",true]}Object.assign(obj1,obj2,obj3)
19 Map映射
會將重復的合并
// map 映射letmap=newMap()// 添加數據map.set("張三"，"打魚的")map.set("李四"，"種地的")map.set("王五"，"挖煤的")map.set("李四"，"打獵的")// 取值alert(map.get("王五"))
20 ajax網絡請求
oBtn.onclick=function(){//1、創建ajax對象varxhr=null;try{xhr=newXMLHttpRequest();}catch(error){xhr=newActiveXObject("Microsoft.XMLHTTP");}//2、調用open/*
? ? ? ? ? ? ? ? ? ? 第一個參數：請求方式 get post
? ? ? ? ? ? ? ? ? ? 第二個參數：url
? ? ? ? ? ? ? ? ? ? 第三個參數：是否異步
? ? ? ? ? ? ? ? ? ? ? ? true 異步? ? false 同步
? ? ? ? ? ? ? ? */// get 請求直接在open方法總將數據在url中通過 ？ 拼接提交xhr.open("get","1.get.php?username=yyy&age=21&password=dasdsd",true);/*
? ? ? ? ? ? ? ? ? ? post? ? 提交數據，需要通過send方法進行提交
? ? ? ? ? ? ? ? *///3、調用sendxhr.send();//4、等待數據響應xhr.onreadystatechange=function(){if(xhr.readyState==4){//判斷本次下載的狀態碼是多少if(xhr.status==200){alert(xhr.responseText);}else{alert("Error:"+xhr.status);}}}}
21 cookie本地存儲
可以設置過期時間
最大存儲4kb，每個域名下最多可以儲存50條數據
只能存字符串
cookie語法：
格式：name=value;[expires=data];[path=path];[domain=somewhere.com];[secure]
name? 鍵
value? 值? 都是自定義
注： 中括號參數屬于可選參數，可以不添加
document.cookie='username=xxx'// 設置cookiealert(document.cookie)// 獲取cookie
cookie編碼中文
encodeURIComponent? ? 將中文編譯成對應的字符
decodeURIComponent? ? 將對應的字符編譯成中文
document.cookie='username=xxx'+encodeURIComponent("鋼鐵俠")// 設置cookiealert(decodeURIComponent(document.cookie))// 獲取cookie
expires: cookie過期時間
必須填寫，日期對象
系統會自動清除過期cookie
document.cookie=`username=xxx;expires=${時間對象}`
path：cookie限制訪問路徑
訪問限制，如果不去設置，默認加載當前，html文件的路徑
我們設置cookie路徑，和當前文件的路徑，必須保持一致，如果不一致，cookie訪問失敗
document.cookie="username=xxx;path="+"/code14/cookie/demo"
domain：cookie限制訪問域名
如果不去設置，默認加載的是當前.html文件的服務器域名
如果加載當前文件域名和設置? 的域名不一樣，設置cookie失敗
document.cookie="username=xxx;domain="+"localhosx"
Cookie的secure設置參數
如果不設置，設置cookie，可以通過http協議加載文件設置，也可以通過https協議加載cookie文件
設置這個字段之后，只能設置https協議加載cookie
22 構造函數封裝
function Person(name,sex){// 這里this指向整個構造函數對象this.name = name? ? this.sex = sex? ? this.showName = function (){console.log('我的名字叫' + this.name);}this.showSex = function (){console.log('我的性別是' + this.sex);}}var p1= new Person('張三','男')p1.showName()p1.showSex()var p2= new Person('李四','男')p2.showName()p2.showSex()
23 Prototype 原型對象
概念：每一個函數上，都有一個原型對象Prototype
用在構造函數上，我們可以給構造函數的原型Prototype，添加方法
1、如果將方法添加到構造構造函數的Prototype原型對象上，構造函數構造出來的對象共享原型上的所有方法
vararr1=[10,23,244,34]vararr2=[23,435,45,546,546]Array.prototype.sum=function(){varres=0;for(vari=0;i<this.length;i++){res+=this[i]}returnres}console.log(arr1.sum());console.log(arr2.sum());console.log(arr1.sum==arr2.sum);// true
24 原型鏈繼承
// Teddy.Prototype = Dog.Prototype()? 非常錯誤的寫法for(varfuncNameinDog.Prototype){Teddy.Prototype[funcName]=Dog.Prototype[funcName]}
25? __ proto __與instanceof 關鍵字
構造函數構造出來的對象，有一個屬性__ proto ，指向構造出這個對象的構造函數的原型 ，每個對象的proto__屬性指向自身構造函數的prototype；
instanceof 關鍵字
功能：判斷某一個對象是否是這個構造函數構造出來
functionDog(obj){this.obj=obj}varxiaobai=newDog({name:'小白',type:'比熊',age:23})console.log(xiaobaiinstanceofDog);// trueconsole.log(xiaobaiinstanceofObject);// true
26 Promise構造函數（解決回調地獄）
//在EcmaScript 6 中新增了一個API Promise//Promise是一個構造函數varfs=require("fs")//創建Promise容器//1.給別人一個承諾 //? Promise容易一旦創建，就開始開始執行里面的代碼varp1=newPromise(function(resolve,reject){fs.readFile('./date/a.txt','utf8',function(err,data){if(err){//失敗了,承諾容器中的任務失敗了//把容器中的Pending狀態改為成功Rejected//調用reject就相當于調用了then方法的第二個參數函數reject(err);}else{//承諾任務中的任務成功了//把容器的Pending狀態改為成功Resolved//也就是說這里調用 的resolve方法實際上就是then方法傳遞的哪個funcionresolve(data);}})})varp2=newPromise(function(resolve,reject){fs.readFile('./date/b.txt','utf8',function(err,data){if(err){reject(err);}else{resolve(data);}})})varp3=newPromise(function(resolve,reject){fs.readFile('./date/c.txt','utf8',function(err,data){if(err){reject(err);}else{resolve(data);}})})//p1就是那個承諾//當p1成功了然后（then）做指定的操作//then方法接收的function就是容器中的resolve函數p1.then(function(data){console.log(data);//當p1讀取成功的時候//當前函數中的return的結果就可以再后面的then中function接收到//當return 1 2 3 后面就接收到123//我們可以return一個Promise對象returnp2;},function(err){console.log('讀取文件失敗',err);}).then(function(data){console.log(data);returnp3;},function(err){console.log(err);}).then(function(data){console.log(data);},function(err){console.log(err);})
1 過濾
三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法，比如filter()和not()允許您選取匹配或不匹配某項指定標準的元素。這個過濾指的就是相當于css中的選擇器，如：id選擇器，類選擇器，標簽選擇器，子代選擇器等
/*
? ? filer 過濾? 對已經獲取到的網頁元素進行過濾
? ? not? filer的反義詞
? ? has? 擁有，直接判定子節點中是否有符合條件的元素
*/$(function(){$("div").filer(".box").css("backgroundColor","orange")$("div").not(".box").css("backgroundColor","orange")$("div").has(".box").css("backgroundColor","orange")})
2 查找
方法說明
prev()查找當前兄弟節點中的上一個節點
next()查找當前兄弟節點中的下一個節點
eq()通過已經獲取到元素的偽數組下標獲取指定元素的節點
$(function(){$("h3").prev().css("backgroundColor","red")$("h3").next().css("backgroundColor","bule")$("li").eq(3).css("backgroundColor","orange")// 獲取所有li標簽中下標為3的元素$("li:eq(4)").css("backgroundColor","orange")// 獲取所有li標簽中下標為4的元素})
3 設置和修改行間屬性 attr
$(function(){// 獲取屬性值alert($("#div1").attr("id"))alert($("#div1").attr("class"))// 設置屬性值$("#div1").attr("title","world")$("#div1").attr("calss","box2")// 一次性修改多條屬性$("#div1").attr({title:"world",class:"xxx",yyy:"zzz"})})
4 class 屬性添加與刪除
Class可以寫多個css樣式，addClass()可以添加class
removeClass()可以刪除class
$(function(){// 添加css 樣式$("#div1").addClass("box3 box4 box2")// 刪除css 樣式$("#div1").removeClass("box3 box2")})
5 元素寬高獲取
方法說明
width() 與 height()width
innerWidth() 與 innerHeight()width + padding
outerWidth() 與 outerHeight()width + border + padding
$(function(){alert($("#div1").width())// widthalert($("#div1").innerWidth())// width + paddingalert($("#div1").outerWidth())// width + border + paddingalert($("#div1").outerWidth(true))// width + border + padding + margin})
6 節點操作
下面每種標簽的方法右邊寫著另外一種方法 作用是寫入的選擇器標簽相反而已，一般用于方便其他樣式的操作，方便jquery的鏈式操作
insertBefore()? before()
insertAfter()? ? after()
appendTo()? 插入到子節點的末尾? ? appendChild（類似于js的方法）
append（）插入到某節點
prependTo()? 插入到子節點的首位? ? prepend()
remove（）刪除元素節點
并不會保留這個元素節點上之前的事件和行為
detach()? 刪除元素節點
會保留這個元素節點上之前的事件和行為
$(function(){// 找到span節點插入到div的前面$("span").insertBefore($("div"))// 找到div節點，插入到span節點的后面$("div").insertAfter($("span"))// 找到span節點，插入到div節點的子節點的末尾$("span").appendTo($("div"))})
7 事件綁定
on() 方法
給一個事件添加函數
$("div4").on("click",function(){alert("hello")})
同時給多個事件添加一個函數， 多個事件之間可以通過空格隔開
vari=0$("div4").on("click mouseover",function(){$(this).html(i++)})
給不同的事件添加不同的函數
$("div4").on({click:function(){alert("點擊")},mouseover:function(){$(this).css("backgroundColor","orange")},mouseout:function(){$(this).css("backgroundColor","blue")}})
事件委托
// 第二個參數，是觸發對象的選擇器$("ul").on("click","li",function(){$(this).css("backgroundColor","red")})
取消事件綁定 off 方法
$("#cancel").click(function(){$("#div1").off()// 取消所有事件上面的所有函數$("#div1").off("click")// 取消某一個事件下的所有函數$("#div1").off("click",show)// 取消某一個事件下指定的函數})
8 窗口滾動高度獲取 scrollTop
$(function(){$(document).click(function(){alert($(window).scrollTop())// 輸出滾動高度})})
9 事件阻止(事件冒泡、默認行為阻止)
ev? pageX? which
preventDefault? ? ? stopPropagation
$(function(){$("div").click(function(ev){alert(this.id)ev.stopPropagation()})$("a").click(function(ev){// ev.preventDefault()// ev.stopPropagation()// 既阻止事件冒泡，又阻止默認行為 returnfalse})})
10 鍵盤事件
鼠標事件 與 鍵盤事件? keydown事件下用which可以輸出鍵盤按下的鍵碼支持所有按鍵包括功能鍵。 keypress事件下 用which可以輸出鍵盤按下的字符碼? 只支持字符鍵功能鍵不能輸出
ev? pageX
which
鼠標事件： button
左鍵
滾輪
右鍵
keydown： keyCode 鍵碼
keypress： charCode? 字符碼
$(window).keypress(function(){alert(ev.which)// 獲取到字符碼})
11 獲取鼠標的位置值? pageX 與 pageY
$(window).keypress(function(){alert(ev.pageX+","+ev.pageY)// 帶滾動距離alert(ev.clientX+","+ev.clientY)// 可視窗口alert(ev.which)})
12? 元素top與left值獲取
方法說明
offset()直接獲取當前元素，距離最左邊的距離，margin不算數
position()直接獲取，當前元素，距離第一個有定位父節點的距離，margin算在內
offsetParent()查找第一個有定位的父節點，如果父節點沒有定位就繼續往上找，最終到html節點
$(function(){alert($("#div2").offset().left)alert($("#div2").position().left)$("#div2").offsetParent().css("backgroundColor","yellow")})
13 元素內容獲取
val()? 獲取/ 設置表單元素的值
size()? 輸出，獲取網頁元素的個數，類似于js中的 length
each()? 用來循環將元素節點內容賦值成下標值
html()? 獲取元素的里面的內容
text()? 獲取元素的純文本內容
attr()? 獲取標簽行內屬性值
css()? 獲取元素的style里面的屬性
$("input").each(function(index,item){$(item).val(index)})
14 jquery特效函數
hide（）隱藏show（）顯示? 淡入淡出? 這些效果都在hover移入移出方法下使用
hide(動畫持續的毫秒數，回調函數，動畫結束的時候執行)
$(function(){$("#div1").hover(function(){$("#div2").hide(2000,function(){$("#div1").html("移入")})},function(){$("#div2").show(2000,function(){$("#div1").html("移出")})})})
slideDown()
slideUp()? ? 動畫效果是卷簾效果
fadeIn()? 淡入
fadeOut()? 淡出
fadeTo (動畫持續時間， 透明度0 ~ 1，回調函數)
15 jquery的 animate 動畫
默認的運動形式是? 滿快慢
勻速? linear
滿快慢? swing
擴展更多animate 的運動形式：
引入jquery-ui
$(function(){$("#div1").hover(function(){$("#div2").animate({width:300,height:300,opacity:0.5},4000,function(){$("#div1").html("移入")})},function(){$("#div2").animate({width:200,height:200,opacity:1},4000,function(){$("#div1").html("移出")})})})
Jquery引入后jquery可以設置顏色class顏色樣式刪除與添加時候的動畫效果，有了jqueryUi以后，addClass 和 removeClass 就變成了增強版方法
$("button").eq(0).click(function(){$("#div1").addClass("box",4000)})$("button").eq(0).click(function(){$("#div1").removeClass("box",4000)})
Jquery停止動畫函數 stop（） finish（）
$("#div1").click(function(){$("#div1").animate({width:300},2000).animate({height:3000},2000)})$("#div1").click(function(){$("#div1").stop()// 停止第一個動畫，當時后續動畫正常啟動$("#div1").stop(true)// 停止所有動畫$("#div1").stop(true,true)// 停止所用動畫，并且將當前正在進行的動畫，直接到達目的值$("#div1").finish()// 停止所有動畫，并且將所有的動畫都達到目的值})
delay()延遲下一個動畫執行的時間
（） 里面傳在需要延時多少時間后執行
$("#div1").click(function(){$("div1").animate({width；300}，2000).delay(4000).animate({height:300},2000)})
16 元素節點獲取
siblings()? 用來除當前節點外，所有的兄弟節點
nextAll()? prevAll()
parentsUntil()? nextUntil( )? prevUntil()
$(function(){$("#p1").siblings().css("color","red")$("#p1").nextAll().css("color","red")$("#p1").prevAll().css("color","red")})
父節點的獲取
方法說明
parent()獲取父節點
parents()獲取父節點? 參數選擇器
closest()必須傳入參數，參數也是選擇器，只獲得一個符合條件的元素，從自己開始去查找
$(function(){$("#p1").parent().css("color","red")$("#p1").parents(".box").css("color","red")$("#p1").closest("#div1").css("color","red")})
克隆節點
方法說明
clone()默認只會克隆節點本身，并不會克隆我們元素節點的行為和事件
clone(true)既會克隆節點本身，還會克隆節點元素節點的行為和事件
$("button").click(function(){varnode=$("div1").clone(true)node.appendTo("#div2")})
多個選擇器拼接
add()? ? ? 可以將多個選擇器拼接在一起
slice()? slice(start, end)? ? [start, end] 獲取指定范圍內獲取的元素節點
$("div").add("span").add("ul li")$("ul li").sclice(1,4).css("color","red")
表單數據串聯化
方法說明
serialize()將我們表單中的數據拼接成querystring（查詢字符串）name1=value1&name2=value2
search()？name1=value1&name2=value2
querystring()name1=value1&name2=value2
serializeArray()將表單數據拼接成數組
$(function(){console.log($("input").serialize())})
主動觸發事件
方法說明
trigger()主動觸發
ev.data
ev.target(兼容后觸發對象)
ev.type(輸出事件類型)
$("#play").on("play",function(){alert("開始播放音樂")})$("#play").on("next",function(){alert("切換到下一首歌曲")})$("#button").eq(0).click(function(){$("#play").trigger("play")})$("#button").eq(1).click(function(){$("#play").trigger("next")})
17? 對元素節點包裝
方法說明
wrap()每個獲取到的元素節點單獨包裝
wrapAll()整體包裝
wrapInner()內部包裝
unwrap()刪除包裝? 刪除上面一層包裝，不包括body節點
$(function(){// 給頁面上所有的span 節點加包裝，直接Jq創建節點的代碼$("span").wrap("<p class="box" title="hello"></p>")$("span").wrapAll("<p class="box" title="hello"></p>")$("span").wrapInner("<p class="box" title="hello"></p>")$("span").unwrap()// 沒有參數})
18 cookie
$.cookie(name)? 通過name取值
$.cookie(name， value)? ? 設置name和value
$.cookie(name， value? ，{
可選項? ? ? ? ? raw：truevalue不進行編碼? ? ? ? ? ? ? ? ? ? ? 默認falsevalue要進行編碼的
})
$.cookie(name, null)? 刪除cookie
$.cookie("變種人","X教授",{expires:7,raw:true})
19 ajax 網絡請求
$.ajax({type:"get",url:"https://api.asilu.com/weather/",data:{city:"深圳"},dataType:"jsonp",// 如果請求地址跨域，可以使用dataType來指定跨域的解決方式，這里使用了jsonpsuccess:function(data,statusText,xhr){// data 下載到的數據// statusText? 下載的狀態? success// xhr? ajax對象consloe.log(data+","+statusText)},erorr:function(msg){consloe.log(msg)}})
load方法
將url傳入以后，將下載到的數據直接填充到被選中元素的innerHTML中
$(function(){$("button").click(function(){$("div").load("2.txt")})})
get與post方法直接調用
$("button").eq(2).click(function(){$.post(1.post.php,{username:"tian",age:20,password:"123asd"},function(data,statusText,xhr){alert(data)})})
三、websocket通信協議
1 創建websocket對象
// H5 已經直接提供了websocket 的API，所以可以直接調用// 1.創建 WebSocket // 參數1： WebSocket 的服務地址varsocket=newWebSocket('ws://echo.websocket.org')
2 websocket事件
事件事件處理程序描述
openSocket.onopen連接建立時觸發
messageSocket.onmessage客戶端接收服務器端數據時觸發
errorSocket.onerror通訊發生錯誤時觸發
closeSocket.onclose連接關閉時觸發
3 websocket方法
方法描述
Socket.send()使用連接發送數據
Socket.close()關閉連接
4 調用websocket對象事件與方法
// 2.open: 當和 WebSocket 服務連接成功時候觸發socket.addEventListener('open',function(){div.innerHTML='連接服務成功'})// 3.主動的給websocket服務發送消息button.addEventListener('click',function(){varvalue=input.value? ? ? ? ? ? ? ? socket.send(value)})// 4.接收websocket服務的數據 socket.addEventListener('message',function(e){console.log(e.data);div.innerHTML=div.innerHTML+','+e.data})// 5.當websocket服務斷開是事件socket.addEventListener('close',function(){div.innerHTML='服務斷開連接'})
5 使用nodejs開發websocket服務
使用nodejs開發websocket需要依賴一個第三方包。Nodejs? Websocket
// 1.導入nodejs-websocket包constws=require("nodejs-websocket")constPORT=3000// 2.創建一個sever// 2.1 如何處理用戶請求// 每次只要有用戶連接，函數就會被執行，會給當前連接用戶創建一個 connect 對象constserver=ws.createServer(connect=>{console.log('有用戶連接');// 每當接收到用戶傳遞過來的數據，這個text事件會被觸發connect.on('text',(data)=>{console.log('接收到了用戶對的數據',data);// 給用戶一個響應的數據// 對用戶放過來的數據，把小寫轉換成大寫，并且拼接一點內容connect.send(data.toUpperCase()+'!!!')})// 只要websocket鏈接斷開，close 事件就會觸發connect.on('close',()=>{console.log('連接斷開');})// 注冊一個error，處理用戶的錯誤信息connect.on('error',()=>{console.log('用戶連接異常');})})server.listen(PORT,()=>{console.log('websocket服務啟動成功，監聽端口為：'+PORT);})
6 簡單聊天室代碼
// 1.導入nodejs-websocket包constws=require("nodejs-websocket")constPORT=3000constTYPE_ENTER=0constTYPE_LEAVE=1constTYPE_MSG=2/*
? ? 分析：
? ? ? ? 消息不應該是簡單的字符串
? ? ? ? 這個消息應該是一個對象
? ? ? ? type：消息的類型， 0：表示用戶進入聊天室消息 1：表示用戶離開聊天室的消息 2：正常的聊天消息
? ? ? ? msg：消息的內容
? ? ? ? time：聊天的具體時間
*/// 記錄當前連接上來的總的用戶數量letcount=0// conn每個連接到服務器的用戶，都會有一個 conn 對象constserver=ws.createServer(conn=>{console.log('新的連接');count++conn.username=`用戶${count}`//1. 告訴所用用戶，有人加入聊天室broadcast({type:TYPE_ENTER,msg:`${conn.username}進入聊天室`,time:newDate().toLocaleTimeString()})// 接收到了瀏覽器的數據conn.on('text',data=>{// 2.當我們收到某個用戶的信息的時候，告訴所有用戶，發送的消息的內容 是什么broadcast({type:TYPE_MSG,msg:`${conn.username}：${data}`,time:newDate().toLocaleTimeString()})})// 關閉連接的時候觸發conn.on('close',data=>{console.log('關閉連接');count--broadcast({type:TYPE_LEAVE,msg:`${conn.username}退出聊天室`,time:newDate().toLocaleTimeString()})// 3.告訴所有的用戶，有人離開了聊天室})// 發生異常，觸發conn.on('error',data=>{console.log('發生異常');})})// 給所有的用戶發送消息functionbroadcast(msg){// server.connections ： 表示所有的用戶 server.connections.forEach(item=>{item.send(JSON.stringify(msg))})}server.listen(PORT,()=>{console.log('websocket服務啟動成功，監聽端口為：'+PORT);})
7 socket.io框架（基于websocket）
框架說明文檔地址：https://socket.io/
node后端：
// 創建http服務器 consthttp=require('http')varfs=require('fs')constapp=http.createServer()app.on('request',(req,res)=>{fs.readFile('./index.html',function(err,data){if(err){res.writeHead(500)returnres.end('Error loading')}res.writeHead(200)res.end(data)})})app.listen(3000,()=>{console.log('listening on *:3000');});constio=require('socket.io')(app);// 監聽了用戶連接 的事件// socket 表示用戶連接? // socket.emit? 表示觸發某個事件? 如果需要給瀏覽器發送數據，需要觸發瀏覽器注冊的某個事件// socket.on 表示注冊某個事件? 如果需要獲取瀏覽器的數據，需要注冊一個事件，等待瀏覽器觸發io.on('connection',socket=>{console.log('新用戶連接了');// sockrt.emit 方法表示給瀏覽器發送數據// 參數1：事件的名字// socket.emit('send', {name: 'zs'})// 參數1：事件名: 任意// 參數2： 獲取到的數據socket.on('hehe',data=>{console.log(data);socket.emit('send',data)})})
HTML前端：
<!DOCTYPEhtml><html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1"><link href="css/style.css"rel="stylesheet"></head><body>hahha<script src="/socket.io/socket.io.js"></script><script>// 連接socket服務// 參數：服務器地址varsocket=io('http://localhost:3000')// 接收服務器返回的數據// socket.on('send', data => {//? ? console.log(data);// })socket.emit('hehe',{name:'zs',age:'23'})socket.on('send',function(data){console.log(data);})</script></body></html>
基于express框架的socket.io：
constapp=require('express')();consthttp=require('http').Server(app);constio=require('socket.io')(http);app.get('/',(req,res)=>{res.sendFile(__dirname+'/index.html');});io.on('connection',(socket)=>{socket.on('hehe',function(data){console.log(data);})});// 啟動服務器? ? http.listen(3000,()=>{console.log('listening on *:3000');});
disconnect：后端監聽用戶斷開事件
四、常用函數
filter過濾
過濾數組中的數據并返回過濾后的數據
cart=cart.filter(v=>v.checked);
forEach? 遍歷
遍歷數組中的對象
lettotalPrice=0;lettotalNum=0;cart.forEach(v=>{totalPrice+=v.num*v.goods_price;totalNum+=v.num;})
map? 映射
給數組中添加新的屬性與屬性值
constres=awaitrequest({url:"/my/orders/all",data:type});this.setData({orders:res.orders.map(v=>({...v,create_time_cn:(newDate(v.create_time*1000).toLocaleDateString())}))
Some（）條件遍歷
遍歷數組中的屬性值進行條件判斷，只要遇到一個判斷為true就終止函數遍歷，返回true。
// 1 獲取緩存中的商品收藏數組letcollect=wx.getStorageSync("collect")||[];// 2 判斷當前商品是否被收藏letisCollect=collect.some(v=>v.goods_id===this.GoodsInfo.goods_id);
findindex（）索引遍歷
獲取數組中可以匹配項的索引，如果在數組中沒有找到，返回值為-1
letindex=collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
splice() 數組修改刪除
表示刪除數組中的數據 index為需要開始刪除的索引，1 表示刪除一條
collect.splice(index,1);
split()? 字符分割
根據傳入函數中的字符將字符串分割并返回成數組
varstr='asdfgdh'letindex=str.split('d')console.log(index);//? ["as", "fg", "h"]
trim（）去字符兩邊空格
去掉字符串兩邊的空格? ps: trimStart() 去除頭部空白 trimEnd() 去除尾部空白
value.trim()
replace() 修改字符
匹配字符串中的對應字符并修改 （goods需要匹配字符，goodsList為需要修改為的數據）
url=url.replace("/goods/","goodsList")
reduce() 求和函數
functionsum(...args){returnargs.reduce((p,c)=>p+c,0);}sum(1,2,3,4)
indexOf() 匹配字符下標
匹配字符返回遍歷到的字符下標
varstr='asdfgh'letindex=str.indexOf('f')console.log(index);// 3
字符查找
includes():查找對象屬性字符串中是否有相應的“字符” 返回true或者false
startsWith()字符串中以傳入函數中的字符開頭返回true
endsWith()字符串中以傳入函數中的字符結尾返回true
if(params.url.includes("/my/")){// 拼接header 帶上tokenheader["Authorization"]=wx.getStorageSync("token");}
reverse() 反轉數組
varatr=[1,2,3,4]atr.reverse()console.log(atr);//? [4, 3, 2, 1]
find()? 查找函數
查找對數組中的值一次去匹配條件，如果符合返回符合的字符
vararr=['zhangsan','lisi','wangwu']varres=arr.find((item)=>{returnitem=='zhangsan'})console.log(res);//? zhangsan
flat() 數組扁平化
constarr=[1,[2,[3,[4,5]]],6]constres=arr.flat(Infinity);console.log(res);// [1,2,3,4,5,6]
結構賦值技巧
用數組的值作為要生成對象的屬性名（也可以是對象賦值時都需要寫在 [ ] 里面）
vararr=['ews','sds']functionadd(i){if(!i){return{[arr[0]]:'test'}}else{return{[arr[1]]:'test'}}}console.log(add(1));// {sds: "test"}
五、typescript篇
1. ts類型
類型例子描述
number1, -33, 2.4數字
string‘hello’字符串
booleantrue， false布爾值 true 或 false
字面量其本身 let a: 10;限制變量的值就是該字面的值
any*任意類型
unknown*類型安全的any
void空值（undefined）沒有值（或undefined）
never沒有值不能是任何值
object{name：'cola'}任意js對象
array[1,2,3]數組
tuple[4,5]元素，Ts新增類型，固定長度數組
enumenum{A, B}枚舉，Ts中新增類型
2 變量賦值
leta:number;letb:number=123;letc=123// 聯合變量賦值letc:boolean|string// 類型是布爾值或字符串c=truec='heloo'// & 表示同時，即是字符串又是數字letj:{name:string}&{age:number}j={name:'孫悟空'， age:21}// 聲明變量如果不指定類型，則Ts解析器會自動判斷變量的類型尾any，（隱式的any）letd;d=10;d='hello'd=true// 類型斷言,告訴解析器變量的實際類型s=easstring;s=<string>e;// viod 用來表示空，以函數為例，就表示沒有返回值functionfn():void{}// never 表示永遠不會返回結果 （可以用來處理程序報錯）functionfn():never{thrownewError('報錯了')}// 創建對象leta:object;// 不建議a={}// 不建議letb:{name:string,age?:number}// 對象中的屬性指定類型,屬性名后面加問號表示此參數為可選屬性b={name:'孫悟空'， age：12}letc:{name:string,[propName:string]:any}//? [propName: string] 表示任意字符串，它可以是任意類型c={name:'豬八戒',age:12,gender:'男'}letd:(a:number,b:number)=>number;// 設置函數結構的類型聲明,傳入值為數字，返回值為數字,d=function(n1:number,n2:number):number{returnn1+n2;}// 數組lete:string[]// 表示字符串數組e=['a','b','c']letg:Array<number>// 與上面聲明方式一樣，這是數字類型數組// tuple元組? ? 固定長度的數組leth:[string,string]h=['hello','abc']// enum 枚舉? enumGender{Male=0,// 男Female=1// 女}leti:{name:string,gender:Gender}i={name:'孫悟空'，? ? hender：Gender.Male// 性別： 男}// 類型別名typemytype=1|2|3|4|5;letk:1|2|3|4|5;letl:1|2|3|4|5;letm:mytype// 這樣m的類型也是 1 | 2 | 3 | 4 | 5;
3.函數傳參賦值：
function sum(a:number,b:number):number{return a + b;}const result = sum(123,234)
4.TS編譯選項
tsconfig.json 配置
{/*
? ? ? include? 用來指定那些 ts 文件需要被編譯? ** 任意目錄? * 任意文件
? ? ? exclude? 用來指定那些 ts 文件不許被編譯
? ? ? ? ? ? ? 默認值： ["node_modules","bower_components","jspm_packages"]extends? 定義被繼承的配置文件? ? ? files? ? 指定被編譯的文件列表，只有需要編譯文件少時才會用到? ? ? compilerOptions? 編譯器的選項? */"include":["./src/**/*"],// "exclude":[//? "./src/hello/*"http:// ],"compilerOptions":{// 用來指定ts被編譯為es的版本"target":"ES6",// 指定要使用模塊化的規范"module":"system",// 用來指定項目中要使用的庫// "lib":[],// 指定編譯后文件所在的目錄"outDir":"./dist",// 設置outfile 后，所有全局作用域中的的代碼會合并到同一個 文件中// "outFile":"./dist/app.js",// 是否對js進行編譯，默認是false"allowJs":true,// 是否檢查js代碼"checkJs":false,// 是否移除注釋"removeComments":true,// 不生成編譯后的文件"noEmit":false,// 當有錯誤的時候不生成編譯文件"noEmitOnError":true,// 所有嚴格檢查的總開關"strict":true,// 用來設置編譯后的js文件是否使用嚴格模式，默認是false"alwaysStrict":true,// 不允許隱式的Any類型"noImplicitAny":true,// 不允許不明確類型的this"noImplicitThis":true,// 嚴格的檢查空值"strictNullChecks":true}}
5.webpack打包TS
5.1 tsconfig.json 配置
{"compilerOptions":{"module":"ES2015","target":"ES2015","strict":true}}
5.2 webpack.config.js 配置
// 引入一個包constpath=require('path')// 引入html插件constHTMLWebpackPlugin=require('html-webpack-plugin')// 引入clean 插件 打包時先清除dist目錄const{CleanWebpackPlugin}=require('clean-webpack-plugin')module.exports={// 指定入口文件entry:'./src/index.ts',// 指定打包文件所在的目錄output:{// 指定打包目錄path:path.resolve(__dirname,'dist'),// 打包后文件的名字filename:'bundle.js',// 告訴webpack不使用箭頭函數environment:{arrowFunction:false}},// 指定webpack 打包時要使用的模塊module:{// 指定加載規則rules:[{// test 指定規則生效的文件test:/\.ts$/,// 要使用的loadderuse:[// 配置babel 做兼容{// 指定加載器loader:"babel-loader",// 設置babeloptions:{// 設置預定義的環境presets:[[// 指定環境插件"@babel/preset-env",// 配置信息{// 要兼容的目標瀏覽器targets:{"chrome":"58","ie":"11"},// 指定corejs版本"corejs":"3",// 使用corejs的方式? "usage" 表示按需加載"useBuiltIns":"usage"}]]}},'ts-loader'],// 要排除的文件exclude:/node-modules/}]},// 配置wenpack插件plugins:[// 打包前刪除dist目錄newCleanWebpackPlugin(),// 自動構建html文件newHTMLWebpackPlugin({// title: "這是一個自定義的title"template:"./src/index.html"}),],// 用來設置引用模塊resolve:{extensions:['.ts','.js']}}
5.3 依賴包
{"name":"part2","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack","start":"webpack serve --open chrome.exe"},"keywords":[],"author":"","license":"ISC","devDependencies":{"@babel/core":"^7.14.3","@babel/preset-env":"^7.14.2","babel-loader":"^8.2.2","clean-webpack-plugin":"^4.0.0-alpha.0","core-js":"^3.12.1","html-webpack-plugin":"^5.3.1","ts-loader":"^9.2.1","typescript":"^4.2.4","webpack":"^5.37.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"}}
6 class 類
6.1 類的基本使用
// 使用class 關鍵字來定義/*
? ? 對象包括包含兩個部分
? ? ? ? 屬性
? ? ? ? 方法
*/classPerson{/*
? ? ? ? 直接定義的屬性是實例屬性，需要通過對象的實例去訪問：
? ? ? ? ? ? const per = new Person()
? ? ? ? ? ? per.name
? ? ? ? 使用static開頭的是靜態屬性
? ? ? ? ? ? Person.age
? ? ? ? readonly 開頭的屬性表示一個只讀屬性
? ? */// 定義實例屬性readonlyname:string='孫悟空'// 在屬性前使用static關鍵字可以定義類屬性（靜態屬性）staticreadonlyage:number=18// 定義方法sayHello(){console.log('hello');}}constper=newPersonconsole.log(per);console.log(Person.age);per.sayHello()
6.2 構造函數
classDog{name:stringage:number// 構造函數會在對象創建的時候調用constructor(name:string,age:number){// 在實例方法中，this就表示當前的實例// 在構造函數中當前對象就是新建的哪個對象// 可以通過this向新建的對象中添加屬性this.name=namethis.age=age// console.log(this);}back(){// alert('旺旺旺')// 在方法中可以通過this來表示當前調用方法的對象console.log(this);}}constdog=newDog('小黑',12)constdog2=newDog('小白',23)console.log(dog);console.log(dog2);dog.back()
7 繼承
7.1 繼承使用 （extends關鍵字）
(function(){// 定義 Animal 類classAnimal{name:stringage:numberconstructor(name:string,age:number){this.name=namethis.age=age}sayHello(){console.log('動物在叫');}}/*
? ? ? ? Dog extends Animal
? ? ? ? ? ? 此時，Animal被稱為父類，Dog被稱為子類
? ? ? ? ? ? 使用繼承后，子類會擁有父類所有的方法和屬性
? ? ? ? ? ? 如果在子類中添加了和父類相同的方法，則子類方法會覆蓋父類的方法 ，這種叫方法重寫
? ? */// 定義一個狗的類// 使Dog類繼承Animal類classDogextendsAnimal{run(){console.log(`${this.name}再跑`);}}// 定義一個貓的類// 使Cat類繼承Animal類classCatextendsAnimal{sayHello(){console.log('喵喵喵');}}constdog=newDog('旺財',5)constcat=newCat('咪咪',3)console.log(dog);dog.sayHello()dog.run()console.log(cat);cat.sayHello()})()
7.1 super關鍵字
(function(){class Animal{name:string? ? ? ? constructor(name:string){this,name = name}sayHello (){console.log('動物在叫');}}class Dog extends Animal{age:number? ? ? ? constructor (name:string,age:number){// 如果在子類中寫了構造函數，此時在子類的構造函數中必須對父類的構造函數調用super(name)// 調用父類構造函數this.age = age}sayHello (){// 在類的方法中 super 就表示當前類的父類super.sayHello()}}const dog = new Dog('旺財',23)? ? dog.sayHello()})()
8 抽象類? （abstract 關鍵字）
(function(){/*
? ? ? ? 以 abstract 開頭的類是抽象類
? ? ? ? ? ? 抽象類和其他的類區別不大，只是不能用來創建對象?
? ? ? ? ? ? 抽象類就是專門用來被繼承的類
? ? ? ? ? ? 抽象類中可以添加抽象方法
? ? */abstract class Animal{name:string? ? ? ? constructor(name:string){this,name = name}// 定義一個抽象方法// 抽象方法使用 abstract 開頭，沒有方法體// 抽象方法只能定義在抽象類中，子類必須對抽象方法進行重寫abstract sayHello ():void}class Dog extends Animal{sayHello (){console.log('旺旺旺旺');}}class Cat extends Animal{// 直接這個不重寫 父類定義的抽象方法就會報錯}const dog = new Dog('旺財')? ? dog.sayHello()})()
10 接口 （interface、implements 關鍵字）
(()=>{// 描述一個對象類型typemyType={name:string,age:number}constobj:myType={name:'sss',age:23}/*
? ? ? ? 接口用來定義一個類結構, 用來定義一個類中應該包含那些屬性和方法
? ? ? ? ? ? 同時接口也可以當成類型聲明去使用
? ? */interfacemyInterface{name:string,age:number}interfacemyInterface{gender:string}// 接口可以在定義類的時候去限制類的結構// 接口中的所有屬性都不能有實際的值// 接口只定義對象的結構，而不考慮實際值// 在接口中所有方法都是抽象方法interfacemyinter{name:stringsayHello():void}/*
? ? ? ? 定義類時，可以使類去實現一個口接口
? ? ? ? ? ? 實現接口就是使類滿足接口的要求
? ? */classMyClassimplementsmyinter{name:stringconstructor(name:string){this.name=name}sayHello(){console.log('大家好'+this.name)}}constmyCalss=newMyClass('李四')myCalss.sayHello()})()
11 屬性的封裝 (public、private關鍵字 )
(()=>{// 表示人的類classPerson{//? Ts 可以在屬性前添加屬性的修飾符/*
? ? ? ? ? ? public 修飾的屬性可以在任意位置修改、訪問（包括子類）? 默認值
? ? ? ? ? ? private 私有屬性，只能在類的內部修改 訪問
? ? ? ? ? ? ? ? - 可以通過在類中添加方法使得私有屬性可以訪問
? ? ? ? ? ? protected? 受保護的，只能到當前類和當前的子類中訪問
? ? ? ? */private_name:string;private_age:number;constructor(name:string,age:number){this._name=namethis._age=age}// 定義方法，用來獲取name屬性getName(){returnthis._name}// 定義一個方法用來設置name屬性setName(value:string){this._name=value}getAge(){returnthis._age}setAge(value:number){// 判斷年齡是否合法if(value>=0){this._age=value}}// TS 中設置getter方法的方式getname(){returnthis._name}setname(value:string){this._name=value}getage(){returnthis._age}setage(value:number){if(value<0){return}this._age=value}}constpreson=newPerson('孫悟空',23)/*
? ? ? ? 現在屬性是在對象中設置的，屬性可以任意修改
? ? ? ? ? ? 屬性可以任意修改將會導致對象中的數據變得非常不安全
? ? */// preson.setName('租八戒')// preson.setAge(-33)preson.name='租八戒'preson.age=-3console.log(preson);// _name: "租八戒", _age: 23})()
12 泛型
// function fn(a: number):number {//? ? return a// }/*
? ? 在定義函數或是類時，如果遇到類型不明確就可以使用泛型
*/functionfn<T>(a:T):T{returna}// 可以直接調用具有泛型的函數fn(10)// 不指定泛型，TS可以自動對類型進行推斷fn<string>('hello')// 指定泛型functionfn2<T,K>(a:T,b:K):T{console.log(b)returna}fn2(123,'hello')interfaceInter{length:number}// T extends Inter 表示泛型 T 必須是 Inter 實現類（子類）functionfn3<TextendsInter>(a:T):number{returna.length}fn3('123')fn3({length:232})classMyClass<T>{name:Tconstructor(name:T){this.name=name}}constmc=newMyClass<string>('詢')
14 命名空間 （namespace）
namespceA{interfaceAnmal{name:string;eat():viod}exportclassDogimplemnts Anmal{name:string;constructor(theName:string){this.name=theName}eat(){console.log(${this.name}吃狗糧)}}}namespceB{interfaceAnmal{name:string;eat():viod}exportclassDogimplemnts Anmal{name:string;constructor(theName:string){this.name=theName}eat(){console.log(${this.name}吃狗糧)}}}vard=newA.Dog('張三')d.eat()varf=newB.Dog('李四')f.eat()
15 裝飾器
裝飾器是一種特殊的聲明，它能夠被附加到類聲明，方法，屬性，或則參數上，可以修飾行為
常見裝飾器：類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器
裝飾器的寫法：普通裝飾器（無法傳參）、裝飾器工廠（可傳參）
類裝飾器：在類型聲明前被聲明，類裝飾器應用于類構造函數，可用來監視，修改或替換類定義，傳入一個參數
// 類裝飾器functionlogClass(params:any){console.log(params);// params 就是當前類params.prototype.apiUrl='動態擴展的屬性'params.prototype.run=function(){console.log('我是一個run方法');}}@logClassclassHttpClient{constructor(){}getData(){}}varhttp:any=newHttpClient()console.log(http.apiUrl);http.run()
類裝飾器工廠：
functionlogClass(params:string){returnfunction(target:any){console.log(target);console.log(params);target.prototype.apiUrl=params}}@logClass('http://www.yes.com')classHttpClient{constructor(){}getData(){}}varhttp:any=newHttpClient()console.log(http.apiUrl);
屬性裝飾器：
// 屬性裝飾器functionlogProperty(params:any){returnfunction(target:any,attr:any){console.log(target);console.log(attr);target[attr]=params}}classHttpClient{@logProperty('http://weqweqwe.com')publicurl:any|undefinedconstructor(){}getData(){console.log(this.url);}}varhttp:any=newHttpClient()http.getData()
