javascript
JS高级课堂笔记
JS高級(jí)課堂筆記
- 數(shù)據(jù)的特點(diǎn)
 - 問題:`var a = xxx;`,a 內(nèi)存中到底保存的是什么?
 - 關(guān)于引用變量的賦值問題
 - 問題:在 js 調(diào)用函數(shù)時(shí)傳遞變量參數(shù)時(shí),是值傳遞還是引用傳遞?
 - 問題:js引擎如何管理內(nèi)存?
 - 為什么要用對(duì)象?
 - 對(duì)象的組成:
 - 什么是函數(shù)?
 - 為什么要使用函數(shù)?
 - 如何調(diào)用(執(zhí)行)函數(shù)?
 - 代碼風(fēng)格:是否加分號(hào)
 - 什么叫隔離變量?
 - 作用域和執(zhí)行上下文的區(qū)別
 - 函數(shù)執(zhí)行完后,函數(shù)內(nèi)部聲明的局部變量是否還存在?
 - 在函數(shù)外部能直接訪問函數(shù)內(nèi)部的局部變量嗎?
 - 內(nèi)存溢出與內(nèi)存泄露
 - 閉包使用場(chǎng)景:
 - 節(jié)流的使用場(chǎng)景:
 - 防抖的使用場(chǎng)景:
 - try{}catch(error){} 所對(duì)應(yīng)的error
 - 對(duì)象拓展 Object.is()
 - 創(chuàng)建數(shù)組的四種方式
 - for 循環(huán)用于遍歷數(shù)組
 - 解構(gòu)賦值
 - 怎樣優(yōu)化網(wǎng)頁性能?
 - 自己實(shí)現(xiàn)性能測(cè)試(只供參考,不能作為參考標(biāo)準(zhǔn))
 - 一個(gè) 6~16位的字符串,必須同時(shí)包含有大小寫字母和數(shù)字。
 - 1-10為必須包含數(shù)字、字母、下劃線。必須以下劃線開頭。
 - 如何改變 this 指向
 - Promise 的缺點(diǎn)是什么
 - localStorage 的使用場(chǎng)景
 - cookie的使用場(chǎng)景
 - 請(qǐng)求體參數(shù)有兩種編碼形式:content-type
 - xhr 和 fetch的區(qū)別
 - axios發(fā)送請(qǐng)求
 - slice, substr 和 substring 的區(qū)別
 - 請(qǐng)求攔截器和響應(yīng)攔截器
 - 總結(jié) this 指向(熊鍵)
 - 談一談閉包(熊鍵)
 - 談一談跨域(熊健)
 - 談?wù)?js 異步代碼執(zhí)行機(jī)制(熊鍵)
 - 什么是埋點(diǎn)?
 - includes與indexOf()的區(qū)別
 - 高效學(xué)習(xí)三部曲(適用于任何行業(yè)):找準(zhǔn)知識(shí)體系,刻意練習(xí),及時(shí)反饋。
 - 圖片底部空白問題
 - 元素的顯示與隱藏:
 - 瀏覽器輸入 URL 按下 enter 發(fā)生了什么
 - 比較
 - 對(duì)象里面的屬性是否可以為數(shù)字?
 - 對(duì)象的屬性名不能是一個(gè)對(duì)象
 - Map 結(jié)構(gòu)
 - new 做了什么?
 - == 比較
 - 變量計(jì)算-類型轉(zhuǎn)換
 - form 表單怎么阻止重復(fù)提交?
 - 懶加載大量數(shù)據(jù)的時(shí)候加載不出來的情況怎么優(yōu)化?
 - js 的垃圾回收機(jī)制。
 - 說說什么情況會(huì)造成內(nèi)存泄露?
 - TAPD跟禪道:工作中的 bug 處理。
 - 關(guān)于axios
 - JSON對(duì)象的方法:
 - yarn 基本指令
 - 其他
 - 1. 原型鏈:查找變量的過程。由多級(jí)父對(duì)象,逐級(jí)繼承,形成的鏈?zhǔn)浇Y(jié)果。
 - 2. alert 彈出來的結(jié)果都會(huì)進(jìn)行內(nèi)部 toString 轉(zhuǎn)換,輸出為字符串。
 - 3. 枚舉、迭代、遍歷。
 - 4. 無論客戶關(guān)閉了瀏覽器還是電腦,只要還在 `maxAge`秒之前,登錄網(wǎng)站時(shí)該 Cookie 仍然有效。
 - 5. 代理(proxy):就是通過一個(gè)對(duì)象來操作另一個(gè)對(duì)象。
 - 6. 所有對(duì)象都是實(shí)例對(duì)象。都是 new 某個(gè)東西產(chǎn)生的。
 - 7. react 中使用 ``如果你指定了 button 的 type 屬性,要么不指定,要么指定 submit,不要指定為`type = ‘button’`。
 - 8. property 和 attribute
 - 9. 瀏覽器內(nèi)核:支撐瀏覽器運(yùn)行的最核心的程序。
 - 10. 注意:三元運(yùn)算符中不能寫 return。
 - 11. 所有的字符串的方法都是返回一個(gè)新的字符串。
 - 12. this += n 也就是 this = this + n; 這樣會(huì)報(bào)錯(cuò)的,this 不能像變量一樣賦值的。
 - 13. 如 `n = Number(n) && (isNaN(n) ? 0 : n);` n = Number(n) 賦值這個(gè)操作,永遠(yuǎn)都為 true。
 
