數(shù)組去重

1?雙重循環(huán)對比去重

2 利用對象的屬性不能相同去重

3 循環(huán)中使用indexOf或者includes判斷去重

4 使用set去重

function removeRepeatArr(arr) { return Array.from(new Set(arr));?}

對象數(shù)組去重(reduce)

constnewArray =arr.reduce((item,next)=>{hash[next.key]?'':hash[next.key]=true&&item.push(next);returnitem;},[])

filter與find區(qū)別

find() 方法返回通過測試函數(shù)的第一個元素的值

filter() 方法創(chuàng)建一個包含所有通過測試函數(shù)的元素的新數(shù)組

如果沒有值滿足測試函數(shù)

find() 返回undefined,?filter() 返回一個空數(shù)組

webpack的作用

webpack打包原理是根據(jù)文件間的依賴關(guān)系對其進(jìn)行靜態(tài)分析，將這些模塊按指定規(guī)則生成靜態(tài)資源嵌施，當(dāng)webpack處理程序時饲化，它會遞歸地構(gòu)建一個依賴關(guān)系圖，將所有這些模塊打包成一個或多個bundle.

Entry：指定webpack開始構(gòu)建的入口模塊吗伤，從該模塊開始構(gòu)建并計算出直接或間接依賴的模塊或者庫Output：告訴webpack如何命名輸出的文件以及輸出的目錄

Output：告訴webpack如何命名輸出的文件以及輸出的目錄

Loaders：由于webpack只能處理javascript吃靠，所以我們需要對一些非js文件處理成webpack能夠處理的模塊，比如sass文件

Plugins：Loaders將各類型的文件處理成webpack能夠處理的模塊足淆，plugins有著很強的能力巢块。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。但也是最復(fù)雜的一個责循。比如對js文件進(jìn)行壓縮優(yōu)化的UglifyJsPlugin插件

Chunk：coding split的產(chǎn)物硼砰，我們可以對一些代碼打包成一個單獨的chunk，比如某些公共模塊比藻，去重，更好的利用緩存抑进∶忠觯或者按需加載某些功能模塊南片，優(yōu)化加載時間。在webpack3及以前我們都利用CommonsChunkPlugin將一些公共代碼分割成一個chunk庭敦，實現(xiàn)單獨加載疼进。在webpack4 中CommonsChunkPlugin被廢棄，使用SplitChunksPlugin

http協(xié)議中的緩存控制

1.強緩存：不會向服務(wù)器發(fā)送請求秧廉，直接從緩存中讀取資源伞广，在chrome控制臺的Network選項中可以看到該請求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache兩種（灰色表示緩存）疼电。

2.協(xié)商緩存：向服務(wù)器發(fā)送請求嚼锄，服務(wù)器會根據(jù)這個請求的requestheader的一些參數(shù)來判斷是否命中協(xié)商緩存，如果命中蔽豺，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源区丑；

共同點：都是從客戶端緩存中讀取資源；

區(qū)別是強緩存不會發(fā)請求修陡，協(xié)商緩存會發(fā)請求沧侥。

水平垂直居中

1 絕對定位

.parent{ position: relative;}

.child{ position: absolute; left: 50%; top: 50%;? ? transform: translate(-50%,-50%);??? }

2 flex布局

.parent{???????display: flex;???????justify-content: center;???????align-items: center;}

預(yù)加載

?1、什么是預(yù)加載

提前加載圖片魄鸦，當(dāng)用戶需要查看時可直接從本地緩存中渲染

?2宴杀、實現(xiàn)預(yù)加載的方法

單純的css 實現(xiàn)，可通過CSS的background屬性將圖片預(yù)加載到屏幕外的背景上号杏。只要這些圖片的路徑保持不變婴氮，當(dāng)它們在Web頁面的其他地方被調(diào)用時，瀏覽器就會在渲染過程中使用預(yù)加載（緩存）的圖片盾致。簡單主经、高效，不需要任何JavaScript庭惜。

懶加載

當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時罩驻，才設(shè)置圖片真正的路徑，讓圖片顯示出來护赊，這就是圖片的懶加載

頁面中img元素惠遏，如果沒有src屬性，瀏覽器就不會發(fā)出請求去下載圖片骏啰，只有通過js設(shè)置圖片路徑节吮，瀏覽器才會發(fā)送請求；懶加載的原理是先在頁面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位判耕，把真正的路徑存在元素的‘data-url’屬性中透绩，要使用的時候，在設(shè)置。

localStorage. sessionStorage帚豪、 Cookie不同點

1?存儲大小的不同

localStorage的大小一般為5M碳竟；sessionStorage的大小一般為5M；cookies的大小一般為4K

2 有效期不同:

1.localStorage的有效期為永久有效狸臣，除非你進(jìn)行手動刪除莹桅。2.sessionStorage在當(dāng)前會話下有效，關(guān)閉頁面或者瀏覽器時會被清空烛亦。3.cookies在設(shè)置的有效之前有效诈泼，當(dāng)超過有效期便會失效。

3?與服務(wù)器端的通信

