摘要:前端知識點總結(jié)高級持續(xù)更新中字符串什么是連續(xù)存儲多個字符的字符數(shù)組相同下標(biāo)遍歷選取不同類型不同不通用所有字符串都無權(quán)修改原字符串,總是返回新字符串大小寫轉(zhuǎn)換統(tǒng)一轉(zhuǎn)大寫統(tǒng)一轉(zhuǎn)小寫何時不區(qū)分大小寫時,都需要先轉(zhuǎn)為一致的大小寫,再比較。
前端知識點總結(jié)——JS高級(持續(xù)更新中) 1.字符串
什么是: 連續(xù)存儲多個字符的字符數(shù)組
相同: 1. 下標(biāo) 2. .length 3. 遍歷
4. 選取: slice(starti[, endi])
不同: 類型不同 API不通用
API: 所有字符串API都無權(quán)修改原字符串,總是返回新字符串
大小寫轉(zhuǎn)換:
統(tǒng)一轉(zhuǎn)大寫: str=str.toUpperCase()
統(tǒng)一轉(zhuǎn)小寫: str=str.toLowerCase()
何時: 不區(qū)分大小寫時,都需要先轉(zhuǎn)為一致的大小寫,再比較。
說明: 驗證碼本不該客戶端做,應(yīng)該由服務(wù)器端完成
2.獲取指定位置的字符:str.charAt(i) => str[i]
獲取指定位置字符的unicode號
str.charCodeAt(i)
將unicode號轉(zhuǎn)為漢字: String.fromCharCode(unicode)3.獲取子字符串:
str.slice(starti,endi+1)
強(qiáng)調(diào): 如果一個API,兩個參數(shù)都是下標(biāo),則后一個參數(shù)+1(含頭不含尾)
str.substring(starti,endi+1) 用法和slice完全一樣
強(qiáng)調(diào): 不支持負(fù)數(shù)參數(shù)
str.subStr(starti,n) 從starti開始,取n個
強(qiáng)調(diào): 第二個參數(shù)不是下標(biāo),所以,不用考慮含頭不含尾
查找一個固定的關(guān)鍵詞出現(xiàn)的位置:
var i=str.indexOf("關(guān)鍵詞"[,fromi])
在str中,fromi位置后,找下一個"關(guān)鍵詞"出現(xiàn)的位置
如果找到,返回關(guān)鍵詞第一個字的下標(biāo)位置
如果沒找到,返回-1
說明: fromi可省略,默認(rèn)從0開始
var i=str.lastIndexOf("關(guān)鍵詞");
在str中,查找"關(guān)鍵詞"最后出現(xiàn)的位置
問題: 只能查找一個固定的關(guān)鍵詞
臥我草/操/艸/槽
微 信 w x wei xin
解決: 用正則查找:
判斷是否包含關(guān)鍵詞:
var i=str.search(/正則/)
返回值: 如果找到,返回關(guān)鍵詞的位置
如果沒找到,返回-1
問題: 默認(rèn),所有正則都區(qū)分大小寫
解決: 在第二個/后加i ignore 忽略
問題: 只能獲得位置,無法獲得本次找到的敏感詞的內(nèi)容
獲得關(guān)鍵詞的內(nèi)容:
var arr=str.match(/正則/i);
2種情況:
不加g的情況: 只能返回第一個找到的關(guān)鍵詞內(nèi)容和位置: [ 0: "關(guān)鍵詞內(nèi)容", index: 位置 ]
加g: 返回所有找到的敏感詞的內(nèi)容,保存在數(shù)組中。g: global
強(qiáng)調(diào): 如果找不到,返回null
警告: 凡是一個函數(shù)可能返回null!都要先判斷不是null,才能用!
問題: 只能獲得關(guān)鍵詞內(nèi)容,無法獲得位置
即找每個關(guān)鍵詞內(nèi)容,又找每個關(guān)鍵詞位置:
reg.exec()
什么是: 將找到的關(guān)鍵詞替換為指定的內(nèi)容
如何: 2種:
簡單替換: 將所有敏感詞無差別的替換為統(tǒng)一的新值
str=str.replace(/正則/,"替換值")
高級替換: 根據(jù)每個敏感詞的不同,分別替換不同的值
str=str.replace(/正則/,function(kw){
//kw: 會自動獲得本次找到的一個關(guān)鍵詞 return 根據(jù)kw的不同,動態(tài)生成不同的替換值
})
衍生: 刪除關(guān)鍵詞:
str=str.replace(/正則/,"")
什么是: 描述一個字符串中字符出現(xiàn)規(guī)律的規(guī)則的表達(dá)式
何時: 2種:
查找關(guān)鍵詞:
驗證:
如何: 正則表達(dá)式語法:
最簡單的正則其實是關(guān)鍵詞原文:
7.字符集:什么是: 規(guī)定一位字符,備選字符列表的集合
何時: 只要一位字符,有多種備選字時
如何: [備選字符列表]
強(qiáng)調(diào): 一個[]只能匹配一位字符
簡寫: 如果備選字符列表中部分字符連續(xù)
可簡寫為: [x-x] 用-省略中間字符 比如: [0-9] 一位數(shù)字 [a-z] 一位小寫字符 [A-Z] 一位大寫字母 [A-Za-z] 一位字符 [0-9A-Za-z] 一位字母或數(shù)字 [u4e00-u9fa5] 一位漢字
反選: 1 除了4和7都行
8.預(yù)定義字符集: 4種:d 一位數(shù)字 [0-9]
w 一位數(shù)字,字母或下劃線 [0-9A-Za-z_]
強(qiáng)調(diào): 只有100%匹配時,才使用w,如果不允許有_,則使用自定義字符集
s 一位空字符,比如: 空格,Tab,...
. 通配符
問題: 字符集只能規(guī)定字符的內(nèi)容,無法靈活規(guī)定字符的個數(shù)
什么是: 專門規(guī)定一個字符集出現(xiàn)次數(shù)的規(guī)則
何時: 只要規(guī)定字符集出現(xiàn)的次數(shù),都用量詞
如何: 字符集量詞
強(qiáng)調(diào): 量詞默認(rèn)只修飾相鄰的前一個字符集
包括: 2大類:
1. 有明確數(shù)量邊界: {6,8} 最少6次,最多8次 {6,} 最少6次,多了不限 {6} 必須6次,不能多也不能少 2. 沒有明確數(shù)量邊界: ? 可有可無,最多1次 * 可有可無,多了不限 + 至少1次,多了不限10.選擇和分組:
選擇: 或
規(guī)則1|規(guī)則2
何時: 只要在兩個規(guī)則中任選其一匹配
分組: (規(guī)則1規(guī)則2...)
何時: 如果希望一個量詞同時修飾多個規(guī)則時,都要先將多個規(guī)則分為一組,再用量詞修飾分組。
比如: 車牌號: [u4e00-u9fa5][A-Z]?[0-9A-Z]{5} 比如: 手機(jī)號規(guī)則: +86或0086 可有可無,最多1次 空字符 可有可無,多了不限 1 在3,4,5,7,8中選一個
9位數(shù)字
(+86|0086)?s*1[34578]d{9}
比如: 身份證號:
15位數(shù)字 2位數(shù)字 一位數(shù)字或X
可有可無,最多一次 d{15}(d{2}[0-9X])? 比如: 電子郵件: 鄙視
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
比如: url:
(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]
字符串開頭: ^
字符串結(jié)尾: $
比如: 開頭的空字符: ^s+
結(jié)尾的空字符: s+$ 開頭或結(jié)尾的空字符: ^s+|s+$
3.單詞邊界: b 包括開頭,結(jié)尾,空字符,標(biāo)點符號
比如: 單詞首字母: [a-z] 匹配單詞: xxx12.String:
替換: 2種: 如果關(guān)鍵詞是固定的:
str=str.replace("關(guān)鍵詞","替換值");
如果關(guān)鍵詞變化
str=str.replace(/正則/ig,"替換值");
切割: 2種: 如果分隔符是固定的:
var substrs=str.split("分隔符")
如果分隔符不是固定的
var substrs=str.split(/正則/i)
固定套路: 將字符串打散為字符數(shù)組
var chars=str.split("")13.RegExp:
什么是: 保存一條正則表達(dá)式,并提供用正則表達(dá)式執(zhí)行驗證和查找的API
何時: 只要用正則查找關(guān)鍵詞或驗證字符串格式時
如何:
創(chuàng)建: 2種:
直接量: var reg=/正則/ig
何時: 只要正則表達(dá)式的規(guī)則是固定不變的。
問題: 正則表達(dá)式時固定不變的,不支持動態(tài)生成
new: var reg=new RegExp("正則","ig");
何時: 只要需要動態(tài)生成正則表達(dá)式
API: 2個:
驗證: var bool=reg.test(str)
問題: 默認(rèn),只要找到匹配的內(nèi)容,就返回true,不要求完整匹配!
解決: 今后,凡是驗證必須前加^,后加$
查找: 即找每個關(guān)鍵詞位置,又獲得每個關(guān)鍵詞內(nèi)容
var arr=reg.exec(str)
在str中查找下一個關(guān)鍵詞的位置和內(nèi)容
返回值: arr:[ 0: 內(nèi)容, index: 位置 ]
如果找不到,返回null
如果找所有: 只要用while反復(fù)調(diào)用reg.exec即可,exec可自動跳到下一個查找位置
什么是: 保存數(shù)學(xué)計算的常量和API的對象
何時: 進(jìn)行算術(shù)計算
如何:
創(chuàng)建: 不用創(chuàng)建,所有API都用Math直接調(diào)用
API:
取整:
上取整: Math.ceil(num)
下取整:
Math.floor(num)
parseInt(str) 去掉字符串結(jié)尾非數(shù)字字符(單位)
四舍五入取整:
Math.round(num)
優(yōu): 返回數(shù)字類型,可直接計算
缺: 不能隨意指定小數(shù)位數(shù)
n.toFixed(d)
優(yōu): 可隨意指定小數(shù)位數(shù)
缺: 返回字符串類型,不能直接做加法
自定義round
乘方和開平方:
Math.pow(底數(shù),冪)
Math.sqrt(num)
最大值和最小值
Math.max(值1, 值2,...)
Math.min(值1, 值2,...)
問題: 不支持?jǐn)?shù)組
解決: Math.max(...arr)
隨機(jī)數(shù):
Math.random() 0~1 隨機(jī)小數(shù)
公式: 在min到max之間取一個隨機(jī)整數(shù)
parseInt(Math.random()*(max-min+1)+min)
簡寫: 在0~max之間取一個隨機(jī)整數(shù)
parseInt(Math.random()*(max+1))
三角函數(shù):
已知角度,求邊長,用三角函數(shù): sin cos tan
已知邊長,求角度,用反三角函數(shù): asin acos atan
僅以atan:
var 弧度=Math.atan(對邊長/鄰邊長)
360角度=2π弧度
問題: atan無法區(qū)分角度的象限
解決: Math.atan2(對邊長, 鄰邊長);
什么是: 保存一個時間,提供操作時間的API
何時: 只要在程序中存儲時間或操作時間,都用date
如何:
創(chuàng)建: 4種:
創(chuàng)建日期對象,并自動獲得客戶端當(dāng)前系統(tǒng)時間
var now=new Date();
創(chuàng)建日期對象,保存自定義時間
var now=new Date("yyyy/MM/dd hh:mm:ss");
用毫秒數(shù)創(chuàng)建日期對象:
var date=new Date(ms)
復(fù)制一個日期對象:
問題: 日期的計算都是直接修改原日期對象
解決: 如果希望同時保留計算前后的開始和結(jié)束時間,都要先復(fù)制開始時間,再用副本計算結(jié)束時間
var date2=new Date(date1)
本質(zhì): 起始日期對象內(nèi)部保存的是一個巨大的毫秒數(shù):
1970年1月1日至今的毫秒數(shù)
文字存儲日期的問題:
1. 有時區(qū)問題: 2. 不便于計算:
毫秒數(shù)存儲日期:
1. 不受時區(qū)的干擾: 2. 便于計算:
總結(jié): 將來在網(wǎng)絡(luò)中傳輸或在數(shù)據(jù)庫中存儲時間,都用毫秒數(shù)
16.API:8個單位:
FullYear Month Date Day
Hours Minutes Seconds Milliseconds
每個單位上都有一對兒get/set方法:
getXXX() 負(fù)責(zé)獲得單位的值
setXXX() 負(fù)責(zé)修改單位的值
特例: Day 不能修改,沒有setDay()
取值范圍:
Month: 0~11 計算機(jī)中的月份總是比現(xiàn)實中小1
Date: 1~31
Day: 0~6
Hours: 0~23
Minutes/Seconds: 0~59
日期計算:
兩日期相減: 得到的是毫秒差
何時: 計算時間段或計算倒計時
對任意單位做加減: 3步:
獲得單位的當(dāng)前值
做加減
將計算后的結(jié)果set回去
setXXX()可自動調(diào)整時間進(jìn)制
可簡化為: date.setXXX(date.getXXX()+n)
問題: setXXX()直接修改原日期
解決: 如果同時保存計算前后的開始和結(jié)束時間,應(yīng)該先復(fù)制副本,再用副本計算。
日期格式化:
date.toString() 默認(rèn)當(dāng)?shù)貢r間的完整版格式
date.toLocaleString() 轉(zhuǎn)為當(dāng)?shù)貢r間的簡化版格式
date.toLocaleDateString() 僅保留日期部分
date.toLocaleTimeString() 僅保留時間部分
什么是錯誤: 程序執(zhí)行過程中,遇到的無法繼續(xù)執(zhí)行的異常情況
程序出錯,都會強(qiáng)行中斷退出。
什么是錯誤處理: 即使程序出錯!也保證不會中斷退出
何時: 如果希望程序,即使出錯,也不會強(qiáng)行中斷退出
如何:
try{
可能出錯的正常代碼
}catch(err){
//err: 錯誤對象, 自動保存了錯誤的信息
只有出錯才執(zhí)行的錯誤處理代碼:
提示錯誤信息, 記錄日志, 釋放資源
}
問題: 效率略低
解決: 多數(shù)try catch,都能用if...else代替
主動拋出錯誤:
throw new Error("錯誤信息")
鄙視: js中共有幾種錯誤類型: 6種:
SyntaxError 語法錯誤
ReferenceError 引用錯誤
TypeError 類型錯誤
RangeError 范圍錯誤 參數(shù)超范圍
EvalError URIError
19.Function:什么是函數(shù): 保存一段代碼段的對象,再起一個名字。
為什么: 代碼重用
何時: 只要一段代碼可能被重復(fù)使用時!
如何:
創(chuàng)建: 3種:
聲明: function 函數(shù)名(參數(shù)列表){
函數(shù)體; return 返回值; }
參數(shù): 調(diào)用函數(shù)時,接收傳入函數(shù)的數(shù)據(jù)的變量
何時: 如果函數(shù)自身必須某些數(shù)據(jù)才能正常執(zhí)行時,就必須定義參數(shù),從外部接收必須的數(shù)據(jù)
返回值: 函數(shù)的執(zhí)行結(jié)果
何時: 如果調(diào)用者需要獲得函數(shù)的執(zhí)行結(jié)果時
調(diào)用: var 返回值=函數(shù)名(參數(shù)值列表);
問題: 聲明提前: 在程序開始執(zhí)行前,先將var聲明的變量和function聲明的函數(shù),提前到當(dāng)前作用域的頂部集中創(chuàng)建。賦值留在原地。
解決:
直接量: var 函數(shù)名=function (參數(shù)列表){
特點: 不會被聲明提前
揭示: 函數(shù)名其實只是一個變量
函數(shù)其實是一個保存代碼段的對象 函數(shù)名通過對象地址引用函數(shù)對象
new :
var 函數(shù)名=
new Function("參數(shù)1","參數(shù)2",...,"函數(shù)體")
什么是: 多個相同函數(shù)名,不同參數(shù)列表的函數(shù),在調(diào)用時,可根據(jù)傳入的參數(shù)不同,自動執(zhí)行不同的操作。
為什么: 為了減少API的數(shù)量,減輕調(diào)用者的負(fù)擔(dān)
何時: 只要一項任務(wù),可能根據(jù)傳入?yún)?shù)的不同,執(zhí)行不同的流程時。
如何: js語法默認(rèn)不支持重載!
因為: js中不允許多個同名函數(shù),同時存在。最后一個函數(shù)會覆蓋之前的。 變通實現(xiàn): arguments 什么是: 每個函數(shù)中,自動包含的,接收所有傳入函數(shù)的參數(shù)值的類數(shù)組對象 類數(shù)組對象: 長得像數(shù)組的對象 vs 數(shù)組: 相同: 1. 下標(biāo), 2. .length, 3. 遍歷 不同: 類型不同, API不通用21.匿名函數(shù):
什么是: 定義函數(shù)時,不指定函數(shù)名
為什么: 節(jié)約內(nèi)存 或 劃分臨時作用域
何時:
只要一個函數(shù),希望調(diào)用后,立刻自動釋放!
劃分臨時作用域:
如何:
回調(diào): 定義函數(shù)后,自己不調(diào)用,而是傳遞給另一個函數(shù)去調(diào)用
自調(diào): 定義函數(shù)后,立刻調(diào)用自己。
何時: 今后所有js代碼必須都放在匿名函數(shù)自調(diào)中,避免全局污染。
什么是垃圾: 一個不再被任何變量使用的對象
什么是垃圾回收: js引擎會自動回收不再被使用的對象的空間。
為什么: 內(nèi)存空間都是有限的!
垃圾回收器: 專門負(fù)責(zé)回收垃圾對象的小程序——js引擎自帶
如何:
程序執(zhí)行時,垃圾回收器伴隨主程序執(zhí)行而執(zhí)行。
每創(chuàng)建一個對象,垃圾回收器就會記錄對象被幾個變量引用著.
如果發(fā)現(xiàn)一個對象不再被任何變量應(yīng)用,則自動回收該對象的存儲空間。
好的習(xí)慣: 只要一個對象不再使用,就要賦值為null
23.作用域和作用域鏈作用域(scope): 一個變量的可用范圍
為什么: 避免內(nèi)部的變量影響外部
本質(zhì): 是一個存儲變量的對象
包括: 2種:
全局作用域: window
保存全局變量: 隨處可用,可反復(fù)使用
函數(shù)作用域: ?
保存局部變量: 僅在函數(shù)內(nèi)可用,且不可重用!
程序開始執(zhí)行前
在內(nèi)存中創(chuàng)建執(zhí)行環(huán)境棧(數(shù)組): 用于保存正在調(diào)用的函數(shù)任務(wù)。
在執(zhí)行環(huán)境站中添加第一條記錄: 調(diào)用瀏覽器主程序
創(chuàng)建全局作用域?qū)ο體indow: 2個作用:
1. 保存瀏覽器自己需要的數(shù)據(jù)和對象 2. 作為程序的全局作用域?qū)ο?,保存全局變?/pre>定義函數(shù)時:
在window中定義函數(shù)名變量
創(chuàng)建函數(shù)對象保存函數(shù)定義
函數(shù)名變量引用函數(shù)對象
函數(shù)對象的scope屬性,又指回了函數(shù)創(chuàng)建時的作用域調(diào)用函數(shù)時
在執(zhí)行環(huán)境棧中添加了本次函數(shù)調(diào)用的記錄
創(chuàng)建本次函數(shù)調(diào)用的函數(shù)作用域?qū)ο驛O
在AO中添加函數(shù)的局部變量
設(shè)置AO的parent指向函數(shù)的scope
執(zhí)行環(huán)境棧中的函數(shù)調(diào)用記錄,引用AO
變量的使用順序: 先用局部,再用全局函數(shù)調(diào)用后
25.作用域鏈:
本次函數(shù)調(diào)用的記錄從執(zhí)行環(huán)境棧中出棧
導(dǎo)致AO被釋放, 導(dǎo)致所有局部變量都釋放什么是: 由多級作用域?qū)ο?,逐級引用形成的鏈?zhǔn)浇Y(jié)構(gòu)
2個作用:保存所有變量
控制著變量的使用順序!
26.閉包closure:什么是: 即重用一個變量,又保護(hù)變量不被污染的一種機(jī)制
為什么: 全局變量和局部變量都具有不可兼得的優(yōu)缺點:
全局變量: 優(yōu): 可重用, 缺: 易被污染
局部變量: 優(yōu): 僅函數(shù)內(nèi)可用,不會被污染缺: 不可重用!何時: 只要一個變量,可能被重用,又不想被篡改
如何: 3步:用外層函數(shù)包裹要保護(hù)的變量和內(nèi)層函數(shù)
外層函數(shù)將內(nèi)層函數(shù)返回到外部
調(diào)用外層函數(shù),獲得內(nèi)層函數(shù)的對象,保存在外部的變量中——形成了閉包
閉包形成的原因: 外層函數(shù)調(diào)用后,外層函數(shù)的函數(shù)作用域?qū)ο鬅o法釋放
主動使用閉包: 為一個函數(shù)綁定一個專屬的變量
鄙視: 畫簡圖找受保護(hù)的變量,并確定其最終值
找內(nèi)層函數(shù)對象
外層函數(shù)向外返回內(nèi)層函數(shù)對象: 3種:return function(){}
全局變量=function(){}
return arr/obj{function(){...}}
27.OOP什么是對象: 內(nèi)存中存儲多個數(shù)據(jù)的獨立存儲空間都稱為一個對象。
什么是面向?qū)ο? 程序中都是用對象結(jié)構(gòu)來描述現(xiàn)實中一個具體事物。
為什么: 為了便于大量數(shù)據(jù)的維護(hù)和查找
何時: 幾乎所有js程序,都使用面向?qū)ο蟮姆绞介_發(fā)
如何: 三大特點: 封裝,繼承,多態(tài)
封裝: 用對象來集中描述現(xiàn)實中一個具體事物的屬性和功能
為什么: 便于維護(hù)和查找
何時: 今后只要使用面向?qū)ο蟮姆绞介_發(fā),都要先封裝對象,再按需使用對象的屬性和功能。
如何: 3種:
用{}:
var obj={
屬性名:值,... : ... ,//方法名:function(){...},
方法名 (){...},
}
其中: 事物的屬性值會成為對象的屬性對象的屬性本質(zhì)是保存在對象中的一個變量 事物的功能會成為對象的方法! 方法的本質(zhì)是保存在對象中的一個函數(shù)如何訪問對象的成員:
訪問對象的屬性: 對象.屬性名
調(diào)用對象的方法: 對象.方法名()
問題: 對象自己的方法中要使用對象自己的屬性
錯誤: 直接用屬性名,報錯: 找不到變量為什么: 默認(rèn),不加.就使用的變量,只能在作用域鏈中查找,無法自動進(jìn)入對象中解決一: 對象名.屬性名
問題: 對象名僅是一個普通的變量名,可能發(fā)生變化。正確解決: this.屬性名
this: 自動指正在調(diào)用當(dāng)前方法的.前的對象為什么: 不受對象名變量的影響 何時: 只要對象自己的方法向訪問對象自己的屬性時,都必須加this.js中對象的本質(zhì),其實就是一個關(guān)聯(lián)數(shù)組
用new:
var obj=new Object(); //創(chuàng)建空對象 等效于{}
obj.屬性名=值;
obj.方法名=function(){
... this.屬性名 ...
}和關(guān)聯(lián)數(shù)組一樣,js中的對象也可隨時添加新屬性和方法。
問題: 反復(fù)創(chuàng)建多個相同結(jié)構(gòu)的對象時,重復(fù)代碼太多,導(dǎo)致不便于維護(hù)
解決:
用構(gòu)造函數(shù):
構(gòu)造函數(shù): 描述一類對象統(tǒng)一結(jié)構(gòu)的函數(shù)
為什么: 為了重用結(jié)構(gòu)代碼!
何時: 只要反復(fù)創(chuàng)建相同結(jié)構(gòu)的多個對象時,都用構(gòu)造函數(shù)
如何: 2步:
定義構(gòu)造函數(shù)
function 類型名(屬性參數(shù)列表){
this.屬性名=屬性參數(shù);
this. ... = 屬性參數(shù);
this.方法名=function(){this.xxx}
}
調(diào)用構(gòu)造函數(shù)創(chuàng)建新對象
var obj=new 類型名(屬性值列表)
new: 1. 創(chuàng)建新的空對象2. 設(shè)置新對象繼承構(gòu)造函數(shù)的原型對象 3. 用新對象調(diào)用構(gòu)造函數(shù) 將構(gòu)造函數(shù)中的this都指向新對象 4. 返回新對象的地址問題: 構(gòu)造函數(shù)只能重用代碼,無法節(jié)約內(nèi)存!
28.繼承:
解決: 繼承:什么是: 父對象的成員,子對象無需創(chuàng)建,就可直接使用
為什么: 代碼重用,節(jié)約內(nèi)存
何時: 只要多個子對象,擁有相同的成員時,都應(yīng)只在父對象中定義一份,所有子對象共用即可!
如何: js中繼承都是通過原型對象實現(xiàn)的什么是原型對象: 集中存儲同一類型的所有子對象,共用成員的父對象 何時: 只要繼承,必然原型對象 如何: 創(chuàng)建: 不用創(chuàng)建,買一贈一 每創(chuàng)建一個構(gòu)造函數(shù),都附贈一個原型對象 繼承: 在創(chuàng)建子對象時,new的第2步自動設(shè)置子對象繼承構(gòu)造函數(shù)的原型對象 訪問成員: 優(yōu)先訪問自有成員 自己沒有,就去父對象(原型對象)中查找 將成員添加到原型對象中: 構(gòu)造函數(shù).prototype.成員=值自有屬性和共有屬性:
自有屬性: 保存在當(dāng)前對象本地,僅歸當(dāng)前對象獨有的屬性
共有屬性: 保存在父對象中,所有子對象共有的屬性
讀取屬性值: 子對象.屬性
修改屬性值: 自有屬性,必須通過子對象自己修改共有屬性,只能用原型對象修改!內(nèi)置對象的原型對象:
鄙視: 內(nèi)置對象: 11個:String Number Boolean ——包裝類型對象 Array Date RegExp Math Error Function Object Global (在瀏覽器中,被window代替)鄙視: 包裝類型的理解
什么是: 保存一個原始類型的值,并提供操作原始類型值的API 為什么: 原始類型的值本身不具有任何功能 何時: 只要試圖對原始類型的值調(diào)用API時,都會自動使用包裝類型對象來幫助原始類型的值執(zhí)行操作。 如何: 1. 內(nèi)存中已經(jīng)預(yù)置了三大包裝類型的對象: String Number Boolean 2. 在試圖對原始類型的值調(diào)用API時,自動檢測原始類型的值的類型名 var n=345.678; typeof n => number 3. 根據(jù)類型名實例化對應(yīng)的包裝類型對象,調(diào)用其API new Number(n).toFixed(2) => 345.68 4. 執(zhí)行后,包裝類型對象自動釋放 new Number釋放!29.OOP面向?qū)ο笕筇攸c: 封裝,繼承,多態(tài)
繼承:
原型對象:
內(nèi)置類型的原型對象:
一種類型: 包含兩部分:1. 構(gòu)造函數(shù): 創(chuàng)建該類型的子對象 2. 原型對象: 保存所有子對象的共有成員解決瀏覽器兼容性問題: 舊瀏覽器無法使用新API
1. 判斷當(dāng)前瀏覽器對應(yīng)類型的原型對象中是否包含該API 2. 如果不包含,則自定義該API,添加到對應(yīng)類型的原型對象中30.原型鏈:什么是: 由多級父對象,逐級繼承形成的鏈?zhǔn)浇Y(jié)構(gòu)
保存著: 所有對象的屬性
控制著: 對象屬性的使用順序:先自有,再共有鄙視: 如何判斷一個對象是數(shù)組類型? 有幾種方法
錯誤: typeof : 只能區(qū)分原始類型,函數(shù),無法進(jìn)一步區(qū)分引用類型對象的具體類型名
正確: 4種:判斷原型對象:
obj.__proto__==Array.prototype
Array.prototype.isPrototypeOf(obj)判斷構(gòu)造函數(shù):
obj.constructor==Array
obj instanceof Array問題: 不嚴(yán)格, 不但檢查直接父對象,且檢查整個原型鏈
判斷對象內(nèi)部的class屬性
class屬性: 對象內(nèi)部的專門記錄對象創(chuàng)建時的類型名的屬性
問題1: class屬性是內(nèi)部屬性,無法用.直接訪問
解決: 唯一的辦法: Object.prototype.toString()
問題2: 每種類型的原型對象都重寫了各自不同的toString()方法,子對象無法調(diào)用到Object.prototype.toString()
解決: fun.call(obj) 讓obj強(qiáng)行調(diào)用任何一個funObject.prototype.toString.call(obj) 在執(zhí)行的一瞬間: obj.toString() 結(jié)果:"[object Class]"鄙視: 何時將方法定義在原型對象中,何時將方法定義在構(gòu)造函數(shù)上
實例方法和靜態(tài)方法:
實例方法: 必須該類型的子對象才能調(diào)用的方法
比如: arr.sort() arr.push()
何時: 只要要求必須該類型的子對象才能調(diào)用
如何: 所有放在原型對象中的方法都是實例方法
靜態(tài)方法: 不需要創(chuàng)建該類型的子對象,任何對象都可使用的方法。
比如: Array.isArray(fun)Array.isArray(date) Array.isArray(obj)何時: 不確定將來調(diào)用該函數(shù)的對象類型時
31.多態(tài):
如何: 添加到構(gòu)造函數(shù)對象上的方法都是靜態(tài)方法??赏ㄟ^構(gòu)造函數(shù).靜態(tài)方法方式直接調(diào)用!什么是: 一個方法在不同情況下表現(xiàn)出不同的狀態(tài)
包括:重載overload:
重寫override:
32.自定義繼承:
什么是: 如果子對象覺得從父對象繼承來的成員不好用,可在本地定義同名的自有成員,覆蓋父對象的成員
為什么: 覺得從父對象繼承來的成員不好用
何時: 只要覺得從父對象繼承來的成員不好用
如何: 在本地定義同名的自有成員只修改一個對象的父對象
obj.__proto__=father
Object.setPrototypeOf(obj,father)修改所有子對象的父對象:
構(gòu)造函數(shù).prototype=father
時機(jī): 在創(chuàng)建子對象之前換!
兩種類型間的繼承:
何時: 發(fā)現(xiàn)多個類型之間擁有部分相同的屬性結(jié)構(gòu)和方法定義時,都要抽象父類型出來
如何: 2步:
定義抽象父類型: 2步:
定義構(gòu)造函數(shù)保存公共的屬性結(jié)構(gòu)
定義原型對象保存公共的方法
讓子類型繼承父類型: 2步:
在子類型構(gòu)造函數(shù)中借用父類型構(gòu)造函數(shù)
錯誤: 直接調(diào)用: Flyer(fname,speed)
原因: Flyer不用.不用new調(diào)用,其中的this默認(rèn)指window,Flyer中所有屬性泄露到全局
正確: 用call將正確的this注入到Flyer中,代替錯誤的this
如何: Flyer.call(正確的this, fname,speed)讓子類型原型對象繼承父類型原型對象
33.ECMAScript6
Object.setPrototypeOf(子類型原型,父類型原型)
嚴(yán)格模式:
什么是: 比普通js運行機(jī)制要求更嚴(yán)格的模式
為什么: 普通的js運行機(jī)制有很多廣受詬病的缺陷
何時: 今后所有項目必須運行在嚴(yán)格模式下如果新項目,整個js文件啟用嚴(yán)格模式
舊項目,逐個函數(shù)啟用嚴(yán)格模式
如何:
在script或整個js文件頂部,添加"use strict";
在函數(shù)內(nèi)頂部,添加"use strict";
規(guī)則: 4個:
禁止給未聲明的變量賦值
將靜默失敗升級為錯誤
普通函數(shù)或匿名函數(shù)自調(diào)中的this默認(rèn)不再指向window,而是undefined
禁止使用arguments, arguments.callee,...
補(bǔ): arguments.callee 自動獲得當(dāng)前正在調(diào)用的函數(shù)本身
34.保護(hù)對象:
禁用,說明強(qiáng)烈不推薦使用遞歸!保護(hù)對象的屬性:
ES5將對象屬性分為:
命名屬性: 可用.直接訪問到的屬性
數(shù)據(jù)屬性: 直接存儲屬性值的屬性
保護(hù)數(shù)據(jù)屬性: 4大特性:一個屬性包含四大特性:{ value: 實際保存屬性值, writable: true/false, //只讀 enumerable: true/false, //不可遍歷 //不是徹底隱藏,用.依然可訪問! configurable:true/false //1. 禁止刪除 //2. 禁止修改其它特性 //一旦改為false,不可逆 } 獲取一個屬性的四大特性: var attrs=Object.getOwnPropertyDescriptor(obj,"屬性") 修改四大特性: Object.defineProperty(obj,"屬性",{ 四大特性:值 }) 簡寫: Object.defineProperties(obj,{ 屬性名:{ 特性:值, 特性:值, }, 屬性名:{ ... : ... } })訪問器屬性: 不直接存儲屬性值,僅提供對另一個數(shù)據(jù)屬性的保護(hù)
何時: 只要對一個屬性提供自定義規(guī)則的保護(hù)
如何:添加: 只能用Object.defineProperty和defineProperties添加 四大特性: { get(){ return this.數(shù)據(jù)屬性 } set(val){ 如果驗證val通過 this.數(shù)據(jù)屬性=val 否則 報錯 } enumerable: configurable: }如何使用: 同普通的數(shù)據(jù)屬性用法一樣!
在取值時,自動調(diào)用訪問器屬性內(nèi)部的get 在賦值時,自動調(diào)用訪問器屬性內(nèi)部的set方法,同時將等號右邊的新值,交給val參數(shù)問題: enumerable只能防住for in,防不住.,依然可用.直接修改被保護(hù)的數(shù)據(jù)屬性
解決:
內(nèi)部屬性: 不能用.直接訪問到的屬性
比如: class proto保護(hù)對象的結(jié)構(gòu): 3種
防擴(kuò)展: 禁止給對象添加新屬性
Object.preventExtensions(obj)
原理: 內(nèi)部屬性: extensible:truepreventExtensions將extensible改為false
密封: 在防擴(kuò)展同時,禁止刪除現(xiàn)有屬性
Object.seal(obj)
原理: 1. 將extensible改為false,禁止擴(kuò)展2. 自動將所有屬性的configurable都改為false
凍結(jié): 在密封的同時,禁止修改一切屬性值
Object.freeze(obj)
原理: 1. 兼具密封的所有功能2. 又將每個屬性的writable自動改為false!
Object.create()
僅用父對象,就可創(chuàng)建子對象,
同時還可為子對象擴(kuò)展自有屬性
var child=Object.create(father,{
//Object.defineProperties
屬性名:{特性:值, 特性:值,}
})
鄙視: 描述Object.create的執(zhí)行原理創(chuàng)建空對象child
自動設(shè)置child的__proto__為father
為child擴(kuò)展新的自有屬性
35.call/apply/bind替換函數(shù)中不想要的this!
36.數(shù)組API:
call/apply: 立刻調(diào)用函數(shù),并臨時替換中的this為指定對象
何時: 只要調(diào)用函數(shù)時,函數(shù)中的this不是想要的就用call換成想要的
如果傳入函數(shù)的參數(shù),是以數(shù)組形式,整體傳入
就用.apply(obj,arr)
bind: 基于原函數(shù),創(chuàng)建一個新函數(shù),并永久綁定this為指定對象
何時: 不會立刻調(diào)用的函數(shù)(回調(diào)函數(shù))中的this,不是想要的,就可用bind創(chuàng)建一個新函數(shù),并永久綁定this!判斷:
判斷數(shù)組中所有元素是否都符合條件
arr.every(function(elem,i,arr){//elem: 當(dāng)前元素值 //i: 當(dāng)前位置 //arr: 當(dāng)前數(shù)組對象 return 判斷條件})
判斷數(shù)組中是否包含符合條件的元素
arr.some(function(elem,i,arr){return 判斷條件})
遍歷:
forEach: 對原數(shù)組中每個元素執(zhí)行相同的操作
arr.forEach(function(elem,i,arr){
arr[i]=新值
})map: 依次取出原數(shù)組中每個元素執(zhí)行相同操作后,放入新數(shù)組。原數(shù)組不變
arr.map(function(elem,i,arr){
return 新值
})過濾和匯總:
過濾: 復(fù)制出原數(shù)組中符合條件的元素,放入新數(shù)組返回
var subs=arr.filter(function(elem,i,arr){
return 判斷條件
})匯總: 將原數(shù)組中所有值統(tǒng)計出一個最終結(jié)論
37.let: 代替var
var result=arr.reduce(function(prev,elem,i,arr){
//prev: 截止到目前,之前的臨時匯總值
return prev+elem;
})為什么
問題1: 聲明提前, 破壞程序原有執(zhí)行順序
解決: let禁止在聲明之前,提前使用該變量
問題2: js沒有塊級作用域, 塊內(nèi)的變量,會污染到塊外
解決: let會將當(dāng)前所在if/for/while...(){}變成塊級作用域后果: 塊內(nèi)的let出的變量不會影響外部!原理: 其實let就是匿名函數(shù)自調(diào)!
38.參數(shù)增強(qiáng):
let與for循環(huán),可形成閉包的效果
強(qiáng)調(diào): 原來塊內(nèi)外都可使用的變量,出了塊,就不能用了!默認(rèn)值: function fun(參數(shù)1, 參數(shù)2,...,參數(shù)n=默認(rèn)值)
強(qiáng)調(diào): 帶默認(rèn)值的參數(shù)必須定義在列表末尾
原理: 參數(shù)n=參數(shù)n||默認(rèn)值;
rest: 代替了arguments
何時: 當(dāng)函數(shù),不確定參數(shù)個數(shù)時——重載
為什么: arguments的缺點:類數(shù)組對象,不是數(shù)組
只能后去全部,不能有選擇的分段獲取
如何: 定義函數(shù)時: function fun(參數(shù)1,參數(shù)2,..., ...數(shù)組名)
數(shù)組名, 是一個純正的數(shù)組,且可有選擇的分段獲取
原理: var arr=[].slice.call(arguments[,starti]);//將類數(shù)組對象轉(zhuǎn)為數(shù)組
spread: 代替apply
為什么: apply雖然可打散數(shù)組類型參數(shù)為單個值,但是必須和替換this的操作捆綁使用
何時: 只要僅需要打散數(shù)組類型參數(shù)為單個值時
如何: 調(diào)用時: fun(參數(shù)值1,參數(shù)值2,...數(shù)組)箭頭函數(shù): 代替回調(diào)函數(shù)中的function
何時: 只要回調(diào)函數(shù),都不再使用function,而是使用箭頭函數(shù)
如何:去function改=>
如果只有一個參數(shù),可省略()
如果函數(shù)體只有一句話,則{}可省略
更簡化: 如果僅有的一句話還是return,可省略return特點: 內(nèi)外共用同一個this ——代替bind
40.模板字符串: 代替+號拼接字符串
問題: 如果反而希望內(nèi)外this不通用時,就不能用箭頭函數(shù)ESLint規(guī)定,不允許使用+拼接字符串
如何:定義模板: 左右模板內(nèi)容都必須放在``中
在模板中嵌入變量或表達(dá)式,動態(tài)生成內(nèi)容:
41.解構(gòu): 簡化批量賦值
模板內(nèi),可用${...}嵌入任何合法的js變量或語句什么是: 將一個對象/數(shù)組中的成員和元素,分別提取出來,多帶帶使用。
為什么: 避免反復(fù)使用對象名/數(shù)組名
何時: 只要希望將一個大的對象或數(shù)組中的每個成員多帶帶取出使用時
如何: 3種:數(shù)組解構(gòu): 下標(biāo)對下標(biāo)
對象解構(gòu): 屬性對屬性
參數(shù)解構(gòu): 屬性對屬性
42.for...of 在特定情況下,代替for循環(huán)
定義函數(shù)時:
問題: 普通函數(shù)的參數(shù)列表的順序和個數(shù)是固定的
解決: 使用對象語法定義參數(shù)列表
優(yōu)點: 將來傳入的參數(shù)個數(shù),順序與對象列表無關(guān)
調(diào)用函數(shù): 也用對象語法傳入?yún)?shù)
賦值過程中,采用對象結(jié)構(gòu)的方式,為參數(shù)變量賦值什么是: 依次遍歷數(shù)組/類數(shù)組對象中每個元素的值
vs for...in: 依次遍歷關(guān)聯(lián)數(shù)組/對象中每個成員的屬性名
何時: 如果希望從頭到尾遍歷整個數(shù)組或類數(shù)組對象
如何:for(var elem of arr){ elem }局限: 無法獲得當(dāng)前位置; 無法控制遍歷的進(jìn)度/順序; 無法有選擇的遍歷部分
43.class: 代替?zhèn)鹘y(tǒng)的封裝,繼承,多態(tài)的語法封裝:
class Student { constructor(sname,sage){ ... ... } intr (){//Student.prototype.intr } fun (){ } }繼承:
class Flyer { constructor(fname,speed){ ... ... } fly (){ ... ... } } class Plane extends Flyer{ constructor(fname,speed,score){ //super指向父類型構(gòu)造函數(shù),且自動替換this super(fname,speed) ... ... } getScore (){ ... ... } }靜態(tài)方法:
class User{ constructor(uname,upwd){ this.uname=uname; this.upwd=upwd; } save(){//保存在User.prototype中的實例方法 console.log("保存當(dāng)前對象"); } static findOne(){//靜態(tài)方法,定義在構(gòu)造函數(shù)上 return new User(); } } var user=new User(...); user.save();//調(diào)用實例方法 User.findOne();//調(diào)用靜態(tài)方法44.Promise: 解決: 回調(diào)地獄什么是callback hell: 由于使用參數(shù)傳遞回調(diào)函數(shù),導(dǎo)致步驟多時,參數(shù)的嵌套層級很深。
何時: 只要異步調(diào)用,可能發(fā)生延遲時,都要用Promise代替?zhèn)鹘y(tǒng)參數(shù)callback
如何: 定義時function 第一件事(){ return new Promise(fn=>{ 第一件事的內(nèi)容 fn() }) } function 第二件事(){ return new Promise(fn=>{ 第二件事的內(nèi)容 fn() }) } function 第三件事(){ 第三件事的內(nèi)容 }調(diào)用時:
第一件事()//return Promise(fn) .then(第二件事)//return Promise(fn) .then(第三件事)鄙視題:
將類數(shù)組對象復(fù)制為數(shù)組:
var arr2=Array.prototype.slice.call(arguments)
將類數(shù)組對象復(fù)制為數(shù)組,并選取指定位置的剩余元素
var arr2= Array.prototype.slice.call(arguments,starti)相當(dāng)于arguments.slice(starti)其實更簡單的: var arr2= [].slice.call(arguments,starti)
promise中的錯誤處理:
其實: new Promise(可接收2件事).then( ) .catch( )new Promise((正常函數(shù),出錯函數(shù))=>{
如果順利執(zhí)行: 調(diào)用正常() 否則 調(diào)用出錯()})
等待多個任務(wù)完成
前提: 每個任務(wù)都必須都返回Promise
如何: Promise.all([task1(), task2(),... ]).then(()=>{所有任務(wù)完成后才執(zhí)行的任務(wù)})
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://hztianpu.com/yun/93940.html
摘要:前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術(shù)做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術(shù)做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要:獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼,也會把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項目地址 https:...
摘要:整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實驗室前端代碼規(guī)范風(fēng)格指南這一次,徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 3373·2021-11-22 14:44
閱讀 1209·2021-11-16 11:53
閱讀 1349·2021-11-12 10:36
閱讀 804·2021-10-14 09:43
閱讀 3839·2019-08-30 15:55
閱讀 3468·2019-08-30 14:14
閱讀 1840·2019-08-26 18:37
閱讀 3486·2019-08-26 12:12