數(shù)據(jù)的特點(diǎn)
問題:var a = xxx;,a 內(nèi)存中到底保存的是什么?
關(guān)于引用變量的賦值問題
- 兩個(gè)或多個(gè)引用變量指向同一個(gè)對(duì)象,通過一個(gè)變量修改對(duì)象內(nèi)部數(shù)據(jù),其他所有變量看到的是修改之后的數(shù)據(jù)。
 - 兩個(gè)或多個(gè)引用變量指向同一個(gè)對(duì)象,讓其中一個(gè)引用變量指向另一個(gè)對(duì)象,另一個(gè)引用變量依然指向前一個(gè)對(duì)象。
 
問題:在 js 調(diào)用函數(shù)時(shí)傳遞變量參數(shù)時(shí),是值傳遞還是引用傳遞?
理解一:都是值(基本值/地址值)傳遞。
理解二:可能是值傳遞,也可能是引用傳遞(地址值)。
var a = 3; function fn(a) {a = a + 1; }; fn(a); console.log(a); // 3問題:js引擎如何管理內(nèi)存?
內(nèi)存生命周期:
- 分配小內(nèi)存空間,得到它的使用權(quán)。
 - 存儲(chǔ)數(shù)據(jù),可以反復(fù)進(jìn)行操作。
 - 釋放當(dāng)前的小內(nèi)存空間。
 
釋放內(nèi)存:
- 局部變量:函數(shù)執(zhí)行完自動(dòng)釋放。
 - 對(duì)象:稱為垃圾對(duì)象→垃圾回收機(jī)制回收。
 
什么是對(duì)象?
為什么要用對(duì)象?
統(tǒng)一管理多個(gè)數(shù)據(jù)。
對(duì)象的組成:
什么是函數(shù)?
為什么要使用函數(shù)?
如何調(diào)用(執(zhí)行)函數(shù)?
代碼風(fēng)格:是否加分號(hào)
是否加分號(hào)是編碼風(fēng)格問題,沒有應(yīng)不應(yīng)該,只有自己喜歡不喜歡。
在下面2中情況下不加分號(hào)會(huì)有問題:
小括號(hào)開頭的前一條語句。
var a = 3 ;(function () {}) // 不加分號(hào)報(bào)錯(cuò):var a = 3(function () {})中方括號(hào)開頭的前一條語句。
var b = 4 ;[1, 3].forEach(function () {}) // 報(bào)錯(cuò)的理解:var b = 4[1, 3].forEach(function () {})解決辦法:在行首加分號(hào)
讀取對(duì)象的屬性值時(shí):會(huì)自動(dòng)到原型鏈中查找。
設(shè)置對(duì)象的屬性值時(shí):不會(huì)查找原型鏈,如果當(dāng)前對(duì)象中沒有此屬性,直接添加此屬性并設(shè)置其值。
方法一般定義在原型中,屬性一般通過構(gòu)造函數(shù)定義在對(duì)象本身上。
function Fn () {} Fn.prototype.a = 'xxx'; var fn1 = new Fn(); console.log(fn1.a, fn1);var fn2 = new Fn(); fn2.a = 'yyy'; console.log(fn1.a, fn2.a, fn2);原型鏈測(cè)試題1:
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-M61GBCQd-1663432794797)(js高級(jí)課堂筆記 .assets/無標(biāo)題.png)]
function A () {}A.prototype.n = 1;var b = new A();A.prototype = {n: 2,m: 3};var c = new A();console.log(b.n, b.m, c.n, c.m)// 1 undefined 2 3原型鏈測(cè)試題2:
var F = function () {Object.prototype.a = function () {console.log('a()')}Function.prototype.b = function(){console.log('b()')}}var f = new F()f.a()f.b()F.a()F.b()什么叫隔離變量?
隔離變量:不同作用域下同名變量不會(huì)被沖突。
作用域和執(zhí)行上下文的區(qū)別
作用域是靜態(tài)的,只要函數(shù)定義好了就一直存在,且不會(huì)再改變。
執(zhí)行上下文是動(dòng)態(tài)的,調(diào)用函數(shù)時(shí)創(chuàng)建,函數(shù)調(diào)用結(jié)束時(shí)會(huì)自動(dòng)釋放。
函數(shù)執(zhí)行完后,函數(shù)內(nèi)部聲明的局部變量是否還存在?
一般是不存在,存在于閉包中的變量才可能存在。
在函數(shù)外部能直接訪問函數(shù)內(nèi)部的局部變量嗎?
不能,但我們可以通過閉包讓外部操作它。
內(nèi)存溢出與內(nèi)存泄露
內(nèi)存溢出:
內(nèi)存泄露:
- 意外的全局變量。
 - 沒有及時(shí)清理的計(jì)時(shí)器或回調(diào)函數(shù)。
 - 閉包
 
