JS高級(jí)課堂筆記

• • 數(shù)據(jù)的特點(diǎn)
  • 問(wèn)題：`var a = xxx;`，a 內(nèi)存中到底保存的是什么？
  • 關(guān)于引用變量的賦值問(wèn)題
  • 問(wèn)題：在 js 調(diào)用函數(shù)時(shí)傳遞變量參數(shù)時(shí)，是值傳遞還是引用傳遞？
  • 問(wèn)題：js引擎如何管理內(nèi)存？
  • 為什么要用對(duì)象？
  • 對(duì)象的組成：
  • 什么是函數(shù)？
  • 為什么要使用函數(shù)？
  • 如何調(diào)用(執(zhí)行)函數(shù)？
  • 代碼風(fēng)格：是否加分號(hào)
  • 什么叫隔離變量？
  • 作用域和執(zhí)行上下文的區(qū)別
  • 函數(shù)執(zhí)行完后，函數(shù)內(nèi)部聲明的局部變量是否還存在？
  • 在函數(shù)外部能直接訪問(wèn)函數(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)頁(yè)性能？
  • 自己實(shí)現(xiàn)性能測(cè)試(只供參考，不能作為參考標(biāo)準(zhǔn))
  • 一個(gè) 6~16位的字符串，必須同時(shí)包含有大小寫字母和數(shù)字。
  • 1-10為必須包含數(shù)字、字母、下劃線。必須以下劃線開(kāi)頭。
  • 如何改變 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í)反饋。
  • 圖片底部空白問(wèn)題
  • 元素的顯示與隱藏：
  • 瀏覽器輸入 URL 按下 enter 發(fā)生了什么
  • 比較
  • 對(duì)象里面的屬性是否可以為數(shù)字？
  • 對(duì)象的屬性名不能是一個(gè)對(duì)象
  • Map 結(jié)構(gòu)
  • new 做了什么？
  • == 比較
  • 變量計(jì)算-類型轉(zhuǎn)換
  • form 表單怎么阻止重復(fù)提交？
  • 懶加載大量數(shù)據(jù)的時(shí)候加載不出來(lái)的情況怎么優(yōu)化？
  • js 的垃圾回收機(jī)制。
  • 說(shuō)說(shuō)什么情況會(huì)造成內(nèi)存泄露？
  • TAPD跟禪道：工作中的 bug 處理。
  • 關(guān)于axios
  • JSON對(duì)象的方法：
  • yarn 基本指令
  • 其他
  • • 1. 原型鏈：查找變量的過(guò)程。由多級(jí)父對(duì)象，逐級(jí)繼承，形成的鏈?zhǔn)浇Y(jié)果。
    • 2. alert 彈出來(lái)的結(jié)果都會(huì)進(jìn)行內(nèi)部 toString 轉(zhuǎn)換，輸出為字符串。
    • 3. 枚舉、迭代、遍歷。
    • 4. 無(wú)論客戶關(guān)閉了瀏覽器還是電腦，只要還在 `maxAge`秒之前，登錄網(wǎng)站時(shí)該 Cookie 仍然有效。
    • 5. 代理(proxy)：就是通過(guò)一個(gè)對(duì)象來(lái)操作另一個(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 = 3; var b = a;

可運(yùn)算。var a = 3; var b = a + 2;

問(wèn)題：var a = xxx;，a 內(nèi)存中到底保存的是什么？

xxx是基本數(shù)據(jù)，保存的就是這個(gè)數(shù)據(jù)。

xxx是對(duì)象，保存的是對(duì)象的地址值。

xxx是一個(gè)變量，保存的xxx的內(nèi)存內(nèi)容(可能是基本數(shù)據(jù)，也可能是地址值)。

關(guān)于引用變量的賦值問(wèn)題

• 兩個(gè)或多個(gè)引用變量指向同一個(gè)對(duì)象，通過(guò)一個(gè)變量修改對(duì)象內(nèi)部數(shù)據(jù)，其他所有變量看到的是修改之后的數(shù)據(jù)。
• 兩個(gè)或多個(gè)引用變量指向同一個(gè)對(duì)象，讓其中一個(gè)引用變量指向另一個(gè)對(duì)象，另一個(gè)引用變量依然指向前一個(gè)對(duì)象。

var obj1 = {name: 'Tom'}; var obj2 = obj1; obj1.name = 'Jack'; console.log(obj2.name); // 'Jack' var obj1 = {name: 'Tom'}; var obj2 = obj1; obj2.age = 12; console.log(obj1.age); // 12 function fn(obj) {obj.name = 'A'; } fn(obj1); console.log(obj2.name); // 'A' var a = {age: 12}; var b = a; a = {name: 'Bob', age: 13}; console.log(b.age, a.name, a.age); // 12 'Bob' 13 var a = {age: 12}; var b = a; a = {name: 'Bob', age: 13}; b.age = 14; console.log(b.age, a.name, a.age); // 14 'Bob' 13 function fn2 (obj) {obj = {age: 15}; // 注意：這里是obj 等于一個(gè)新對(duì)象，而不是obj.age，這個(gè)一個(gè)對(duì)象會(huì)成為垃圾對(duì)象。 } fn2(a); console.log(a.age); // 13

問(wèn)題：在 js 調(diào)用函數(shù)時(shí)傳遞變量參數(shù)時(shí)，是值傳遞還是引用傳遞？

理解一：都是值(基本值/地址值)傳遞。

理解二：可能是值傳遞，也可能是引用傳遞(地址值)。

var a = 3; function fn(a) {a = a + 1; }; fn(a); console.log(a); // 3

問(wèn)題：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ì)象？

