<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. 【整理分享】48個前端高頻面試題(附答案解析)

          來源:php中文網 | 2023-01-08 14:50:00 |

          本篇文章給大家總結分享48個前端高頻面試題(附答案解析),帶你梳理vue、javascript等的基礎知識,增強前端知識儲備,值得收藏,快來看看吧!


          【資料圖】

          1.vue雙向數據綁定的原理?

          mvvm場景:數據操作比較多的場景,需要大量使用DOM元素時,采用mvvm的開放方式,會更加便捷,讓開發者更多的經歷放在數據的變化上,解放繁瑣的DOM元素

          MVVM 模型,

          M 數據 從后臺獲取的商品數據

          V 視圖 就是寫好的頁面,每一個div,每一個input 都是視圖

          VM 視圖模型,

          數據發生變化,通過視圖模型會改變視圖的顯示,視圖上的改變,也會通過視圖模型進而影響數據的變化 【相關推薦:vuejs視頻教程、web前端開發】

          核心:關于VUE雙向數據綁定,其核心是 Object.defineProperty()方法。

          2.vue的生命周期有哪些

          beforeCreate(創建前)、created(創建后)、beforeMount(載入前)、mounted(載入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(銷毀前)、destroyed(銷毀后)

          mounted 真實dom掛載完成 updated只要data數據被改變 就會自動更新觸發 destroy銷毀全局計時器和自定義事件

          如果使用了keep-alive會在多兩個:activated、deactivated當組件初次加載會執行前4個生命周期,分別為: beforeCreate、created、beforeMount、mounted

          3.v-if 和v-show有什么區別?

          相同點:都可以控制dom元素的顯示和隱藏

          不同點:v-show只是改變display屬性,dom元素并未消失,切換時不需要重新渲染頁面

          v-if直接將dom元素從頁面刪除,再次切換需要重新渲染頁面

          4.async await 是什么?它有哪些作用?

          async await 是ES7的新增,async用于聲明一個函數,await用于等待一個異步方法執行完成。async函數返回的是一個promise對象,可以用.then方法添加回調函數,在函數執行的中,一旦遇到await就回先返回,等到這個異步操作完成之后,它再進行函數體內后面的這個語句

          5、數組常用的方法?哪些方法會改變原數組,哪些不會

          會改變原數組:

          pop (刪除數組的最后一個元素并返回刪除的元素)

          push(向數組的末尾添加一個或更多元素,并返回新的長度)

          shift(刪除并返回數組的第一個元素)

          unshift(向數組的開頭添加一個或更多元素,并返回新的長度)

          reverse(反轉數組的元素順序)

          sort(對數組的元素進行排序)

          splice(用于插入、刪除或替換數組的元素)

          不會改變原數組:

          concat---連接兩個或更多的數組,并返回結果。

          every---檢測數組元素的每個元素是否都符合條件。

          some---檢測數組元素中是否有元素符合指定條件。

          filter---檢測數組元素,并返回符合條件所有元素的數組。

          indexOf---搜索數組中的元素,并返回它所在的位置。

          join---把數組的所有元素放入一個字符串。

          toString---把數組轉換為字符串,并返回結果。

          lastIndexOf---返回一個指定的字符串值最后出現的位置,在一個字符串中的指定位置從后向前搜索。

          map---通過指定函數處理數組的每個元素,并返回處理后的數組。

          slice---選取數組的的一部分,并返回一個新數組。

          valueOf---返回數組對象的原始值

          6.什么是原型鏈?

          每一個實例對象上有一個proto屬性,指向的構造函數的原型對象,構造函數的原型對象也是一個對象,也有proto屬性,這樣一層一層往上找的過程就形成了原型鏈。

          7.什么是閉包?閉包有哪些優缺點?

          概念:函數嵌套函數,內部變量能訪問外部變量,這個變量稱為自由變量 解決的問題:保存變量 帶來的問題:會造成內存泄漏問題 閉包的應用:防抖節流

          8.es6有哪些新特性?

          新增模板字符串箭頭函數for-of(用來遍歷數據—例如數組中的值。)ES6 將 Promise 對象納入規范,提供了原生的 Promise 對象。增加了 let 和 const 命令,用來聲明變量。還有就是引入 module 模塊的概念

          9.v-for 循環為什么一定要綁定key ?

          給每個dom元素加上key作為唯一標識 ,diff算法可以正確的識別這個節點,使頁面渲染更加迅速!

          10.組件中的data為什么要定義成一個函數而不是一個對象?

          每個組件都是 Vue 的實例。組件共享 data 屬性,當 data 的值是同一個引用類型的值時,改變其中一個會影響其他

          11.常見的盒子垂直居中的方法有哪些請舉例3種?

          利用子絕父相定位方式來實現

          <style>        .container{            width: 300px;            height: 300px;            position: relative;        }        .conter{            width: 100px;            height: 100px;            position: absolute;            top: 50%;            left: 50%;            margin-top: -50px;            margin-left: -50px;        }    </style>

          利用Css3的transform,可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。

          <style>        .container{            position: relative;        }        .conter{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style>

          flex

          <style>        .container{         display: flex;         justify-content: center;         align-items: center;        }        .conter{                    }    </style>

          12.js數據類型有哪些,區別是什么

          基本類型:string,number,boolean,null,undefined,symbol,bigInt引用類型: object,array基本類型存儲在棧中,空間小,操作頻繁引用數據類型存放在堆中,它的地址在棧中,一般我們訪問就是它的地址

          13.什么是symbol

          是es6引入新的原始數據類型Symbol,表示獨一無二的值

          14.什么是同源策略

          所謂同源策略就是瀏覽器的一種安全機制,來限制不同源的網站不能通信(域名、協議、端口號相同)

          15.promise是什么,有什么作用

          promise 是一個對象, 可以從改變對象獲取異步操作信息他可以解決回調地獄的問題,也就是異步深層嵌套問題

          16.什么是遞歸,遞歸有哪些優缺點?

          遞歸:如果函數在內部可以調用其本身,那么整函數就是遞歸函數,簡單理解:函數內部自己調用自己,這個函數就是遞歸函數,優點:機構清晰,可讀性強缺點:效率低,調用站可能溢出,其實每一次函數調用會在內存棧中分配空間,而每個進程的棧的內容糧食有限的。當調用的層次太多時,就會超出棧的容量,從而導致棧溢出

          17.let和const 的區別是什么

          let 命令不存在變量提升,如果在 let 前使用,會導致報錯如果塊區中存在 let 和 const 命令,就會形成封閉作用域不允許重復聲明const定義的是常量,不能修改,但是如果定義的是對象,可以修改對象內部的數據

          18.vue性能優化

          函數式組件 路由懶加載v-for要綁定key key是虛擬dom唯一標志,能幫vue高效的動態渲染頁面,渲染頁面時會使用diff算法,會比較新舊dom,在比較時只比較同一級,不進行跨級比較,key發生變化節點進行銷毀,并且是子節點先銷毀。computed緩存數據和watch keep-alive緩存組件v-if和v-for不要同時使用,v-show是display,銷毀是display-none.v-if為true創建.false銷毀。設計vue響應式數據時不能設計太深.會做全量遞歸的計算.組件的顆粒度不能設計太細.合理劃分.層級越深性能消耗越大防抖節流ui組件庫按需引入

          19..mvvm和mvc

          m(數據層)v(視圖層)vm(數據視圖交互層)簡化了大量dom操作 ,只用于單頁面,通過數據來顯示視圖層而不是節點操作。mvc還需要獲取dom,使頁面渲染性能低且加載速度慢面試可以說的項目優化:設計vue響應式數據時不能設計太深.會做全量遞歸的計算.組件的顆粒度不能設計太細.合理劃分.層級越深性能消耗越大

          20.路由模式:hash和history

          實現的功能:

          改變url且不讓瀏覽器向服務器發請求

          檢測url的變化

          截獲url地址 并解析出需要的信息匹配路由規則

          hash基于url傳參 會有體積限制,不會包括在http請求中對后端完全沒有影響,改變hash不會重新加載頁面; history可以在url里放參數 還可以將數據存放在一個特定對象中.history模式瀏覽器白屏解決方法是在服務端加一個覆蓋所有的情況候選資源,必須要服務端在服務器上有對應的模式才能使用,如果服務器沒配置,可以先使用默認的hash。

          21.常用的塊與行屬性內標簽有哪些?有什么特征

          塊標簽:div、h1~h6、ul、li、table、p、br、form。特征:獨占一行,換行顯示,可以設置寬高,可以嵌套塊和行行標簽:span、a、img、textarea、select、option、input。特征:只有在行內顯示,內容撐開寬、高,不可以設置寬、高(img、input、textarea等除外)

          22.== 和 ===的區別

          ==是非嚴格意義上的相等值相等就相等===是嚴格意義上的相等,會比較兩邊的數據類型和值大小值和引用地址都相等才相等

          23.嚴格模式的限制

          變量必須聲明后再使用函數的參數不能有同名屬性,否則報錯不能使用 with 語句禁止 this 指向全局對象

          24.git

          git init 初始化倉庫git clone 克隆git status 檢查文件狀態git add. 將文件添加到暫存區git commit -m 描述信息

          25.tcp和udp協議

          tcp安全性更高 http協議是建立在tcp基礎上的udp效率比tcp高 容易丟數據

          26.vuex的五種狀態

          mutations(修改state里面的數據,但是他只能執行同步的操作,異步必須寫在action里面)state(放數據)action(執行異步操作)getter(計算屬性)moudel(允許將單一store拆分多個store并且同時保存在單一的狀態中)

          傳遞過程

          頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation,mutation會修改state中對應的值。 最后通過getter把對應值跑出去,在頁面的計算屬性中,通過,mapGetter來動態獲取state中的值

          27.什么是防抖和節流,js 如何處理防抖和節流

          首先 防抖就是觸發下一個事件時停止掉上一個事件

          節流是 觸發當前事件需要在上一個事件結束以后

          通過設置節流閥(定時器)

          28.什么是重繪和回流

          重繪:當元素內容以及布局沒有發生改變,只是元素外觀發生改變(background-color),就會重繪回流:當一部分內容或者布局發生了改變,重新構建頁面就會產生回流 產生回流一定會造成重繪,但是重繪不一定造成回流

          29.Css優先級

          !importent>行內> id> 類,偽類,屬性>標簽,偽元素選擇器 > 繼承和通配符

          30.如何解決盒子塌陷

          父盒子設置上邊距

          overflow:hidden

          子盒子脫標

          父盒子上 padding

          31.清楚浮動的方法

          一共有5中方法

          父盒子設置高度

          overflow:hidden

          偽元素

          雙偽元素

          在父盒子末尾添加一個空盒子,設置 clear:both

          32.Split()和 join()的區別?

          split 字符串轉換為數組,參數為以某個字符串分隔join 數組轉換為字符串 參數表示轉換為的字符串以什么連接

          33.數組去重

          1.利用雙重for循環,再利用數組方法splice方法去重(es5常用)

          2.set去重:準備一個數組,數組解構newset,再準備一個函數存放數組的變量作為函數的判斷值,return Array.from(new set(arr))即可

          3.數組方法indexof

          4.數組方法sort Obj[a]-Obj[b]

          34.什么原因會造成內存泄露

          全局變量使用不當(沒有聲明的變量)閉包使用不當定時器/延時器沒有清理沒有清理的DOM元素引用(dom清空或刪除時,事件未清除)

          35.第一次加載頁面會觸發哪幾個鉤子函數?

          beforeCreate

          created 數據初始化完成,方法也調用,但是DOM未渲染

          beforeMount

          mounted DOM和數據掛在完成

          36.Vuex 的 5 個核心屬性是什么?

          state => 基本數據

          getters => 從基本數據(state)派生的數據,相當于state的計算屬性

          mutations => 提交更改數據的方法,同步!

          actions => 像一個裝飾器,包裹mutations,使之可以異步。

          modules => 模塊化Vuex

          簡述vuex數據傳遞過程

          頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation,mutation會修改state中對應的值。 最后通過getter把對應值跑出去,在頁面的計算屬性中,通過,mapGetter來動態獲取state中的值

          37.get和post區別

          相同點get請求和post請求底層都是基于TCP/IP協議實現的,使用二者中的任意一個,都可以實現客戶端和服務器端的雙向交互

          最本質的區別

          約定和規范:規范:定義GET請求是用來獲取資源的,也就是進行查詢操作的,POST請求是用來傳輸實體對象的, 用于 增刪改操作約定:GET請求 將參數拼接到URL上進行參數傳遞 POST請求將參數寫入請求正文中傳遞

          非本質區別

          緩存不同 ,get會緩存參數長度限制不同,get請求的參數是通過URL傳遞的,而URL的長度是有限制的,通常為2K;post請求參數存放在請求正文中,沒有大小限制回退和刷新不同,get請求可以直接回退和刷新,不會對用戶和程序產生影響;post請求如果直接回滾和刷新,數據將會再次提交歷史記錄不同,get請求的參數會保存在歷史記錄中,post請求的參數不會書簽不同,get請求的地址可以被收藏為書簽,post不會

          38.跨域

          跨域原因:瀏覽器出于安全考慮保護資源,同源策略。(協議、域名、端口號)解決跨域:jsonP 但只能使用get 原理-將請求的接口設置給script標簽的src屬性傳遞一個函數給后臺實現跨域。后臺響應的是一個函數調用cors:最常用。反向代理:本地前端發送到本地后端,不會跨域,(同源)本地后端接收請求后轉發到其他服務器(服務器和服務器之間不會跨域)代理是需要路徑中的特殊標志。

          39.三種存儲的區別

          cookie 設置過期時間刪除,即使窗口或瀏覽器關閉localStorage 存儲量大,存儲持久數據,瀏覽器關閉后數據不會丟失除非手動刪除sessionStorage臨時存儲,關閉瀏覽器是存儲內容自動清除

          存儲大?。?/strong>

          cookie 數據大小不能超過4ksessionStorage和localStorage雖然也有存儲大小的限制,單筆cookie大得多,可達到5m或更大

          40.dom如何實現瀏覽器內多個標簽頁之間的通信

          websocket.SharedWoeket;也可以調用localStorage、cookies等本地存儲方式;localStorage另一個瀏覽器上下文里被添加、修改或刪除時,他都會觸發一個事件,我們通過監聽事件,控制他的值進行頁面信息通信;注意quirks:Safari在無痕模式下設置localStorage值時會拋出,quotaExceededError的異常

          41.請說出vue.cli項目中src目錄每個文件夾和文件的用法?

          assets文件夾是放靜態資源;components是方組件;router是定義路由相關的配置view是視圖app.vue是一個應用主組件main.js是入口文件

          42.$route和$router的區別

          router為VueRouter的實例,相當于一個全局的路由器對象,里面含有很多屬性和子對象,例如history對象。。。經常用的跳轉鏈接就可以用this.$router.push,和router-link跳轉一樣。

          route相當于當前正在跳轉的路由對象。??梢詮睦锩娅@取name,path,params,query等

          43.虛擬dom實現原理

          用JavaScript對象模擬真實DOM樹,對真實DOM進行抽象diff算法:比較兩棵虛擬樹的差異pach算法:將兩個虛擬DOM對象的差異應用到真實的DOM樹

          44.普通函數和箭頭函數的區別

          箭頭函數沒有原型,原型是undefined箭頭函數this指向全局對象,而函數指向引用對象call,apply,bind方法改變不了箭頭函數的指向

          45.怎樣理解vue單項數據流

          數據總是從父組件傳到子組件,子組件沒有權利修改父組件傳過來的數據,只能請求父組件對原數據進行修改

          46.slot插槽

          slot插槽,可以理解為slot在組件模板中提前占據了位置,當復用組件時,使用相關的slot標簽時,標簽里的內容就會自動替換組件模板中對應slot標簽的位置,作為承載分發內容的出口主要作用是:復用和擴展組件,做一些定制化組件的處理

          47.vue常見指令

          48.vue中keep-alive 的作用

          < keep-alive >是Vue的內置組件,能在組件切換過程中將狀態保留在內存中,防止重復渲染DOM。< keep-alive > 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。

          (學習視頻分享:vuejs入門教程、編程基礎視頻)

          以上就是【整理分享】48個前端高頻面試題(附答案解析)的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: javascript 前端面試題

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>