閉包使用場(chǎng)景:
節(jié)流的使用場(chǎng)景:
防抖的使用場(chǎng)景:
try{}catch(error){} 所對(duì)應(yīng)的error
Error.name 的六種值對(duì)應(yīng)的信息:
對(duì)象拓展 Object.is()
全等判斷有兩個(gè)問題:
對(duì)象拓展 is 方法:
除此之外,is 方法 和 === 是一樣的。
創(chuàng)建數(shù)組的四種方式
for 循環(huán)用于遍歷數(shù)組
for in 循環(huán)用于遍歷對(duì)象的key
for of 循環(huán)遍歷實(shí)現(xiàn)了迭代器接口的對(duì)象(不能直接遍歷對(duì)象)
迭代器接口對(duì)象一旦遍歷完成,就無法再遍歷了。
解構(gòu)賦值
解構(gòu)賦值,解構(gòu)出來的數(shù)據(jù)會(huì)創(chuàng)建全局變量,因此工作中,常常配合模塊化開發(fā)去使用(這時(shí)相當(dāng)于局部變量了)。
數(shù)組依賴的是索引,對(duì)象依賴的是屬性名。
解構(gòu)語法不會(huì)影響原來的數(shù)組。
怎樣優(yōu)化網(wǎng)頁性能?
自己實(shí)現(xiàn)性能測(cè)試(只供參考,不能作為參考標(biāo)準(zhǔn))
任何的代碼性能測(cè)試都是和測(cè)試的環(huán)境有關(guān)系的,例如CUP、內(nèi)存、GPU等電腦當(dāng)前性能不會(huì)有相同的情況。
不同瀏覽器也會(huì)導(dǎo)致性能上的不同。
console.profile() 在火狐瀏覽器中安裝FireBug,可以更精準(zhǔn)的獲取到程序每一個(gè)步驟所消耗的時(shí)間。
一個(gè) 6~16位的字符串,必須同時(shí)包含有大小寫字母和數(shù)字。
編寫一條正則,用來驗(yàn)證此規(guī)則:一個(gè) 6~16位的字符串,必須同時(shí)包含有大小寫字母和數(shù)字。(一般用于密碼)
// 問號(hào)(?): 0次或1次let reg = /^(?![a-zA-Z]+$)(?![a-z0-9]+$)(?![A-Z0-9]+$)[a-zA-Z0-9]{6,10}$/;console.log(reg.test('aaabbb')); // falseconsole.log(reg.test('111aaa')); // falseconsole.log(reg.test('111AAA')); // falseconsole.log(reg.test('111aaaBBB')); // true1-10為必須包含數(shù)字、字母、下劃線。必須以下劃線開頭。
let reg = ^/(?=_)\w{1,10}$/; console.log(reg.test('_aaabbb2_')); // true console.log(reg.test('111aaa')); // false console.log(reg.test('_3')); // true如何改變 this 指向
-  
使用 ES6 的箭頭函數(shù)。
箭頭函數(shù)沒有 this,所以也不能用 call()、apply()、bind() 方法改變 this 的指向。
需要通過查找作用域鏈來確定 this 的值,如果箭頭函數(shù)被非箭頭函數(shù)包含,this 綁定的就是最近一層非箭頭函數(shù)的 this。
 -  
在函數(shù)內(nèi)部使用 _this = this。
先將調(diào)用這個(gè)函數(shù)的對(duì)象保存在變量 _this 中,然后在函數(shù)中都使用這個(gè) _this
 -  
使用 call、apply、bind。
 -  
new 實(shí)例化一個(gè)對(duì)象。
用 new 調(diào)用函數(shù),改變指向 new 的實(shí)例對(duì)象。
 
Promise 的缺點(diǎn)是什么
localStorage 的使用場(chǎng)景
cookie的使用場(chǎng)景
cookie 一般要配合 session一起使用,session 的使用場(chǎng)景:
請(qǐng)求體參數(shù)有兩種編碼形式:content-type
urlencoded
概念:
- urlencoded 格式,又叫 form 格式、x-www-form-urlencoded 格式。
 - 它是一種表單格式。
 