多個(gè)數(shù)據(jù)的封裝體。

用來(lái)保存多個(gè)數(shù)據(jù)的容器。

一個(gè)對(duì)象代表現(xiàn)實(shí)世界中的一個(gè)事物。

為什么要用對(duì)象？

統(tǒng)一管理多個(gè)數(shù)據(jù)。

對(duì)象的組成：

屬性：屬性名(本質(zhì)上都是字符串)和屬性值(任意類型)。

方法：一個(gè)特別的屬性(屬性值是函數(shù))。

什么是函數(shù)？

實(shí)現(xiàn)特定功能的 n 條語(yǔ)句的封裝體。

只有函數(shù)是可以執(zhí)行的，其他類型的數(shù)據(jù)不能執(zhí)行。

為什么要使用函數(shù)？

提高代碼復(fù)用。

便于閱讀交流。

如何調(diào)用(執(zhí)行)函數(shù)？

test()：直接調(diào)用。

obj.test()：通過(guò)對(duì)象調(diào)用。

new test()：new 調(diào)用。

test.call/apply(obj)：臨時(shí) 讓 test 成為 obj 的方法進(jìn)行調(diào)用。

var obj = {}; function test2 () {this.xxx = 'baidu'; }; test2.call(obj); console.log(o);

代碼風(fēng)格：是否加分號(hào)

是否加分號(hào)是編碼風(fēng)格問(wèn)題，沒(méi)有應(yīng)不應(yīng)該，只有自己喜歡不喜歡。

在下面2中情況下不加分號(hào)會(huì)有問(wèn)題：

小括號(hào)開(kāi)頭的前一條語(yǔ)句。

var a = 3 ;(function () {}) // 不加分號(hào)報(bào)錯(cuò)：var a = 3(function () {})

中方括號(hào)開(kāi)頭的前一條語(yǔ)句。

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ì)象中沒(méi)有此屬性，直接添加此屬性并設(shè)置其值。

