一.Ajax和axios的header配置有哪些
axios 的post
request
.post("https://passport.artron.net/getpasswd/verify", formdata, {
headers: { "X-Requested-With": "XMLHttpRequest" },
})
axios 的get
axios.get(this.getUrl(url), {params:data,headers: {userId,token}})
我們現(xiàn)在來說說post請求常見的數(shù)據(jù)格式（content-type）
Content-Type: application/json ： 請求體中的數(shù)據(jù)會以json字符串的形式發(fā)送到后端
Content-Type: application/x-www-form-urlencoded：請求體中的數(shù)據(jù)會以普通表單形式（鍵值對）發(fā)送到后端
Content-Type: multipart/form-data： 它會將請求體的數(shù)據(jù)處理為一條消息萎坷，以標(biāo)簽為單元技即，用分隔符分開赏迟。既可以上傳鍵值對瞄桨，也可以上傳文件庄拇。
如果接受的數(shù)據(jù)類型是Content-Type: application/json時
這種是axios默認(rèn)的請求數(shù)據(jù)類型为狸，我們只需將參數(shù)序列化json字符串進(jìn)行傳遞即可量窘，無需多余的配置
let params = {'title':'test', 'sub' : [1,2,3]}
axios({
method: 'post',
url: '/api/lockServer/search',
params
})
最終發(fā)送的請求是
{"title":"test","sub":[1,2,3]}
如果接受的數(shù)據(jù)類型是Content-Type:：application/x-www-form-urlencoded時有兩種傳遞方式
1.【用 URLSearchParams 傳遞參數(shù)】代碼簡單弯囊，省事含滴，不需要配置請求頭
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/lockServer/search',
data: param
})
2.需要先配置axios請求頭中的content-type為指定類型
配置axios請求頭中的content-type為指定類型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}
再將參數(shù)轉(zhuǎn)換為query參數(shù), 利用qs,引入 qs 诱渤，這個庫是 axios 里面包含的，不需要再下載了谈况。
import Qs from 'qs'
let data = {
"username": "cc",
"psd": "123456"
}
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
url: '/api/lockServer/search',
data: Qs.stringify(data)
})
如果接受的數(shù)據(jù)類型是 Content-Type:Content-Type: multipart/form-data
let params = new FormData()
params.append('file', this.file)
params.append('id', localStorage.getItem('userID'))
params.append('userName', this.name)
params.append('sex', this.sex)
params.append('mobile', this.phone)
params.append('email', this.email)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)
axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
if (res.data.code === 0) {
this.$router.go(-1)
}
}).catch(error => {
alert('更新用戶數(shù)據(jù)失敗' + error)
})
二勺美、for in 和for of 的區(qū)別
兩者區(qū)別：
1.for-in只是獲取數(shù)組的索引；而for-of會獲取數(shù)組的值
2.for-in會遍歷對象的整個原型鏈碑韵，性能差赡茸；而for-of只遍歷當(dāng)前對象，不會遍歷原型鏈
3.對于數(shù)組的遍歷祝闻，for-in會返回數(shù)組中所有可枚舉的屬性(包括原型鏈上可枚舉的屬性)占卧；for-of只返回數(shù)組的下標(biāo)對應(yīng)的屬性值
4.for-of適用遍歷數(shù)組／字符串/map/set等有迭代器對象的集合，但是不能遍歷普通對象（obj is not iterable）
補(bǔ)充說明for-of只遍歷當(dāng)前有迭代器對象的集合联喘，不會遍歷原型鏈
for in 實例
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 123
arr.name = 'Jessica'
for (let index in arr) {
if (index == 2) {
// break;//0,1
// continue;//0,1,3,4
// return;//0,1
}
console.log(index, arr[index]);//遍歷[1,2,3,4,5,Jessica,123]
for of 實例
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 321
arr.name = 'Mars'
for (let value of arr) {
console.log(value);//只能拿到[1,2,3,4,5]
}
三华蜒、淺拷貝和深拷貝
1.淺拷貝
淺拷貝只復(fù)制某個對象的引用，而不復(fù)制對象本身豁遭，新舊對象還是共享同一塊內(nèi)存
Object.assign()方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標(biāo)對象叭喜，然后返回目標(biāo)對象。Object.assign()拷貝的是對象的屬性的引用蓖谢，而不是對象本身
2.深拷貝
a捂蕴、JSON轉(zhuǎn)換
缺點：
1 如果對象有函數(shù)，函數(shù)無法被拷貝下來
2無法拷貝對象原型鏈上的屬性和方法
3當(dāng)數(shù)據(jù)的層次很深闪幽，會棧溢出
b啥辨、遞歸函數(shù)
四、es6新增語法
https://blog.csdn.net/weixin_47295135/article/details/109602321
五盯腌、防抖和節(jié)流
防抖能不斷延時溉知，直到到達(dá)時間發(fā)送請求，節(jié)流是在規(guī)定的時間間隔內(nèi)只能觸發(fā)一次
基本思路：定義一個定時器，假設(shè)延時1000ms着倾，如果你正在輸入內(nèi)容拾酝，定時器不斷刷新，不斷延時1000ms卡者，不觸發(fā)請求蒿囤，當(dāng)停止輸入時，定時器生效崇决，發(fā)送請求
// 定義防抖函數(shù)
function debounce(fn, delay=500) { // （操作函數(shù)材诽，延時時間）
let timer = null;
return function() {
if (timer) {
clearTimeout(timer); // timer存在則清除
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
const input = document.getElementById("input1");
input.addEventListener('keyup', debounce(function(){
console.log(input.value);
}, 1000));
節(jié)流 還是使用定時器，每固定一個時間段觸發(fā)一次請求
// 定義節(jié)流函數(shù)
function throttle(fn, delay=500) { // 操作函數(shù)恒傻，延時時間
let timer = null;
return function() {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
const drag1 = document.getElementById('drag');
drag1.addEventListener('drag', throttle(function(e) { // 監(jiān)聽拖拽事件
console.log(e.offsetX, e.offsetY); // 打印當(dāng)前位置
}, 1000))
防抖的應(yīng)用場景：
1.監(jiān)聽瀏覽器窗口的resize事件（不管窗口怎么變化脸侥，只執(zhí)行最后一次，所以每次觸發(fā)瀏覽器的resize事件時盈厘，應(yīng)該重新觸發(fā)回調(diào)函數(shù)睁枕，即響應(yīng)事件）
2.在帶有Ajax請求的input上輸入實時搜索事件（不管輸入什么，只在用戶停止輸入時才發(fā)送請求）
節(jié)流的應(yīng)用場景：
1.下拉加載更多（無限滾動）事件