組成格式:
- 鍵值對(duì)組成
 - 鍵和值之間用 = :name=poloyy
 - 多個(gè)鍵值對(duì)之間用 & :name=poloyy&age=19
 
實(shí)際例子:
瀏覽器百度搜索:baidu.com/s?ie=UTF-8&wd=baidu
JSON:這個(gè) JSON 太厲害了,看詳解。
{"name" :"polo","age":35,"smoke":false }詳解鏈接
xhr 和 fetch的區(qū)別
xhr 和 fetch 都是 window 身上的方法,Ajax 請(qǐng)求只在瀏覽器端發(fā)送,服務(wù)器端不行(服務(wù)器端,沒頁面,也沒有 window)。服務(wù)器端可以發(fā) HTTP 請(qǐng)求。而 axios 可以滿足瀏覽器端和服務(wù)器端都可以發(fā)送 Ajax 請(qǐng)求。
fetch發(fā)送網(wǎng)絡(luò)請(qǐng)求
axios發(fā)送請(qǐng)求
axios 完整版:
btn1.onclick = () = {axios({method: 'GET',url: 'http://localhost:3000/get_persons',}).then(response => console.log(response.data),error => console.log(error)) }axios 精簡版:
btn1.onclick = () = {axios.get('http://localhost:3000/get_persons').then(response => console.log(response.data),error => console.log(error)) }slice, substr 和 substring 的區(qū)別
首先,他們都接收兩個(gè)參數(shù),slice和substring接收的是起始位置和結(jié)束位置(不包括結(jié)束位置),而substr接收的則是起始位置和所要返回的字符串長度。
解析地址
請(qǐng)求攔截器和響應(yīng)攔截器
請(qǐng)求攔截器:在請(qǐng)求還沒有發(fā)出去之前:
定義:在真正發(fā)請(qǐng)求前執(zhí)行的一個(gè)回調(diào)函數(shù)。
作用:
對(duì)請(qǐng)求的配置做一些處理:data、header,界面 loading 提示。
界面 loading 提示:在發(fā)請(qǐng)求的時(shí)候,我可以在請(qǐng)求攔截器里面加載一個(gè)頁面,一直加載中,然后等著數(shù)據(jù)回來的時(shí)候,要經(jīng)過響應(yīng)攔截器,在響應(yīng)攔截器中把 loading 取消掉。這樣就可以展示一個(gè)比較好的 loading 效果。這樣做有個(gè)比較大的優(yōu)勢(shì)就是,我只要寫了一個(gè)請(qǐng)求攔截器和一個(gè)響應(yīng)攔截器,在我這個(gè)項(xiàng)目里面,只要我敢發(fā)請(qǐng)求,以后都走這個(gè)請(qǐng)求攔截器和這個(gè)響應(yīng)攔截器,所有請(qǐng)求都加上了 loading 或者 進(jìn)度條 的效果。
對(duì)請(qǐng)求進(jìn)行檢查,根據(jù)具體的條件決定是否真正發(fā)送請(qǐng)求。
多個(gè)請(qǐng)求攔截器(axios.interceptors.request.use()):后指定的攔截器先工作,先指定的攔截器后工作。實(shí)際工作中,一般只會(huì)配置一個(gè)請(qǐng)求攔截器。
多個(gè)響應(yīng)攔截器(axios.interceptors.response.use()):先指定的攔截器先工作,后指定的攔截器后工作。
定義:得到響應(yīng)之后執(zhí)行的一個(gè)回調(diào)函數(shù)。
作用:
總結(jié) this 指向(熊鍵)
什么是 this?
- 一個(gè)關(guān)鍵字,是一個(gè)引用變量。
 - 函數(shù)中可以出現(xiàn) this (全局的 this 指向 window)。
 - this 指向其所在函數(shù)的調(diào)用者,如果沒有調(diào)用者則指向 window。
 - this 的指向是在調(diào)用函數(shù)的時(shí)候確定的。
 