方法一般定義在原型中，屬性一般通過(guò)構(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ī)制,建議將圖片保存下來(lái)直接上傳(img-M61GBCQd-1663432794797)(js高級(jí)課堂筆記 .assets/無(wú)標(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ù)外部能直接訪問(wèn)函數(shù)內(nèi)部的局部變量嗎？

不能，但我們可以通過(guò)閉包讓外部操作它。

內(nèi)存溢出與內(nèi)存泄露

內(nèi)存溢出：

一種程序運(yùn)行出現(xiàn)的錯(cuò)誤。

當(dāng)程序運(yùn)行需要的內(nèi)存超過(guò)了剩余的內(nèi)存時(shí)，就會(huì)拋出內(nèi)存溢出的錯(cuò)誤。

內(nèi)存泄露：

占用的內(nèi)存沒(méi)有及時(shí)釋放。

內(nèi)存泄露積累多了就容易導(dǎo)致內(nèi)存溢出。

常見(jiàn)的內(nèi)存泄露：

• 意外的全局變量。
• 沒(méi)有及時(shí)清理的計(jì)時(shí)器或回調(diào)函數(shù)。
• 閉包

閉包使用場(chǎng)景：

刪除某一條數(shù)據(jù)，通過(guò) ID 或 index 去刪除的時(shí)候，會(huì)使用到閉包。

發(fā)送 Ajax 請(qǐng)求成功或失敗的回調(diào)。

setTimeout 的延時(shí)回調(diào)。

節(jié)流的使用場(chǎng)景：

滾動(dòng)加載更多。

搜索框搜索的聯(lián)想功能。

高頻點(diǎn)擊。

表單重復(fù)提交。

防抖的使用場(chǎng)景：

搜索框搜索輸入，并在輸入完以后自動(dòng)搜索。

手機(jī)號(hào)，郵箱驗(yàn)證輸入檢測(cè)。

窗口大小 resize 變化后，再重新渲染。

try{}catch(error){} 所對(duì)應(yīng)的error

Error.name 的六種值對(duì)應(yīng)的信息：

EvalError：eval() 的使用與定義不一致。

RangeError：數(shù)值越界。

ReferenceError：非法或不能識(shí)別的引用數(shù)值(如：變量未聲明就使用; 函數(shù)未聲明就調(diào)用)。

SyntaxError：發(fā)生語(yǔ)法解析錯(cuò)誤。

TypeError：操作數(shù)類型錯(cuò)誤(如：數(shù)組方法操作對(duì)象)。

URIError：URI處理函數(shù)使用不當(dāng)。

對(duì)象拓展 Object.is()

全等判斷有兩個(gè)問(wèn)題：

0 和 -0 在進(jìn)行全等判斷的時(shí)候，得到的是 true。

NaN 和 NaN 在進(jìn)行全等判斷的時(shí)候，得到的是 false。

console.log(0 === -0); // true console.log(NaN === NaN); // false

對(duì)象拓展 is 方法：

0 和 -0 在進(jìn)行全等判斷的時(shí)候，得到的是 false。

NaN 和 NaN 在進(jìn)行全等判斷的時(shí)候，得到的是 true。

console.log(Object.is(0, -0)); // false console.log(Object.is(NaN, NaN)); // true

除此之外，is 方法 和 === 是一樣的。

創(chuàng)建數(shù)組的四種方式

字面量 []

構(gòu)造函數(shù) new Array()

工廠方法 Array();

Array.of()

for 循環(huán)用于遍歷數(shù)組

for in 循環(huán)用于遍歷對(duì)象的key

for of 循環(huán)遍歷實(shí)現(xiàn)了迭代器接口的對(duì)象(不能直接遍歷對(duì)象)

迭代器接口對(duì)象一旦遍歷完成，就無(wú)法再遍歷了。

解構(gòu)賦值

解構(gòu)賦值，解構(gòu)出來(lái)的數(shù)據(jù)會(huì)創(chuàng)建全局變量，因此工作中，常常配合模塊化開(kāi)發(fā)去使用(這時(shí)相當(dāng)于局部變量了)。

數(shù)組依賴的是索引，對(duì)象依賴的是屬性名。

解構(gòu)語(yǔ)法不會(huì)影響原來(lái)的數(shù)組。

怎樣優(yōu)化網(wǎng)頁(yè)性能？

盡量減少 HTTP 請(qǐng)求次數(shù)

減少 DNS 查找次數(shù)

資源合并與壓縮

CSS Sprites

小圖標(biāo)使用字體圖標(biāo)或者base64

將外部腳本置底

緩存

自己實(shí)現(xiàn)性能測(cè)試(只供參考，不能作為參考標(biāo)準(zhǔn))

任何的代碼性能測(cè)試都是和測(cè)試的環(huán)境有關(guān)系的，例如CUP、內(nèi)存、GPU等電腦當(dāng)前性能不會(huì)有相同的情況。

不同瀏覽器也會(huì)導(dǎo)致性能上的不同。

測(cè)試A所用的時(shí)間 // console.time 可以測(cè)試出一段程序執(zhí)行的時(shí)間 console.time('A'); // 括號(hào)里不寫東西，控制臺(tái)上什么也不會(huì)出現(xiàn) for (let i = 0; i < 10000; i++) {} console.timeEnd('A'); // 打印開(kāi)始的A到結(jié)束的A所用的時(shí)間

console.profile() 在火狐瀏覽器中安裝FireBug，可以更精準(zhǔn)的獲取到程序每一個(gè)步驟所消耗的時(shí)間。

一個(gè) 6~16位的字符串，必須同時(shí)包含有大小寫字母和數(shù)字。

編寫一條正則，用來(lái)驗(yàn)證此規(guī)則：一個(gè) 6~16位的字符串，必須同時(shí)包含有大小寫字母和數(shù)字。(一般用于密碼)

// 問(wèn)號(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')); // true

1-10為必須包含數(shù)字、字母、下劃線。必須以下劃線開(kāi)頭。

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ù)沒(méi)有 this，所以也不能用 call()、apply()、bind() 方法改變 this 的指向。

  需要通過(guò)查找作用域鏈來(lái)確定 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)是什么

