一、說一下js單線程的理解？
js是單線程的，內部要處理的任務分同步任務、異步任務
異步任務分微任務、宏任務
執行順序：【又稱 事件循環機制 】
先執行同步任務，遇到異步宏任務則將異步宏任務放入宏任務隊列中，遇到異步微任務則將異步微任務放入微任務隊列中。當所有同步任務執行完畢后，再將異步微任務從隊列中調入主線程執行，微任務執行完畢后再將異步宏任務從隊列中調入主線程執行，一直循環直至所有任務執行完畢。
微任務和宏任務有哪些：
宏任務一般是：script、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel
微任務：Promise.then、Object.observe、MutationObserver
示例：
setTimeout(function(){
console.log(1);
});
new Promise(function(resolve){
console.log(2);
resolve();
}).then(function(){
console.log(3);
}).then(function(){
console.log(4)
});
console.log(5);
// 2 5 3 4 1
遇到setTimout，異步宏任務，放入宏任務隊列中
遇到new Promise，new Promise在實例化的過程中所執行的代碼都是同步進行的，所以輸出2
Promise.then，異步微任務，將其放入微任務隊列中
遇到同步任務console.log(5);輸出5；主線程中同步任務執行完
從微任務隊列中取出任務到主線程中，輸出3、 4，微任務隊列為空
從宏任務隊列中取出任務到主線程中，輸出1，宏任務隊列為空
二、說一下defer和async的區別？
相同點：
都是script標簽的屬性
都是異步加載js
都是為了避免加載腳本的時候就會阻塞頁面的渲染，出現空白的現象的問題
不同點：
沒有加defer 或 async，同步加載、立即執行、阻塞html解析
加defer，異步加載、HTML解析完畢后執行、不阻塞HTML解析
加async，異步加載、立即執行、可能阻塞也可能不阻塞HTML解析
注意：
async和defer屬性都僅適用于外部腳本，如果script標簽沒有src屬性，盡管寫了async、defer屬性也會被忽略
三、說一下淺拷貝和深拷貝的區別？
深拷貝和淺拷貝是只針對Object和Array這樣的引用數據類型的。
js中基本數據類型存放在棧中，引用數據類型存放在堆中。
淺拷貝是在堆中先創建一個新對象，拷貝原始對象的屬性值。如果屬性是基本類型，拷貝的就是基本類型的值，如果屬性是引用類型，拷貝的就是內存地址。
深拷貝是在堆中先創建一個新對象，采用遞歸方法實現深度克隆原理，將一個對象從內存中完整的拷貝一份出來。如果屬性是基本類型，拷貝的就是基本類型的值，如果屬性是引用類型，在堆中創建一個新對象再完整拷貝原對象。
區別：
淺拷貝基本類型之間互不影響，引用類型其中一個對象改變了地址，就會影響另一個對象。
深拷貝改變新對象不會影響原對象，他們之間互不影響。
實現：
淺拷貝：Object.assign()、展開運算符… 、concat()、slice()
深拷貝：JSON.parse(JSON.stringify())、jQuery.extend()、遞歸
四、說一下數組常用方法有哪些？
push(): 將元素添加到數組的結尾，添加多個用逗號隔開
pop(): 刪除數組的最后一項
unshift(): 將元素添加到數組的開頭，添加多個用逗號隔開
shift(): 刪除數組的第一項
splice(): 刪除指定元素，并在刪除位置添加元素 --- 3個參數：起始索引 刪除數目 新增內容
slice() 截取區間內的元素 --- 2個參數：開始位置 結束位置
fill(): 填充數組 --- 3個參數：值 開始位置 結束位置
-----------------------------------------
String()、toString(): 將數組轉成字符串
join(): 把數組轉換成字符串，然后給他規定一個連接字符，默認是逗號
Array.from(): 方法用于將兩類對象轉為真正的數組：類似數組的對象和可遍歷的對象（Set 和 Map）
Array.of(): 用于將一組值，轉換為數組
-----------------------------------------
map()：循環，并且返回新的數組
forEach(): 循環，遍歷
filter(): 過濾，篩選出數組中的滿足條件的，并且返回新的數組
find(): 查找出第一個符合條件的數組元素
findIndex(): 查找出第一個符合條件的數組元素，所在的索引位置
indexOf()：查找數組中值第一次出現的索引
includes(): 查看數組中是否存在此元素
every(): 檢測數組中元素是否都是符合條件
some(): 檢測數組中元素是否有滿足條件的元素
-----------------------------------------
sort(): 對數組排序，正序
reverse(): 對數組進行顛倒
concat(): 合并數組，返回一個新數組
copyWithin(): 指定位置的成員復制到其他位置
五、說一下字符串常用方法有哪些？
replace(): 在字符串中用一些字符替換另一些字符
substr(): 從起始索引提取字符串中指定數目的字符
substring(): 提取字符串中兩個指定索引之間的字符
slice() 截取區間內的元素 --- 2個參數：開始位置 結束位置
-----------------------------------------
split(): 把字符串轉換成數組，字符串以什么符號連接，就以什么符號分割
-----------------------------------------
charAt(): 返回在指定位置的字符
indexOf(): 返回某個指定的字符串值在字符串中首次出現的位置
lastIndexOf(): 從后向前搜索字符串，并從起始位置（0）開始計算返回字符串最后出現的位置
includes(): 查找字符串中是否包含指定的字符串
search(): 檢索字符串中指定的子字符串
startsWith(): 查看字符串是否以指定的字符串開頭
-----------------------------------------
toLowerCase(): 把字符串轉為小寫
toUpperCase(): 把字符串轉為大寫
trim(): 去掉字符串兩邊的空白
concat(): 連接兩個或多個字符串，返回新的字符串
六、說一下數據類型有哪些？如何判斷數據類型？
基本數據類型：Number、String、Boolean、Symbol、Null、Undefined
引用數據類型：Object、Array、Function
typeof：可判斷基本數據類型、Function，不能將Object、Array和Null區分，都返回Object
instanceof：可判斷Array、Object、Function，不能判斷基本數據類型 原理：判斷B是否在A的原型鏈上
Object.prototype.toString.call()：可判斷所有數據類型
七、說一下數組去重的方法？
1、雙重for循環 + splice
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]===arr[j]){
arr.splice(j,1)
j--
}
}
}
2、filter + indexOf，返回item第一次出現的位置等于當前的index的元素 【常用】
let newArr = arr.filter((item, index) => arr.indexOf(item) === index);
3、filter + Object.hasOwnProperty，利用對象的鍵名不可重復的特點
let obj = {}
arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : obj[typeof item])
4、new Set + 擴展運算符 或 Array.from 【常用】
let newArr = [...new Set(arr)];
let newArr = Array.from(new Set(arr));
八、說一下call、Apply、bind區別？
ObjA.call(ObjB, argument) --- ObjB調用ObjA中的方法，并把argument作為參數傳入
作用：改變this的指向
區別：
1、調用方式不同
call、apply：立即調用，返回的的是一個值
bind：手動調用，返回的是一個函數形式
2、參數不同
三者第一個參數都是調用的對象
call、bind：第二個參數為一個值，多個參數間用逗號分開
apply：第二個參數為一個數組
九、說一下什么是原型、原型鏈？
原型：
每個構造函數都有一個prototype屬性，即 顯式原型屬性，它指向構造函數的原型對象
每個實例對象都有一個__proto__屬性，即 隱式原型屬性，它指向構造函數的原型對象
通過顯式原型屬性向原型對象上設置值，通過隱式原型屬性向原型對象上讀取值，即 實例對象的隱式原型屬性值等于其構造函數的顯式原型屬性值
原型鏈：
每個構造函數的原型對象，默認是一個空的Object構造函數的實例對象，也都有一個__proto__屬性
實例對象和原型對象的__proto__屬性連接起來的一條鏈，即 原型鏈，它的盡頭是Object構造函數的原型對象的__proto__屬性
當在實例對象上讀取值時，先在實例對象本身上找，當找不到，再通過__proto__屬性，在其構造函數的原型對象上找，
如果還找不到，就繼續沿著__proto__屬性向上找，直到Object構造函數的原型對象的__proto__屬性為止，此時值為null。
十、說一下什么是閉包？
定義在一個函數體內，且訪問了外部函數變量 的函數，即 閉包函數(閉包)
優點：
1、延長函數內局部變量的生命周期
2、在函數外部可以操作到函數內部的私有變量【重點作用】
缺點：會導致內存泄露，所以要謹慎使用
應用場景：
1、將函數作為一個函數的返回值 如：封裝API模塊，只對外暴漏內部的功能函數，不暴漏外部函數的私有變量 --- 類似于類的權限修飾
2、將函數作為實參傳遞給一個函數內部的另一個函數調用 如：函數內調用定時器函數，將閉包函數作為定時器的回調函數傳遞
回調和閉包的區別：【是否定義在函數體內】
回調函數：作為實參傳遞的函數，沒有定義在一個函數體內
閉包函數：定義在一個函數體內，且訪問了外部函數變量 的函數
舉例：
function handle(msg, time) {
setInterval(function callback() {
console.log(msg);
}, time)
}
handle("哈哈哈哈", 5000)
對于setInterval函數來說，callback函數是回調函數；
對于handle函數來說，callback函數是閉包函數；
十一、說一下this的指向？
普通函數：普通函數中this是動態的，在調用函數時確定，一般誰調用指向誰
調用方式 this指向
普通函數調用 window
構造函數調用 實例對象
對象方法調用 該方法所屬對象
事件綁定方法 綁定事件的對象
定時器函數 window
立即執行函數 window
箭頭函數：
箭頭函數沒有自己的this、arguments
箭頭函數的this是靜態的，在定義函數時確定，一般和箭頭函數所在父作用域的this指向一致
十二、說一下什么是防抖、節流？
作用：
都是可以限制函數的執行頻次，避免函數觸發頻率過高導致響應速度跟不上觸發頻率，因而出現延遲、假死或卡頓的現象。
都使用定時器實現
防抖(debounce)：【多次重新計時】
在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。
典型的案例：輸入框搜索，輸入結束后n秒才進行搜索請求，n秒內又輸入內容，則重新計時。
節流(throttle)：【多次只一次生效】
規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有一次生效。
典型的案例：鼠標不斷點擊按鈕觸發事件，規定在n秒內多次點擊只生效一次。
十三、說一下ES6新特性有哪些？
新的聲明方式，let、const
新的數組方法，如：for of、find()、findIndex()
解構賦值
擴展運算符
箭頭函數
模板字符串
symbol數據類型
函數參數允許設置默認值，引入了rest參數（...變量名）
鏈判斷運算符 （?.）
Set集合（偽數組）
Map集合（對象）
Promise
模塊化，import、export
類
十四、說一下var、let、const的區別？
var
1、var聲明的變量在全局內有效
2、可以重復聲明
3、var聲明的變量存在變量提升
let
1、遇到{}可開啟塊級作用域
2、不能重復聲明 --- 可以防止變量重復定義產生的沖突，會直接報錯
3、let聲明的變量不存在變量提升
const
1、const聲明的常量是一個只讀屬性，必須初始化
2、遇到{}可開啟塊級作用域
3、不能重復聲明
4、不存在變量提升
5、const定義的基本數據類型不可以修改，但復雜數據類型可以修改
原因：const指針指向的地址是不可以改變的，但地址指向的內容是可以改變的
十五、說一下for in 和 for of 區別？
for in
可以直接遍歷對象，得到屬性
遍歷數組，得到下標
不能遍歷map集合對象
for of
不可以直接遍歷對象，因為沒有引入iterable，必須加上 Object.key(對象) 才能使用
遍歷數組，得到內容
能遍歷map集合對象，得到屬性和值
十六、說一下對Promise理解？
Promise對象:
描述:
用于封裝異步操作并返回其結果的一個構造函數
為了將 異步操作 變 同步操作 執行
三種狀態：
pending 待定狀態
fulfilled 成功狀態
rejected 失敗狀態
九種方法：
對象上有resolve、reject、all、allSettled、race、any方法
resolve()：異步操作成功回調，并將異步操作的結果作為參數傳遞出去
reject()：異步操作失敗回調，并將異步操作的結果作為參數傳遞出去
all()：所有的Promise對象均成功后，才會執行all中的then回調，否則返回的是最先rejected狀態的值
allSettled()：所有的Promise對象均出現結果（無論成功或失?。┖螅艜绦衋llSettled中的then回調（只會進入then回調）
any()：和all相反，所有的Promise對象均失敗后，才會執行any中的失敗回調，否則當任意一個Promise對象成功就會直接進入then回調。
race()：返回執行最快的一個Promise的結果
原型上有then、catch、finally方法
then()：獲取成功回調結果，進行邏輯處理
catch(): 獲取失敗回調結果，拋出異常并處理
finally()：無論成功或者失敗都會執行
async與awAIt：
出現目的：
await的出現是為了簡化多個then鏈的傳參問題
async：
是Promise對象的語法糖，async function A 相當于Promise.resolve(function A)
await：
必須放在async定義的函數內部去使用
作用：
1、等待當前函數執行完畢
2、獲取promise中的resolve回調的結果 --- 此處作用同then
異步變同步的解決，經歷了四個階段：
1、回調函數
描述:
回調里面嵌入回調，導致層次很深，代碼維護起來特別復雜，產生回調地獄問題
示例代碼：
getData(){
//獲取分類列表id
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
let id=res.data[0].id
// 根據分類id獲取該分類下的所有文章
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:id
},
success:res2=>{
//獲取到一篇文章的id，根據文章id找到該文章下的評論
let id=res2.data[0].id;
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/comment.php",
data:{
aid:id
},
success:res3=>{
//找到該文章下所有的評論
console.log(res3)
}
})
}
})
}
})
}
2、回調函數封裝
描述：
把每一個request請求封裝出一個函數，將結果進行返回
代碼條理清晰了，但還是回調里面嵌套回調，并沒有解決回調地獄的問題
示例代碼：
//在onload初始化后調用相應的函數
onLoad() {
//調用導航函數，并拿到函數的返回值
this.getNav(res=>{
let id=res.data[0].id;
//拿到分類id作為參數
this.getArticle(id,res2=>{
//拿到文章id作為參數
let id=res2.data[0].id;
this.getComment(id,res3=>{
//最終獲取到第一個分類下，第一篇文章下，所有評論
console.log(res3)
})
})
});
}
methods: {
//先獲取導航分類接口，將結果進行返回，到調用函數的地方獲取
getNav(callback){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
callback(res)
}
})
},
//獲取文章數據，將文章列表進行返回
getArticle(id,callback){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:id
},
success:res=>{
callback(res)
}
})
},
//獲取文章下的所有評論
getComment(id,callback){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/comment.php",
data:{
aid:id
},
success:res=>{
callback(res)
}
})
}
}
3、promise then
示例代碼：
//promise鏈式調用
this.getNav()
.then(res=>{
let id=res.data[0].id;
return this.getArticle(id);
})
.then(res=>{
let id=res.data[0].id;
return this.getComment(id)
})
.then(res=>{
console.log(res)
})
methods: {
//先獲取導航分類接口，將結果進行返回，到調用函數的地方獲取
getNav(callback){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//獲取文章數據，將文章列表進行返回
getArticle(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//獲取文章下的所有評論
getComment(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/comment.php",
data:{
aid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
}
}
4、promise await
描述：
await / async 這兩個命令是成對出現的，如果使用await沒有在函數中使用async命令，那就會報錯，如果直接使用async沒有使用await不會報錯，只是返回的函數是個promise
示例代碼：
async onLoad() {
let id,res;
res=await this.getNav();
id=res.data[0].id;
res=await this.getArticle(id);
id=res.data[0].id;
res=await this.getComment(id);
console.log(res)
}
methods: {
//先獲取導航分類接口，將結果進行返回，到調用函數的地方獲取
getNav(callback){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//獲取文章數據，將文章列表進行返回
getArticle(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//獲取文章下的所有評論
getComment(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/comment.php",
data:{
aid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
}
}
十七、說一下偽數組轉為真數組的方法？
1、
Array.prototype.slice.call(偽數組)
2、Array.from(偽數組)
3、剩余運算符...
十八、說一下三種緩存方式的區別？
cookie：用來保存登錄信息，大小限制為4KB左右
localStorage：用于本地數據存儲，保存的數據沒有過期時間，一般瀏覽器大小限制在5MB
sessionStorage：接口方法和localStorage類似，但保存的數據的只會在當前會話中保存下來，頁面關閉后會被清空
十九、說一下創建Ajax的基本步驟？
1、創建XMLHttpRequest對象
2、創建http請求
3、發送http請求
4、設置http請求狀態變化的函數
5、獲取服務器返回的數據
示例代碼：
// 1
const xhr = new XMLHttpRequest();
// 2
xhr.open('POST', "http://localhost:xxx");
// 3
xhr.send("a=100&b=200");
// 4
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
// 5
if(xhr.status >= 200 && xhr.status < 300){
result.innerHTML = xhr.response;
}
}
}
二十、說一下HTTP與HTTPS的區別？
1、HTTP是超文本傳輸協議，信息是明文傳輸，HTTPS是由SSL協議 + HTTP協議，信息是加密傳輸
2、HTTPS協議需要花錢申請證書，免費證書少
3、HTTP和HTTPS默認使用的端口不同，前者是80，后者是443
二十一、說一下請求方式post和get的區別？
1、安全性
get請求參數會被拼接到地址欄上，信息會暴露
post請求參數不可見
2、數據傳輸量
get有長度限制
post不會
3、緩存
get數據會被緩存
post不會
4、后端的習慣
查用用get，因為要分頁，有長度限制
增刪改用post
二十二、說一下常見的http狀態碼？
4xx表示客戶端錯誤
401表示請求格式錯誤
402表示請求未授權
403表示禁止訪問
404表示請求的資源不存在，一般是路徑寫錯了
5xx表示服務器錯誤
500表示最常見的服務器錯誤，一般是前端參數傳錯了、或后端代碼寫錯了
503表示服務器構建
二十三、說一下js的模塊化？
作用：
一個模塊就是實現某個特定功能的文件，在文件中定義的變量、函數、類都是私有的，對其他文件不可見。
為了解決引入多個js文件時，出現 命名沖突、污染作用域 等問題
AMD：
瀏覽器端模塊解決方案
AMD即是“異步模塊定義”
在AMD規范中，我們使用define定義模塊，使用require加載模塊
提前執行：它采用異步方式加載模塊，一邊加載一邊執行
依賴前置：依賴必須在定義時引入
CMD：
瀏覽器端模塊解決方案
CMD即是“通用模塊定義”
在CMD規范中，我們使用define定義模塊，使用require加載模塊
延遲執行：它采用異步方式加載模塊，先加載完畢再按需執行
依賴就近：依賴可以在代碼的任意一行引入
CommonJS：
服務器端模塊解決方案
在CommonJS規范中，我們使用module.exports導出模塊，使用require加載模塊
立即執行：它采用同步方式加載模塊，先加載后執行，執行完畢會被緩存
依賴就近：依賴可以在代碼的任意一行引入
ESModule：
瀏覽器端 和 服務器端 通用的模塊解決方案
在ESModule規范中，我們使用export導出模塊，使用import加載模塊
延遲執行：它采用異步方式加載模塊，先加載完畢再按需執行
依賴就近：依賴可以在代碼的任意一行引入
二十四、說一下DOM的操作有哪些？
查：
document.querySelector('選擇器') --- 獲取單個節點
document.querySelectorAll('選擇器') --- 獲取多個節點，偽數組
parentNode：獲取父節點
children: 獲取子節點 --- 偽數組
nextElementSibling：獲取下一個兄弟
previousElementSibling：獲取上一個兄弟
增：
appendChild：添加節點到最后
insertBefore：在某個元素前面插入
cloneNode：克隆節點
刪：
removeChild：刪除子節點
remove：刪除節點
改：
replaceChild：修改子節點
屬性操作：
getAttribute：獲取屬性
setAttribute：設置屬性
內容操作：
innerHTML：獲取/設置代碼內容
innerText：獲取/設置文本內容
二十五、說一下對象創建模式有哪些？
對象字面量（花括號）
工廠模式（對象字面量 + return新對象）
Object構造函數（new Object）
構造函數模式（new function + 屬性、方法都在構造函數上）
原型模式（new function + 屬性、方法都在原型上）
組合模式（屬性在構造函數上 + 方法在原型上）
類（底層就是對 組合模式 進行了封裝）
二十六、說一下對象繼承模式有哪些？
原型鏈繼承（子類原型指向父類實例）
構造函數繼承（借助 call）
組合繼承（原型鏈繼承 + 構造函數繼承）
原型式繼承（借助 Object.create）
寄生式繼承（原型式繼承 + 添加子類方法）
寄生組合繼承（寄生式繼承 + 組合繼承）
extends（底層就是對 寄生組合繼承 進行了封裝）
二十七、說一下執行上下文的理解？
在 代碼執行前 產生
產生變量提升、函數提升的原因
定義：
全局執行上下文對象：在執行全局代碼前，創建對應的全局執行上下文對象，即window對象，進行預處理
函數執行上下文對象：在調用函數后、準備執行函數體之前，創建對應的函數執行上下文對象，進行預處理
塊級私有執行上下文對象：在執行塊級代碼前，創建對應的塊級私有執行上下文對象，進行預處理
執行上下文棧：
存放執行上下文對象的棧
按照上下文對象創建的次序進棧，然后從棧頂依次執行出棧
二十八、說一下什么是作用域、作用域鏈？
在 代碼編寫時 產生
定義：
全局作用域：全局執行上下文對象的有效作用范圍
函數作用域：函數執行上下文對象的有效作用范圍
塊作用域：塊級私有執行上下文對象的有效作用范圍
作用域鏈：
在某一作用域內找某一變量時，先在自身作用域內的執行上下文對象中找，找不到再去父作用域內的執行上下文對象中找，依次向上找，直到全局作用域內的執行上下文對象為止。這個過程稱為作用域鏈。