this 指向(其實(shí)就是看函數(shù)的調(diào)用方式)。
this 默認(rèn)綁定 (函數(shù)默認(rèn)調(diào)用)。
定時(shí)器的 this 指向 window。
箭頭函數(shù)的 this:箭頭函數(shù)沒有自己的 this,箭頭函數(shù)內(nèi)部的 this 并不是調(diào)用時(shí)候指向的對(duì)象,而是定義函數(shù)時(shí)所在函數(shù)的 this 指向。
this 指向調(diào)用函數(shù)的上下文 (函數(shù)是上下文調(diào)用的)。
注意隱式丟失現(xiàn)象(通過一個(gè)上下文對(duì)象拿到了一個(gè)函數(shù),但是沒有調(diào)用,而是賦值給了其他人)。
this 指向?qū)嵗瘜?duì)象 (函數(shù)實(shí)例化調(diào)用)。
強(qiáng)制綁定:this 指向 call、apply、bind 修改的對(duì)象(函數(shù)是call、apply、bind調(diào)用的)。
談一談閉包(熊鍵)
什么是閉包:
函數(shù)嵌套函數(shù),閉包就是內(nèi)部嵌套的函數(shù)。
閉包就是包含被引用變量的 closure 對(duì)象,在嵌套的內(nèi)部函數(shù)中。
產(chǎn)生閉包的情況:
函數(shù)嵌套。
內(nèi)部函數(shù)引用外部函數(shù)的變量。
調(diào)動(dòng)外部函數(shù)。
閉包的作用:
延長了局部變量的生命周期。
可以在外部操作局部變量。
閉包的缺點(diǎn):
函數(shù)的局部變量占用內(nèi)存時(shí)間過長,容易造成內(nèi)存泄露。
解決:
談一談跨域(熊健)
同源:協(xié)議名、域名、端口號(hào)一致。
跨域:給不同源的地址發(fā)送 Ajax 請(qǐng)求。
解決跨域問題:
jsonp 原理: 就是利用 script 標(biāo)簽發(fā)送請(qǐng)求不受同源策略的限制,去給服務(wù)器發(fā)送請(qǐng)求,發(fā)送時(shí)要將一個(gè)定義好的函數(shù)名通過 callback=函數(shù)名的形式,上傳給服務(wù)器。服務(wù)器會(huì)響應(yīng)函數(shù)的調(diào)用。具體要響應(yīng)給瀏覽器的數(shù)據(jù),就是函數(shù)調(diào)用時(shí)的實(shí)參。瀏覽器拿到函數(shù)調(diào)用的字符串之后,會(huì)將這個(gè)字符串,放到對(duì)應(yīng)的 script 里面去執(zhí)行,執(zhí)行時(shí)會(huì)自動(dòng)將引號(hào)去掉。直接變成了一段 js 代碼。而這段 js 代碼就是函數(shù)調(diào)用。所以這時(shí)會(huì)去全局查找對(duì)應(yīng)的函數(shù)。找到了之后就執(zhí)行這個(gè)函數(shù),響應(yīng)的數(shù)據(jù),就直接賦值給形參了。在這個(gè)函數(shù)體中,就可以操作這個(gè)數(shù)據(jù)了。
jsonp 的注意點(diǎn):
jsonp 只能發(fā)送 get 請(qǐng)求。
jsonp 沒有兼容性問題。
要想實(shí)現(xiàn)跨域,需要后臺(tái)配合。
后端配合:用 jquery 隨機(jī)生成字符串,后臺(tái)將數(shù)據(jù)作為參數(shù)包裹在這個(gè)隨機(jī)字符串函數(shù)里作為參數(shù)傳遞到前臺(tái)。
cors(跨域資源共享): IE10 以上的瀏覽器才能使用。在真正發(fā)送 ajax 請(qǐng)求之前,瀏覽器會(huì)檢查是否同源,如果不同源,會(huì)自動(dòng)先給指定的服務(wù)器預(yù)請(qǐng)求一下,詢問是否支持 cors,如果服務(wù)器響應(yīng)支持,瀏覽器才會(huì)讓我們寫的 ajax 請(qǐng)求發(fā)送出去,響應(yīng)的時(shí)候就不再攔截了,如果服務(wù)器不支持 cors。瀏覽器就不會(huì)將我們的 ajax 發(fā)送出去。
cors 的注意點(diǎn):
IE10+ 才支持(有兼容性問題)。
可以使用 get/post 請(qǐng)求。
依然需要后臺(tái)配合。
后端配合:跨域資源共享(CORS, Cross-Origin Resource Sharing),本質(zhì)是設(shè)置響應(yīng)頭,使得瀏覽器允許跨域請(qǐng)求。
談?wù)?js 異步代碼執(zhí)行機(jī)制(熊鍵)
比如:定時(shí)器函數(shù)會(huì)被同步調(diào)用,里面計(jì)時(shí)任務(wù)和回調(diào)函數(shù)會(huì)交給瀏覽器定時(shí)器管理模塊去處理,
當(dāng)瀏覽器定時(shí)器管理模塊記錄時(shí)間到點(diǎn)了,會(huì)將回調(diào)函數(shù)添加回調(diào)隊(duì)列中,等待執(zhí)行。
等 JS 引擎執(zhí)行完全局所有代碼,才會(huì)開啟事件輪詢,輪詢回調(diào)隊(duì)列,執(zhí)行其中異步回調(diào)函數(shù),默認(rèn)按照順序依次執(zhí)行,先進(jìn)先出。
將整個(gè) script 當(dāng)做一個(gè)宏任務(wù)執(zhí)行。
執(zhí)行完一個(gè)宏任務(wù),先檢查是否有微任務(wù)要執(zhí)行。
需要所有微任務(wù)都執(zhí)行完,再檢查是否有宏任務(wù)要執(zhí)行。
執(zhí)行完一個(gè)宏任務(wù),先檢查是否有微任務(wù)要執(zhí)行。
什么是埋點(diǎn)?
埋點(diǎn):是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法。如:統(tǒng)計(jì)客戶點(diǎn)擊某個(gè)按鈕的次數(shù)。
includes與indexOf()的區(qū)別
- indexOf()返回的是數(shù)值,而includes()返回的是布爾值
 - indexOf() 不能判斷NaN,返回為-1 ,includes()則可以判斷
 