promise 一旦新建就會(huì)立即執(zhí)行，無(wú)法中途取消。

當(dāng)處于 pending 狀態(tài)時(shí)，無(wú)法得知當(dāng)前處于哪一個(gè)狀態(tài)，是剛剛開(kāi)始還是剛剛結(jié)束。

如果不設(shè)置回調(diào)函數(shù)，promise 內(nèi)部的錯(cuò)誤就無(wú)法反映到外部。

promise 封裝 ajax 時(shí)，由于 promise 是異步任務(wù)，發(fā)送請(qǐng)求的三步會(huì)被延后到整個(gè)腳本同步代碼執(zhí)行完，并且將響應(yīng)回調(diào)函數(shù)延遲到現(xiàn)有隊(duì)列的最后，如果大量使用會(huì)大大降低了請(qǐng)求效率。

localStorage 的使用場(chǎng)景

緩存一般信息，如搜索頁(yè)的出發(fā)城市，達(dá)到城市，非實(shí)時(shí)定位的信息。

緩存城市列表數(shù)據(jù)，這個(gè)數(shù)據(jù)往往比較大。

每條緩存信息需要可跟蹤，比如服務(wù)器通知城市數(shù)據(jù)更新，這個(gè)時(shí)候在最近一次訪問(wèn)的時(shí)候要自動(dòng)設(shè)置過(guò)期。

localStorage 常用于長(zhǎng)期登錄+判斷用戶是否已經(jīng)登錄。

cookie的使用場(chǎng)景

cookie 一般要配合 session一起使用，session 的使用場(chǎng)景：

商城中的購(gòu)物車。

保存用戶登錄信息。

將某些數(shù)據(jù)放入 session 中，供同一用戶的不同頁(yè)面使用。

方式在用戶非法登錄。

請(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ù)器端，沒(méi)頁(yè)面，也沒(méi)有 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 精簡(jiǎn)版：

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接收的則是起始位置和所要返回的字符串長(zhǎng)度。

解析地址

請(qǐng)求攔截器和響應(yīng)攔截器

請(qǐng)求攔截器：在請(qǐng)求還沒(méi)有發(fā)出去之前：

把請(qǐng)求攔截住。

根據(jù)具體業(yè)務(wù)邏輯，決定是否放行。