1.localStorage不參與服務(wù)器端的通信此洲。2.sessionStorage不參與服務(wù)器端的通信厂汗。3.cookies參與服務(wù)器端通信，每次都會存在http的頭信息中呜师。(如果使用cookie保存過多數(shù)據(jù)會帶來性能問題)

git常用命令

git push origin 分支名 --force? ? ? ? //?git強制提交本地分支覆蓋遠(yuǎn)程分支

git reset --hard origin/master? ? ? ??//?git強制提交遠(yuǎn)程分支覆蓋本地分支

https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

閉包、原型和原型鏈問題

https://www.cnblogs.com/hejun26/p/10910590.html

一些前端文章

https://juejin.cn/user/1626932942224398/posts

setTimeOut和setInterval的區(qū)別贾节，為什么要用setTimeOut模擬setInterval

setTimeout和setInterval都屬于JS中的定時器汁汗，可以規(guī)定延遲時間再執(zhí)行某個操作，不同的是setTimeout在規(guī)定時間后執(zhí)行完某個操作就停止了栗涂；而setInterval則可以一直循環(huán)下去知牌，要想停止，可用window.clearInterval( );

使用 setTimeout 實現(xiàn) setInterval 的根本原因是：setTimeout 不管上次異步任務(wù)是否完成斤程，它都會將當(dāng)前異步任務(wù)推入隊列（很容易理解角寸，setTimeout本身就是一次調(diào)用一次執(zhí)行），而 setInterval 則會在任務(wù)推入異步隊列時判斷上次異步任務(wù)是否被執(zhí)行忿墅。這就導(dǎo)致 setInterval 在做定時輪訓(xùn)時扁藕，出現(xiàn)耗時操作，或者調(diào)用的異步操作耗時會導(dǎo)致異步任務(wù)不按照期待的時間間隔執(zhí)行疚脐。setTimeout 保證調(diào)用的時間間隔是一致的亿柑，setInterval的設(shè)定的間隔時間包括了執(zhí)行回調(diào)的時間。

Promise, Promise.all, Promise.race

Promise?異步編程的一種解決方案
? ? 1棍弄、 對象的狀態(tài)不受外界影響望薄。Promise對象代表一個異步操作，有三種狀態(tài)：pending（進(jìn)行中）呼畸、resolved（已成功）和rejected（已失敽壑А）

? ? 2、一旦狀態(tài)改變蛮原，就不會再變卧须，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閞esolved和從pending變?yōu)閞ejected

? ? 3故慈、promise內(nèi)部發(fā)生錯誤板熊，不會影響到外部程序的執(zhí)行。

? ? 4察绷、無法取消Promise干签。一旦新建它就會立即執(zhí)行，無法中途取消拆撼。其次容劳，如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤闸度，不會反應(yīng)到外部竭贩。第三，當(dāng)處于pending狀態(tài)時莺禁，無法得知目前進(jìn)展到哪一個階段（剛剛開始還是即將完成)

傳一個promise的數(shù)組留量，當(dāng)所有的promise都完成（resolved）,回調(diào)所有成功的結(jié)果， 如果有一個回調(diào)執(zhí)行失敗哟冬，then是不會執(zhí)行的楼熄，則在catch回調(diào)第一個失敗的結(jié)果

Promise.race(iterable)?方法返回一個?promise，一旦迭代器中的某個 promise 解決或拒絕浩峡，返回的 promise 就會解決或拒絕可岂。

Flex布局的常用屬性

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

事件循環(huán)（宏任務(wù)，微任務(wù)）

https://blog.csdn.net/YeChan414/article/details/123960680

https://baijiahao.baidu.com/s?id=1700872230388832314&wfr=spider&for=pc

js中翰灾，微任務(wù)總是先于宏任務(wù)執(zhí)行缕粹，也就是說，這三種任務(wù)的執(zhí)行順序是：同步任務(wù)>微任務(wù)>宏任務(wù)

I/O纸淮、定時器平斩、事件綁定、ajax等都是宏任務(wù)

Promise的then萎馅、catch双戳、finally和process的nextTick都是微任務(wù)?

注意：Promise的then等方法是微任務(wù)，而Promise中的代碼是同步任務(wù)糜芳，并且飒货，nextTick的執(zhí)行順序優(yōu)先于Promise的then等方法，因為nextTick是直接告訴瀏覽器說要盡快執(zhí)行峭竣，而不是放入隊列

React native調(diào)用原生的原理

React Native 需要一個 JS 的運行環(huán)境塘辅，因為 React Native 會把應(yīng)用的 JS 代碼編譯成一個 JS 文件（x x.bundle），React Native 框架的目標(biāo)就是解釋運行這個 JS 腳本文件皆撩，如果是 Native 拓展的 API扣墩，則直接通過 bridge 調(diào)用 Native 方法哲银，最基礎(chǔ)的比如繪制 UI 界面，映射 Virtual DOM 到真實的 UI 組件中呻惕。

JavaScriptCore 是 JavaScript 引擎荆责，通常會被叫做虛擬機，專門設(shè)計來解釋和執(zhí)行 JavaScript 代碼亚脆。在 React Native 里面做院，JavaScriptCore 負(fù)責(zé) bundle 產(chǎn)出的 JS 代碼的解析和執(zhí)行。

https://juejin.cn/post/6916452544956858382