高效學(xué)習(xí)三部曲(適用于任何行業(yè)):找準(zhǔn)知識(shí)體系,刻意練習(xí),及時(shí)反饋。
圖片底部空白問題
產(chǎn)生的原因:圖片默認(rèn)的vertical-align:baseline(基線)。
解決:
博客鏈接
元素的顯示與隱藏:
display : none / block; 不占位置。
visibility : hidden / visible ; 占位置。
overflow : hidden ; 溢出隱藏。
瀏覽器輸入 URL 按下 enter 發(fā)生了什么
比較
數(shù)據(jù)類型比較:
== 數(shù)據(jù)類型不一樣
對(duì)象里面的屬性是否可以為數(shù)字?
對(duì)象里面的屬性是可以為數(shù)字的,用中括號(hào)來取就可以了:
var obj = {100: 99}; console.log(obj[100]) // 99對(duì)象的屬性名不能是一個(gè)對(duì)象
對(duì)象的屬性名不能是一個(gè)對(duì)象(遇到對(duì)象屬性名,會(huì)默認(rèn)轉(zhuǎn)換為字符串)
obj = {} arr = [12, 23] obj[arr] = 'xiaozhu' console.log(obj) // { '12,23': 'xiaozhu' }普通對(duì)象.toStirng 調(diào)取的是Object.prototype 上的方法(這個(gè)方法是用來檢測(cè)數(shù)據(jù)類型的):
obj = {} console.log(obj.toString()) // "[object Object]"Map 結(jié)構(gòu)
不過 es6 中的 map 支持屬性名是任意類型,包括對(duì)象,數(shù)組等。
- JavaScript 的對(duì)象(Object),本質(zhì)上是鍵值對(duì)的集合(Hash 結(jié)構(gòu)),但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來了很大的限制。
 - 為了解決這個(gè)問題,ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象,也是鍵值對(duì)的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。也就是說,Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng),Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng),是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu),Map 比 Object 更合適。
 
new 做了什么?
構(gòu)造函數(shù)中的 new,是 js 中內(nèi)置的。
new 做了什么?
? 1. 創(chuàng)建了一個(gè)對(duì)象
? 2. 調(diào)用構(gòu)造函數(shù),并把構(gòu)造函數(shù)的 this 指向了這個(gè)對(duì)象,這個(gè)對(duì)象就是當(dāng)前實(shí)例
? 3. 對(duì)象的隱式原型指向了當(dāng)前函數(shù)的顯式原型(構(gòu)成原型鏈)
? 4. 判斷構(gòu)造函數(shù)的返回值,如果是基本類型,則正常返回實(shí)例化對(duì)象,如果是對(duì)象類型,則返回當(dāng)前的對(duì)象 。
function _new(Fn, ...arg) {let obj = {};obj.__proto__ = Fn.prototype;Fn.call(obj, ...arg);return obj; } let sanmao = _new(Dog, '三毛'); 注意: let obj = {}; obj.__proto__ = Fn.prototype; 可以改寫為: let obj = Object.create(Fn.prototype);== 比較
== 進(jìn)行比較的時(shí)候,如果左右兩邊數(shù)據(jù)類型不一樣,則先轉(zhuǎn)換為相同的數(shù)據(jù)類型,然后再進(jìn)行比較,雙等(==)最終得到的是一個(gè)布爾值
{} == {} 兩個(gè)對(duì)象進(jìn)行比較,比較的是堆內(nèi)存的地址
null == undefined 相等的 / null === undefined 不相等
NaN == NaN 不相等 NaN 和誰都不相等
[12] == “12” 對(duì)象和字符串比較,是把對(duì)象 toString() 轉(zhuǎn)換為字符串后,再進(jìn)行比較
剩余所有情況在進(jìn)行比較的時(shí)候,都是轉(zhuǎn)換為數(shù)字(前提是數(shù)據(jù)類型不一樣):
- 對(duì)象轉(zhuǎn)數(shù)字:先轉(zhuǎn)換為字符串,然后在轉(zhuǎn)換為數(shù)字。
 - 字符串轉(zhuǎn)數(shù)字:只要出現(xiàn)一個(gè)非數(shù)字字符,結(jié)果就是 NaN。
 - 布爾轉(zhuǎn)數(shù)字:true 為 1,false 為 0。
 - null 轉(zhuǎn)數(shù)字:0。
 - undefined 轉(zhuǎn)數(shù)字:NaN。
 