定義：在真正發(fā)請(qǐng)求前執(zhí)行的一個(gè)回調(diào)函數(shù)。

作用：

對(duì)請(qǐng)求的配置做一些處理：data、header，界面 loading 提示。

界面 loading 提示：在發(fā)請(qǐng)求的時(shí)候，我可以在請(qǐng)求攔截器里面加載一個(gè)頁(yè)面，一直加載中，然后等著數(shù)據(jù)回來(lái)的時(shí)候，要經(jīng)過(guò)響應(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ù)。

作用：

若請(qǐng)求成功，對(duì)成功的數(shù)據(jù)進(jìn)行處理。

若請(qǐng)求失敗，對(duì)失敗進(jìn)行進(jìn)一步操作。

總結(jié) this 指向(熊鍵)

什么是 this？

• 一個(gè)關(guān)鍵字，是一個(gè)引用變量。
• 函數(shù)中可以出現(xiàn) this (全局的 this 指向 window)。
• this 指向其所在函數(shù)的調(diào)用者，如果沒(méi)有調(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ù)沒(méi)有自己的 this，箭頭函數(shù)內(nèi)部的 this 并不是調(diào)用時(shí)候指向的對(duì)象，而是定義函數(shù)時(shí)所在函數(shù)的 this 指向。

this 指向調(diào)用函數(shù)的上下文 (函數(shù)是上下文調(diào)用的)。

注意隱式丟失現(xiàn)象(通過(guò)一個(gè)上下文對(duì)象拿到了一個(gè)函數(shù)，但是沒(méi)有調(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ù)。

閉包的作用：

延長(zhǎng)了局部變量的生命周期。

可以在外部操作局部變量。

閉包的缺點(diǎn)：

函數(shù)的局部變量占用內(nèi)存時(shí)間過(guò)長(zhǎng)，容易造成內(nèi)存泄露。

解決：

減少使用閉包。

及時(shí)釋放閉包。

談一談跨域(熊健)

同源：協(xié)議名、域名、端口號(hào)一致。

跨域：給不同源的地址發(fā)送 Ajax 請(qǐng)求。

解決跨域問(wèn)題：

jsonp 原理: 就是利用 script 標(biāo)簽發(fā)送請(qǐng)求不受同源策略的限制，去給服務(wù)器發(fā)送請(qǐng)求，發(fā)送時(shí)要將一個(gè)定義好的函數(shù)名通過(guò) 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 沒(méi)有兼容性問(wèn)題。

要想實(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)求一下，詢問(wèn)是否支持 cors，如果服務(wù)器響應(yīng)支持，瀏覽器才會(huì)讓我們寫的 ajax 請(qǐng)求發(fā)送出去，響應(yīng)的時(shí)候就不再攔截了，如果服務(wù)器不支持 cors。瀏覽器就不會(huì)將我們的 ajax 發(fā)送出去。

cors 的注意點(diǎn)：

IE10+ 才支持(有兼容性問(wèn)題)。

可以使用 get/post 請(qǐng)求。

依然需要后臺(tái)配合。

后端配合：跨域資源共享(CORS, Cross-Origin Resource Sharing)，本質(zhì)是設(shè)置響應(yīng)頭，使得瀏覽器允許跨域請(qǐng)求。

談?wù)?js 異步代碼執(zhí)行機(jī)制(熊鍵)

同步代碼和異步代碼如何執(zhí)行？

JS 引擎從上到下依次執(zhí)行所有代碼。

遇到同步代碼，依次執(zhí)行。

遇到異步代碼，異步函數(shù)是會(huì)被同步調(diào)用，只是其中的異步任務(wù)和回調(diào)函數(shù)會(huì)交給瀏覽器相關(guān)模塊負(fù)責(zé)處理。

此時(shí) JS 引擎會(huì)繼續(xù)執(zhí)行后面代碼。

比如：定時(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ì)開(kāi)啟事件輪詢，輪詢回調(diào)隊(duì)列，執(zhí)行其中異步回調(diào)函數(shù)，默認(rèn)按照順序依次執(zhí)行，先進(jìn)先出。

