深拷貝，淺拷貝
- 深拷貝是開(kāi)辟一塊新的內(nèi)存地址研侣，將源對(duì)象的各個(gè)屬性逐個(gè)復(fù)制過(guò)去，對(duì)拷貝對(duì)象和源對(duì)象各自的操作互不影響
- 遞歸方法：（深拷貝）
function deepCopy(obj) {
var out = (obj.constructor === Array) ? [] : {};
for (var i in obj) {
if (typeof obj[i] === 'object') {
out[i] = (obj[i].constructor === Array) ? [] : {};
out[i] = deepCopy(obj[i]);
} else {
out[i] = obj[i];
}
}
return out;
}
- 淺拷貝（會(huì)導(dǎo)致引用類(lèi)型A和引用類(lèi)型B指向同一塊內(nèi)存地址弄贿。改變其中一方內(nèi)容子库，都是在原來(lái)的內(nèi)存上做修改會(huì)導(dǎo)致對(duì)象和源對(duì)象都發(fā)生改變）
let obj = {a: 1}
obj1 = obj
https://www.cnblogs.com/jiajiamiao/p/11641574.html
promise
- Promise是一種用于解決異步問(wèn)題的思路、方案或者對(duì)象方式。
const fn = new Promise(function (resolve, reject) {
setTimeout(()=>{
let num = Math.random()
if (num > 5) {
resolve(num) //返回值
} else {
reject(‘error’) // 報(bào)錯(cuò)
}
},3000)
})
fn.then((res)=>{
console.log(res) // 隨機(jī)數(shù)
},(err)=>{
console.log(err) // 報(bào)錯(cuò)
})
https://www.cnblogs.com/lunlunshiwo/p/8852984.html
響應(yīng)式旗唁，數(shù)據(jù)綁定
- 數(shù)據(jù)驅(qū)動(dòng)：Vue.js 一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。所謂數(shù)據(jù)驅(qū)動(dòng)是指視圖是由數(shù)據(jù)驅(qū)動(dòng)生成的痹束，對(duì)視圖的修改检疫，不會(huì)直接操作 DOM，而是通過(guò)修改數(shù)據(jù)祷嘶。
- 在vue.js里面只需要改變數(shù)據(jù)屎媳，Vue.js通過(guò)Directives指令去對(duì)DOM做封裝，當(dāng)數(shù)據(jù)發(fā)生變化论巍，會(huì)通知指令去修改對(duì)應(yīng)的DOM烛谊，數(shù)據(jù)驅(qū)動(dòng)DOM的變化，DOM是數(shù)據(jù)的一種自然的映射嘉汰。vue.js還會(huì)對(duì)View操作做一些監(jiān)聽(tīng)（DOM Listener）丹禀，當(dāng)我們修改視圖的時(shí)候，vue.js監(jiān)聽(tīng)到這些變化鞋怀，從而改變數(shù)據(jù)双泪。這樣就形成了數(shù)據(jù)的雙向綁定。
- 大致上是使用數(shù)據(jù)劫持和訂閱發(fā)布實(shí)現(xiàn)雙向綁定密似。通過(guò)實(shí)例化一個(gè)Vue對(duì)象的時(shí)候焙矛，對(duì)其數(shù)據(jù)屬性遍歷，通過(guò)Object.defineProperty()給數(shù)據(jù)對(duì)象添加setter getter残腌，并對(duì)模板做編譯生成指令對(duì)象村斟，每個(gè)指令對(duì)象綁定一個(gè)watcher對(duì)象，然后對(duì)數(shù)據(jù)賦值的時(shí)候就會(huì)觸發(fā)setter抛猫，這時(shí)候相應(yīng)的watcher對(duì)其再次求值蟆盹，如果值確實(shí)發(fā)生變化了，就會(huì)通知相應(yīng)的指令邑滨，調(diào)用指令的update方法日缨，由于指令是對(duì)DOM的封裝，這時(shí)候會(huì)調(diào)用DOM的原生方法對(duì)DOM做更新掖看，這就實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)DOM的變化匣距。同時(shí)vue還會(huì)對(duì)DOM做事件監(jiān)聽(tīng)，如果DOM發(fā)生變化哎壳，vue監(jiān)聽(tīng)到毅待，就會(huì)修改相應(yīng)的data
https://blog.csdn.net/tangxiujiang/article/details/79594860
$set
- 受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除归榕。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter尸红，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。
- 要處理這種情況外里，我們可以使用$set()方法怎爵，既可以新增屬性,又可以觸發(fā)視圖更新。
數(shù)組===> this.$set( Array, index , value)
對(duì)象===>this.$set(Object,''key'',value)
https://blog.csdn.net/aaa333qwe/article/details/80362117
$nextick
- 定義： 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)盅蝗。在修改數(shù)據(jù)之后立即使用這個(gè)方法鳖链，獲取更新后的 DOM。
- 用法1：created
Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中墩莫，原因是在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染芙委，而此時(shí)進(jìn)行DOM操作無(wú)異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中狂秦。與之對(duì)應(yīng)的就是mounted鉤子函數(shù)灌侣，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載已完成。- 用法2：
當(dāng)項(xiàng)目中你想在改變DOM元素的數(shù)據(jù)后基于新的dom做點(diǎn)什么裂问，對(duì)新DOM一系列的js操作都需要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中侧啼；通俗的理解是：更改數(shù)據(jù)后當(dāng)你想立即使用js操作新的視圖的時(shí)候需要使用它
https://blog.csdn.net/zhouzuoluo/article/details/84752280
節(jié)流函數(shù)
- 函數(shù)節(jié)流：針對(duì)調(diào)用頻率高的函數(shù)，通過(guò)設(shè)置定時(shí)器愕秫，使其在執(zhí)行后間隔一段時(shí)間慨菱，才進(jìn)行下一次的執(zhí)行，避免重復(fù)頻繁的調(diào)用導(dǎo)致的瀏覽器性能以及ajax重復(fù)調(diào)用問(wèn)題戴甩。
- 最常見(jiàn)的一些需要節(jié)流的事件：onresize符喝，scroll，mousemove ,mousehover甜孤，因?yàn)檫@些事件會(huì)在頁(yè)面中頻繁被觸發(fā)
- 主要實(shí)現(xiàn)思路就是通過(guò)setTimeout定時(shí)器协饲，通過(guò)設(shè)置延時(shí)時(shí)間，在第一次調(diào)用時(shí)缴川，創(chuàng)建定時(shí)器茉稠，寫(xiě)入需要執(zhí)行的函數(shù)。第二次調(diào)用時(shí)把夸，會(huì)清除前一個(gè)定時(shí)器并設(shè)置新的定時(shí)器而线。如果這時(shí)前一個(gè)定時(shí)器暫未執(zhí)行，則將其替換為新的定時(shí)器恋日。目的在于在一定的時(shí)間內(nèi)膀篮，保證多次函數(shù)的請(qǐng)求只執(zhí)行最后一次調(diào)用
document.querySelector('.box').addEventListener('mouseenter',function(){
console.log('鼠標(biāo)進(jìn)來(lái)啦')
})
節(jié)流函數(shù)
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
clearTimeout(clock)
clock = setTimeout(function(){
console.log('鼠標(biāo)進(jìn)來(lái)啦')
},1000)
})
http://www.reibang.com/p/be095def79ec
子組件改變父組件的值
$emit直接調(diào)用函數(shù)，把參數(shù)傳給父元素岂膳，父元素調(diào)用函數(shù)時(shí)誓竿，賦值就可以了。
https://www.cnblogs.com/doing-good/p/10862491.html
vue .sync修飾符
- vue的prop是單向下行綁定：父級(jí)的prop的更新會(huì)向下流動(dòng)到子組件中谈截，但是反過(guò)來(lái)不行筷屡〗担可是有些情況，我們需要對(duì)prop進(jìn)行“雙向綁定”毙死。這個(gè)時(shí)候燎潮，就可以用.sync來(lái)解決
<text-document :title.sync="doc.title"></text-document>
當(dāng)子組件需要更新 title 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：
this.$emit('update:title', newValue)
https://www.cnblogs.com/00feixi/p/11526057.html
跨域： jsonp扼倘、 document.domain+iframe跟啤、window.name、window.postMessage唉锌、服務(wù)器上設(shè)置代理頁(yè)面
jsonp的原理是動(dòng)態(tài)插入script標(biāo)簽CSS Sprites 圖片精靈
繼承：
繼承：子類(lèi)可以使用父類(lèi)的所有功能，并且對(duì)這些功能進(jìn)行擴(kuò)展竿奏。繼承的過(guò)程袄简，就是從一般到特殊的過(guò)程。
var arr = [8, 7, 6, 5, 4, 3, 2, 1];
function maoPao(s) {
for (var i = 1; i < arr.length; i++) { //進(jìn)行了7次
for (var j = 0; j < arr.length; j++) {
if (arr[j] > arr[j + 1]) {
var temp; //空杯子
temp = arr[j]; //大叔放到空杯子
arr[j] = arr[j + 1]; //小數(shù)放到小的位置上
arr[j + 1] = temp; //da數(shù)放到大的位置上
}
}
}
return arr;
}
console.log(maoPao(arr))
https://www.cnblogs.com/yy0419/p/11137205.html
- es6新增屬性泛啸，與es5比較
塊級(jí)作用域 關(guān)鍵字let, 常量const
箭頭函數(shù)
(1).簡(jiǎn)化了代碼形式绿语，默認(rèn)return表達(dá)式結(jié)果。
(2).自動(dòng)綁定語(yǔ)義this候址，即定義函數(shù)時(shí)的this吕粹。
promise異步請(qǐng)求數(shù)據(jù)
set,map
字符串模板 Template strings
var name = "Bob", time = "today";
Hello ${name}, how are you ${time}?
// return "Hello Bob, how are you today?"
https://www.cnblogs.com/sunshinezjb/p/9248533.html
導(dǎo)航守衛(wèi)
https://www.cnblogs.com/hgdzjp/p/10143707.html作用域（JavaScript中的作用域與變量聲明提升）
https://baijiahao.baidu.com/s?id=1627502571462484522&wfr=spider&for=pc跨域
webpack
jquery 根據(jù)name獲取元素
$('input[name="nw"]' $("[name='theName']");
- canvas畫(huà)圓
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI); x,y,r,開(kāi)始度數(shù)，結(jié)束度數(shù)岗仑，圓是360度（2*Math.PI）
ctx.stroke();
https://www.w3school.com.cn/tags/canvas_arc.asp
怎么理解閉包,內(nèi)存泄漏
https://www.cnblogs.com/wkxdd/p/11222480.html媒體查詢
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式匹耕，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的荠雕。
當(dāng)你重置瀏覽器大小的過(guò)程中稳其，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。
https://www.runoob.com/cssref/css3-pr-mediaquery.html
- 通過(guò)navigator屬性檢查瀏覽器是什么瀏覽器
var cu = navigator.userAgent;
if('ActiveXObject' in window){
alert('是ie瀏覽器')
}else if(/firefox/i.test(cu)){
alert('是火狐瀏覽器')
}else if(/chrome/i.test(cu)){
alert('是谷歌瀏覽器')
}
https://blog.csdn.net/qq_35872777/article/details/85272300
頁(yè)面跳轉(zhuǎn)
https://blog.csdn.net/zhangkeke_/article/details/79730597生命周期
原型鏈炸卑？既鞠？
原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的 proto 屬性盖文，原型也有可能有自己的原型嘱蛋，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈五续。
- 原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的（有限的）對(duì)象鏈洒敏。
- js中的內(nèi)存泄露
- 定義：程序不需要的內(nèi)存，由于某些原因其不會(huì)返回到操作系統(tǒng)或者可用內(nèi)存池中返帕。 內(nèi)存泄露會(huì)導(dǎo)致（運(yùn)行緩慢 桐玻，高延遲，崩潰）的問(wèn)題
- 常見(jiàn)的導(dǎo)致內(nèi)存泄露的原因有：
1荆萤；意外的全局變量
2镊靴；被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)
3铣卡；脫離文檔的DOM的引用
4；閉包
- 跨域
1.CORS跨域資源共享 后端需要設(shè)置Access--Control-Allow-Credentials:true ****
2.jsonp實(shí)現(xiàn)跨域：動(dòng)態(tài)創(chuàng)建script偏竟，利用src屬性進(jìn)行跨域
3.nginx代理跨域
4.nodejs中間件代理跨域
5WebSokect協(xié)跨域
6.window.name+ifram跨域
- url 參數(shù)轉(zhuǎn)對(duì)象
let str = "http://localhost:3000/index.html煮落？phone=12345678901&pwd=123123";
let arr = str.split("?")[1].split("&"); //先通過(guò)？分解得到踊谋？后面的所需字符串蝉仇，再將其通過(guò)&分解開(kāi)存放在數(shù)組里
let obj = {};
for (let i of arr) {
obj[i.split("=")[0]] = i.split("=")[1]; //對(duì)數(shù)組每項(xiàng)用=分解開(kāi)，=前為對(duì)象屬性名殖蚕，=后為屬性值
}
console.log(obj);
https://www.cnblogs.com/zhangzhiyong/p/9949641.html
- 防抖函數(shù)（單位時(shí)間內(nèi)多次觸發(fā)只會(huì)執(zhí)行一次）
//500毫秒內(nèi)多次觸發(fā)只會(huì)執(zhí)行一次轿衔，
function de(){
let timer;
、
return function(){
if(timer) clearTimeout(timer);//如果500毫秒內(nèi)又一次觸發(fā)睦疫，則會(huì)重新計(jì)算時(shí)間
timer = setTimeout(() => {
console.log('dddd')
}, 500)
}
}
document.querySelector('#btn').addEventListener('click',de())
https://blog.csdn.net/weixin_35958891/article/details/94462047
@import和link
優(yōu)化頁(yè)面
sessionStorage用法
position屬性及區(qū)別
去重v-if和c-show 封裝一個(gè)函數(shù)
- 一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成害驹，這個(gè)過(guò)程中都發(fā)生了什么？
分為4個(gè)步驟：
（1）蛤育，當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)宛官，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL，瀏覽器都會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求瓦糕，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢底洗。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址。
（2）咕娄， 瀏覽器與遠(yuǎn)程Web服務(wù)器通過(guò)TCP三次握手協(xié)商來(lái)建立一個(gè)TCP/IP連接亥揖。該握手包括一個(gè)同步報(bào)文，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文谭胚，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞徐块。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求灾而，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文胡控。
（3），一旦TCP/IP連接建立旁趟，瀏覽器會(huì)通過(guò)該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請(qǐng)求昼激。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)锡搜。
（4）橙困，此時(shí)，Web服務(wù)器提供資源服務(wù)耕餐，客戶端開(kāi)始下載資源凡傅。
請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊
簡(jiǎn)單來(lái)說(shuō)肠缔，瀏覽器會(huì)解析HTML生成DOM Tree夏跷，其次會(huì)根據(jù)CSS生成CSS Rule Tree哼转，而javascript又可以根據(jù)DOM API操作DOM
面試題網(wǎng)站
https://www.cnblogs.com/jiajiamiao/p/11609335.html OK V
http://www.reibang.com/p/eb0f269098d5 不是很全 V
https://blog.csdn.net/keyandi/article/details/89227175 OK V
自己了解
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
怎么讓Chrome支持小于12px 的文字?
答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.react
ajax過(guò)程
(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.
(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請(qǐng)求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問(wèn)題?
- 通過(guò)異步模式槽华，提升了用戶體驗(yàn)
- 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸壹蔓，減少不必要的數(shù)據(jù)往返，減少了帶寬占用
- Ajax在客戶端運(yùn)行猫态，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作佣蓉，減少了大用戶量下的服務(wù)器負(fù)載。
- Ajax的最大的特點(diǎn)是什么亲雪。
Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）
readyState屬性 狀態(tài) 有5個(gè)可取值： 0=未初始化 勇凭，1=啟動(dòng) 2=發(fā)送，3=接收义辕，4=完成
ajax的缺點(diǎn)
1套像、ajax不支持瀏覽器back按鈕。
2终息、安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3贞让、對(duì)搜索引擎的支持比較弱周崭。
4、破壞了程序的異常機(jī)制喳张。
5续镇、不容易調(diào)試。
- 握手（3次）
1销部、首先服務(wù)器處于LISTEN（監(jiān)聽(tīng)）狀態(tài)摸航，客戶端向服務(wù)器發(fā)送請(qǐng)求，其中SYN=1舅桩，初始化一個(gè)seq為x
2酱虎、服務(wù)器接收連接請(qǐng)求報(bào)文后，如果同意建立連接擂涛，則向A發(fā)送連接確認(rèn)報(bào)文读串，SYN=1,ACK=1,seq=y,ack=x+1
3、A接收到B發(fā)出的連接確認(rèn)報(bào)文后還需要向B發(fā)送確認(rèn)報(bào)文撒妈。ACK=1,seq=x+1,ack=y+1
4恢暖、B收到A的確認(rèn)后，連接建立 - 揮手（4次）
1狰右、A發(fā)送揮手報(bào)文杰捂，F(xiàn)IN=1, 初始化一個(gè)seq=u
2、B接收到揮手報(bào)文后進(jìn)入CLOSE-WAIT狀態(tài)棋蚌，通知應(yīng)用進(jìn)程嫁佳。并向A發(fā)出確認(rèn)挨队。此時(shí)TCP處于半連接狀態(tài)，即B能向A發(fā)送數(shù)據(jù)而A不能向B發(fā)送數(shù)據(jù)脱拼。ACK=1瞒瘸，seq=v,ack=u+1
3、當(dāng)B不再需要連接時(shí)熄浓，向A發(fā)送第三次揮手報(bào)文情臭，F(xiàn)IN=1,ACK=1,ack=u+1
4、A接收到第三次揮手報(bào)文后向B發(fā)送確認(rèn)赌蔑，并且等待2MSL的時(shí)間再關(guān)閉俯在。
5、B接收到確認(rèn)后直接關(guān)閉連接娃惯。