變量計(jì)算-類型轉(zhuǎn)換
下面三種情況容易發(fā)生類型轉(zhuǎn)換:
字符串拼接。
如:const b = 100 + "10"; const c = true + "10";
==
如:100 == "100"; // true
if 語句和邏輯運(yùn)算
truly 變量:!!a === true 的變量 falsely 變量:!!a === false 的變量 以下是 falsely 變量。除此之外都是 truly 變量 !!0 === false !!NaN === false !!'' === false !!null === false !!undefined == false !!false === false // truly 變量 const a = true; if (a) {// ... } const b = 100 if (b) {// ... } // falsely 變量 const c = '' if (c) {// ... } const d = null if (d) {// ... } let e if (e) {// ... } // 邏輯判斷 console.log(10 && 0); // 0 console.log('' || 'abc'); // 'abc'form 表單怎么阻止重復(fù)提交?
**會(huì)引起表單重復(fù)提交的情況:**f5 刷新頁面,點(diǎn)擊瀏覽器后退,重復(fù)點(diǎn)擊提交按鈕。
前臺(tái):
后臺(tái):
**數(shù)據(jù)庫:**數(shù)據(jù)庫中做唯一性約束。
懶加載大量數(shù)據(jù)的時(shí)候加載不出來的情況怎么優(yōu)化?
js 的垃圾回收機(jī)制。
js 的垃圾回收機(jī)制就是為了防止內(nèi)存泄漏的,內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著,垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存。所以這里又涉及到變量的生命周期,當(dāng)一個(gè)變量的生命周期結(jié)束之后它所指向的內(nèi)存就應(yīng)該被釋放。
JS 有兩種變量,全局變量和在函數(shù)中產(chǎn)生的局部變量。局部變量的生命周期在函數(shù)執(zhí)行過后就結(jié)束了,此時(shí)便可將它引用的內(nèi)存釋放(即垃圾回收),但全局變量生命周期會(huì)持續(xù)到瀏覽器關(guān)閉頁面。所以當(dāng)我們過多的使用全局變量的時(shí)候也會(huì)導(dǎo)致內(nèi)存泄漏的問題。
說說什么情況會(huì)造成內(nèi)存泄露?
js 中:
vue 中:
如果在 created/mounted 中做了以下事情,記得在 beforeDestroy 中關(guān)閉:
TAPD跟禪道:工作中的 bug 處理。
TAPD跟禪道
tapd是騰訊公司的一個(gè)產(chǎn)品研發(fā)平臺(tái),全名叫做騰訊敏捷產(chǎn)品研發(fā)平臺(tái)。最初只是在內(nèi)部的人員才有資格接觸到,并且這個(gè)平臺(tái)已經(jīng)存在有12年之久,正式對(duì)公眾開放是在2017年。
禪道是第一款國產(chǎn)的開源項(xiàng)目管理軟件,她的核心管理思想基于敏捷方法scrum,內(nèi)置了產(chǎn)品管理和項(xiàng)目管理,同時(shí)又根據(jù)國內(nèi)研發(fā)現(xiàn)狀補(bǔ)充了測(cè)試管理、計(jì)劃管理、發(fā)布管理、文檔管理、事務(wù)管理等功能,在一個(gè)軟件中就可以將軟件研發(fā)中的需求、任務(wù)、bug、用例、計(jì)劃、發(fā)布等要素有序的跟蹤管理起來,完整地覆蓋了項(xiàng)目管理的核心流程。
關(guān)于axios
什么是 axios?
官方介紹:Axios 是一個(gè)基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
使用 Fetch 發(fā)送請(qǐng)求:
Fetch API 提供了一個(gè) JavaScript 接口,用于訪問和操縱 HTTP 管道的一些具體部分,例如請(qǐng)求和響應(yīng)。
**注意:**Fetch 是 js 原生的,es6 以后出來的,自帶 promise,不需要下載第三方包,直接用即可。
**缺點(diǎn):**有兼容性問題,IE 全部不兼容。目前沒有廣泛使用。
Axios 取消請(qǐng)求:
如果要取消請(qǐng)求的話,我們可以通過調(diào)用 XMLHttpRequest 對(duì)象上的 abort 方法來取消請(qǐng)求:
let xhr = new XMLHttpRequest(); xhr.open("GET", "https://developer.mozilla.org/", true); xhr.send(); setTimeout(() => xhr.abort(), 300);而對(duì)于 Axios 來說,我們可以通過 Axios 內(nèi)部提供的 CancelToken 來取消請(qǐng)求:
const CancelToken = axios.CancelToken; const source = CancelToken.source();axios.post('/user/12345', {name: 'semlinker' }, {cancelToken: source.token })source.cancel('Operation canceled by the user.'); // 取消請(qǐng)求,參數(shù)是可選的此外,你也可以通過調(diào)用 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 CancelToken,具體如下所示:
const CancelToken = axios.CancelToken; let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {cancel = c;}) });cancel(); // 取消請(qǐng)求Axios 如何取消請(qǐng)求?
當(dāng)請(qǐng)求方式、請(qǐng)求 URL 地址和請(qǐng)求參數(shù)都一樣時(shí),我們就可以認(rèn)為請(qǐng)求是一樣的。因此在每次發(fā)起請(qǐng)求時(shí),我們就可以根據(jù)當(dāng)前請(qǐng)求的請(qǐng)求方式、請(qǐng)求 URL 地址和請(qǐng)求參數(shù)來生成一個(gè)唯一的 key,同時(shí)為每個(gè)請(qǐng)求創(chuàng)建一個(gè)專屬的 CancelToken,然后把 key 和 cancel 函數(shù)以鍵值對(duì)的形式保存到 Map 對(duì)象中,使用 Map 的好處是可以快速的判斷是否有重復(fù)的請(qǐng)求:
import qs from 'qs'const pendingRequest = new Map(); // GET -> params;POST -> data const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&'); const cancelToken = new CancelToken(function executor(cancel) {if(!pendingRequest.has(requestKey)){pendingRequest.set(requestKey, cancel);} })當(dāng)出現(xiàn)重復(fù)請(qǐng)求的時(shí)候,我們就可以使用 cancel 函數(shù)來取消前面已經(jīng)發(fā)出的請(qǐng)求,在取消請(qǐng)求之后,我們還需要把取消的請(qǐng)求從 pendingRequest 中移除。現(xiàn)在我們已經(jīng)知道如何取消請(qǐng)求和如何判斷重復(fù)請(qǐng)求,下面我們來介紹如何取消重復(fù)請(qǐng)求。
JSON對(duì)象的方法:
JSON.stringify(obj/arr);
js 對(duì)象(數(shù)組) 轉(zhuǎn)換為 json 對(duì)象(數(shù)組)(字符串類型)
JSON.parse(json);
json 對(duì)象(數(shù)組)(字符串類型) 轉(zhuǎn)換為 js 對(duì)象(數(shù)組)
yarn 基本指令
yarn init:初始化一個(gè)項(xiàng)目。
yarn add + 包名:安裝一個(gè)依賴包。
yarn update + 包名:升級(jí)依賴包。
yarn update + 包名@version:升級(jí)指定版本的依賴包。
yarn remove + 包名:移除依賴包。
yarn install:安裝全部依賴包。
其他
1. 原型鏈:查找變量的過程。由多級(jí)父對(duì)象,逐級(jí)繼承,形成的鏈?zhǔn)浇Y(jié)果。
2. alert 彈出來的結(jié)果都會(huì)進(jìn)行內(nèi)部 toString 轉(zhuǎn)換,輸出為字符串。
3. 枚舉、迭代、遍歷。
4. 無論客戶關(guān)閉了瀏覽器還是電腦,只要還在 maxAge秒之前,登錄網(wǎng)站時(shí)該 Cookie 仍然有效。
5. 代理(proxy):就是通過一個(gè)對(duì)象來操作另一個(gè)對(duì)象。
6. 所有對(duì)象都是實(shí)例對(duì)象。都是 new 某個(gè)東西產(chǎn)生的。
7. react 中使用 <button></button>如果你指定了 button 的 type 屬性,要么不指定,要么指定 submit,不要指定為type = ‘button’。
8. property 和 attribute
property:操作屬性為布爾值的屬性。
attribute:操作屬性為非布爾值的屬性。
9. 瀏覽器內(nèi)核:支撐瀏覽器運(yùn)行的最核心的程序。
10. 注意:三元運(yùn)算符中不能寫 return。
11. 所有的字符串的方法都是返回一個(gè)新的字符串。
12. this += n 也就是 this = this + n; 這樣會(huì)報(bào)錯(cuò)的,this 不能像變量一樣賦值的。
13. 如 n = Number(n) && (isNaN(n) ? 0 : n); n = Number(n) 賦值這個(gè)操作,永遠(yuǎn)都為 true。
總結(jié)
                            
                        - 上一篇: 蓝牙模式-Inquiry and Pag
 - 下一篇: 南通全国计算机等级考试,南通大学2017