異步代碼具體誰(shuí)先執(zhí)行，誰(shuí)后執(zhí)行？

宏任務(wù)(執(zhí)行優(yōu)先級(jí)低)：setTimeout、setInterval、DOM 事件回調(diào)、Ajax 請(qǐng)求、setImmediate（NODEJS）

微任務(wù)(執(zhí)行優(yōu)先級(jí)高)：promise.then/catch/finally、queueMicrotask、requestAnimationFrame

將整個(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í)反饋。

圖片底部空白問(wèn)題

產(chǎn)生的原因：圖片默認(rèn)的vertical-align:baseline(基線)。

解決：

最簡(jiǎn)單粗暴也是最有效的方法：img{display:block;}。

給圖片添加 vertical-align: middle | top | bottom 等。（推薦使用）

博客鏈接

元素的顯示與隱藏：

display : none / block; 不占位置。

visibility : hidden / visible ; 占位置。

overflow : hidden ; 溢出隱藏。

瀏覽器輸入 URL 按下 enter 發(fā)生了什么

輸入 URL 并按下 enter。

DNS 解析 URL 對(duì)應(yīng)的 IP。

瀏覽器查找當(dāng)前 URL 是否存在緩存，并比較緩存是否過(guò)期。

根據(jù) IP 建立 TCP連接(三次握手)。

HTTP 發(fā)送請(qǐng)求。

服務(wù)器處理請(qǐng)求，瀏覽器接收 HTTP 響應(yīng)。

渲染頁(yè)面，構(gòu)建 DOM 樹(shù)。

關(guān)閉 TCP 連接(四次揮手)。

比較

比較

[10] == 10; // true [10] === 10; // false // 全等不支持類型轉(zhuǎn)換

數(shù)據(jù)類型比較：

== 數(shù)據(jù)類型不一樣

對(duì)象 == 字符串 對(duì)象.toString()變?yōu)樽址?對(duì)象如果變成數(shù)字是先 對(duì)象.toString() 然后 Number(放剛轉(zhuǎn)成的字符串))

null == undefined 相等。但是和其他值比較就不再相等了。

NaN == NaN 不相等。

剩下的都是轉(zhuǎn)換為數(shù)字。如："1"==true// true

對(duì)象里面的屬性是否可以為數(shù)字？

對(duì)象里面的屬性是可以為數(shù)字的，用中括號(hào)來(lái)取就可以了：

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è)方法是用來(lái)檢測(cè)數(shù)據(jù)類型的)：

obj = {} console.log(obj.toString()) // "[object Object]"

Map 結(jié)構(gòu)

不過(guò) es6 中的 map 支持屬性名是任意類型，包括對(duì)象，數(shù)組等。

• JavaScript 的對(duì)象（Object），本質(zhì)上是鍵值對(duì)的集合（Hash 結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來(lái)了很大的限制。
• 為了解決這個(gè)問(wèn)題，ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說(shuō)，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 更合適。

// 為什么會(huì)有Map? 因?yàn)閷?duì)象屬性名稱必須是字符串，如果是其他類型則不行 let p1 = { name: "lily" }; let obj1 = {id: 1,[p1]: "good" } console.log(obj1)// Map也是新增的數(shù)據(jù)結(jié)構(gòu) 類似于對(duì)象 let mp1 = new Map([["a", 1],["b", 2], ]) console.log(mp1)let p2 = { name: "lily" }; let mp2 = new Map([["a", 1],[p2, 2], ]) console.log(mp2)

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 和誰(shuí)都不相等

[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。

[] == false var a = Number([].toString()) == false // [].toString()是空字符串， 空數(shù)組轉(zhuǎn)成數(shù)字為 0。 console.log(a); // true[12] == true var a = Number([12].toString()) == true console.log(a); // false

變量計(jì)算-類型轉(zhuǎn)換

下面三種情況容易發(fā)生類型轉(zhuǎn)換：

字符串拼接。

如：const b = 100 + "10"; const c = true + "10";

==

如：100 == "100"; // true

if 語(yǔ)句和邏輯運(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 刷新頁(yè)面，點(diǎn)擊瀏覽器后退，重復(fù)點(diǎn)擊提交按鈕。

前臺(tái)：

提交后按鈕設(shè)置為灰色，或者添加蒙版。

PRG 模式：表單提交后，redirect 到一個(gè)倒計(jì)時(shí)頁(yè)面，或者信息提示頁(yè)面，等有成功信息返回后，再跳轉(zhuǎn)回之前頁(yè)面。

js 中設(shè)置標(biāo)記為判斷：

<script>var isCommitted = false; // 表單是否已經(jīng)提交標(biāo)識(shí)，默認(rèn)為 falsefunction doSubmit() {if(isCommitted == false) {isCommitted = true; // 提交表單后，將表單是否已經(jīng)提交標(biāo)識(shí)設(shè)置為 true return true; // 返回 true 讓表單正常提交}else {return false; // 返回 false 那么表單將不提交}} </script>

后臺(tái)：

session 方式，當(dāng)表單頁(yè)面被請(qǐng)求時(shí)，生成一個(gè)特殊的字符標(biāo)志串，存在 session 中，同時(shí)放在表單的隱藏域里。接受處理表單數(shù)據(jù)時(shí)，檢查標(biāo)識(shí)字符串是否存在，如果存在，且表單中和 session 中相等，那么提交表單，并立即從 session 中刪除它。再次請(qǐng)求過(guò)來(lái)，如果發(fā)現(xiàn)表單提交里沒(méi)有有效的標(biāo)志串，這說(shuō)明表單已經(jīng)被提交過(guò)了，屬于重復(fù)提交。

spring mvc 防止重復(fù)提交。

**數(shù)據(jù)庫(kù)：**數(shù)據(jù)庫(kù)中做唯一性約束。

懶加載大量數(shù)據(jù)的時(shí)候加載不出來(lái)的情況怎么優(yōu)化？

圖片資源的壓縮。

監(jiān)聽(tīng)滾動(dòng)條事件，當(dāng)滾動(dòng)條到底時(shí)，增加顯示數(shù)據(jù)個(gè)數(shù)。

可以使用虛擬列表，Object.freeze 凍結(jié)對(duì)象，Object.preventExtentsion 阻止對(duì)象擴(kuò)展來(lái)阻止 vue 給每個(gè)對(duì)象加上 get, set，但是缺點(diǎn)是不能響應(yīng)了。

icon 資源使用雪碧圖。

開(kāi)啟 gzip 壓縮(“命令行執(zhí)行：npm i compression-webpack-plugin -D”)。

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í)行過(guò)后就結(jié)束了，此時(shí)便可將它引用的內(nèi)存釋放（即垃圾回收），但全局變量生命周期會(huì)持續(xù)到瀏覽器關(guān)閉頁(yè)面。所以當(dāng)我們過(guò)多的使用全局變量的時(shí)候也會(huì)導(dǎo)致內(nèi)存泄漏的問(wèn)題。

說(shuō)說(shuō)什么情況會(huì)造成內(nèi)存泄露？

js 中：

全局變量：JavaScript可以處理沒(méi)有聲明的變量：一個(gè)未聲明的變量的引用在全局對(duì)象中創(chuàng)建了一個(gè)新變量。在瀏覽器的環(huán)境中，全局對(duì)象是 window。

閉包：匿名函數(shù)可以訪問(wèn)父級(jí)作用域的變量。閉包會(huì)造成對(duì)象引用的生命周期脫離當(dāng)前函數(shù)的上下文，如果閉包使用不當(dāng)，可以導(dǎo)致環(huán)形引用（circular reference），類似于死鎖，只能避免，無(wú)法發(fā)生之后解決，即使有垃圾回收也還是會(huì)內(nèi)存泄露。

被遺忘的定時(shí)器：使用完setInterval/setTimeout之后通常忘記清理。

dom 清空或刪除時(shí)，事件未清除導(dǎo)致的內(nèi)存泄露。

vue 中：

如果在 created/mounted 中做了以下事情，記得在 beforeDestroy 中關(guān)閉：

綁定了 DOM 對(duì)象中的事件。

第三方庫(kù)初始化。

如果組件中使用了定時(shí)器。

組件中綁定了自定義事件。

組件中使用了消息訂閱與發(fā)布。PubSub.unsubscribe(pubId)

TAPD跟禪道：工作中的 bug 處理。

TAPD跟禪道

tapd是騰訊公司的一個(gè)產(chǎn)品研發(fā)平臺(tái)，全名叫做騰訊敏捷產(chǎn)品研發(fā)平臺(tái)。最初只是在內(nèi)部的人員才有資格接觸到，并且這個(gè)平臺(tái)已經(jīng)存在有12年之久，正式對(duì)公眾開(kāi)放是在2017年。

禪道是第一款國(guó)產(chǎn)的開(kāi)源項(xiàng)目管理軟件，她的核心管理思想基于敏捷方法scrum，內(nèi)置了產(chǎn)品管理和項(xiàng)目管理，同時(shí)又根據(jù)國(guó)內(nèi)研發(fā)現(xiàn)狀補(bǔ)充了測(cè)試管理、計(jì)劃管理、發(fā)布管理、文檔管理、事務(wù)管理等功能，在一個(gè)軟件中就可以將軟件研發(fā)中的需求、任務(wù)、bug、用例、計(jì)劃、發(fā)布等要素有序的跟蹤管理起來(lái)，完整地覆蓋了項(xiàng)目管理的核心流程。

關(guān)于axios

什么是 axios？

官方介紹：Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

使用 Fetch 發(fā)送請(qǐng)求：

Fetch API 提供了一個(gè) JavaScript 接口，用于訪問(wèn)和操縱 HTTP 管道的一些具體部分，例如請(qǐng)求和響應(yīng)。

**注意：**Fetch 是 js 原生的，es6 以后出來(lái)的，自帶 promise，不需要下載第三方包，直接用即可。

**缺點(diǎn)：**有兼容性問(wèn)題，IE 全部不兼容。目前沒(méi)有廣泛使用。

Axios 取消請(qǐng)求：

如果要取消請(qǐng)求的話，我們可以通過(guò)調(diào)用 XMLHttpRequest 對(duì)象上的 abort 方法來(lái)取消請(qǐng)求：

let xhr = new XMLHttpRequest(); xhr.open("GET", "https://developer.mozilla.org/", true); xhr.send(); setTimeout(() => xhr.abort(), 300);

而對(duì)于 Axios 來(lái)說(shuō)，我們可以通過(guò) Axios 內(nèi)部提供的 CancelToken 來(lái)取消請(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ù)是可選的

此外，你也可以通過(guò)調(diào)用 CancelToken 的構(gòu)造函數(shù)來(lái)創(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ù)來(lái)生成一個(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ù)來(lái)取消前面已經(jīng)發(fā)出的請(qǐng)求，在取消請(qǐng)求之后，我們還需要把取消的請(qǐng)求從 pendingRequest 中移除。現(xiàn)在我們已經(jīng)知道如何取消請(qǐng)求和如何判斷重復(fù)請(qǐng)求，下面我們來(lái)介紹如何取消重復(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. 原型鏈：查找變量的過(guò)程。由多級(jí)父對(duì)象，逐級(jí)繼承，形成的鏈?zhǔn)浇Y(jié)果。

2. alert 彈出來(lái)的結(jié)果都會(huì)進(jìn)行內(nèi)部 toString 轉(zhuǎn)換，輸出為字符串。

3. 枚舉、迭代、遍歷。

4. 無(wú)論客戶關(guān)閉了瀏覽器還是電腦，只要還在 maxAge秒之前，登錄網(wǎng)站時(shí)該 Cookie 仍然有效。

5. 代理(proxy)：就是通過(guò)一個(gè)對(duì)象來(lái)操作另一個(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é)

以上是生活随笔為你收集整理的JS高级课堂笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。