老張前端: 2022年必刷前端面試題，前端高頻面試題，前端面試題

第一章 面試題基礎篇

1.1 HTML面試題

1.1.1 行內元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？

行內元素：span、img、input... 塊級元素：div、footer、header、section、p、h1...h6... 空元素：br、hr...元素之間的轉換問題： display: inline; 把某元素轉換成了行內元素 ===>不獨占一行的，并且不能設置寬高 display: inline-block; 把某元素轉換成了行內塊元素 ===>不獨占一行的，可以設置寬高 display: block; 把某元素轉換成了塊元素 ===>獨占一行，并且可以設置寬高

1.1.2 頁面導入樣式時，使用link和@import有什么區別？

區別一：link先有，后有@import（兼容性link比@import兼容）； 區別二：加載順序差別，瀏覽器先加載的標簽link，后加載@import

1.1.3 title與h1的區別、b與strong的區別、i與em的區別？

title與h1的區別：定義：title：概括了網站信息，可以告訴搜索引擎或者用戶關于這個網站的內容主題是什么h1：文章主題內容，告訴蜘蛛我們的網站內容最主要是什么 區別：title他是顯示在網頁標題上、h1是顯示在網頁內容上title比h1添加的重要 (title > h1 ) ==》對于seo的了解 場景：網站的logo都是用h1標簽包裹的 b與strong的區別：定義：b：實體標簽，用來給文字加粗的。strong：邏輯標簽，用來加強字符語氣的。 區別：b標簽只有加粗的樣式，沒有實際含義。strong表示標簽內字符比較重要，用以強調的。 題外話：為了符合css3的規范，b盡量少用該用strong就行了。 i與em的區別：定義：i:實體標簽，用來做文字傾斜的。em：是邏輯標簽，用來強調文字內容的 區別：i只是一個傾斜標簽，沒有實際含義。em表示標簽內字符重要，用以強調的。 場景：i更多的用在字體圖標，em術語上（醫藥，生物）。

1.1.4 img標簽的title和alt有什么區別？

區別一：title ： 鼠標移入到圖片顯示的值alt ： 圖片無法加載時顯示的值 區別二：在seo的層面上，蜘蛛抓取不到圖片的內容，所以前端在寫img標簽的時候為了增加seo效果要加入alt屬性來描述這張圖是什么內容或者關鍵詞。

1.1.5 png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？

png:無損壓縮，尺寸體積要比jpg/jpeg的大，適合做小圖標。 jpg:采用壓縮算法，有一點失真，比png體積要小，適合做中大圖片。 gif:一般是做動圖的。 webp：同時支持有損或者無損壓縮，相同質量的圖片，webp具有更小的體積。兼容性不是特別好。

1.2 CSS面試題

1.2.1 介紹一下CSS的盒子模型

CSS的盒子模型有哪些：標準盒子模型、IE盒子模型 CSS的盒子模型區別：標準盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ） 通過CSS如何轉換盒子模型：box-sizing: content-box; /*標準盒子模型*/box-sizing: border-box; /*IE盒子模型*/

1.2.2 line-height和heigh區別【大廠】

line-height是每一行文字的高，如果文字換行則整個盒子高度會增大（行數*行高）。 height是一個死值，就是這個盒子的高度。

1.2.3 CSS選擇符有哪些？哪些屬性可以繼承？

CSS選擇符：通配（*）id選擇器（#）類選擇器（.）標簽選擇器（div、p、h1...）相鄰選擇器(+)后代選擇器(ul li)子元素選擇器（ > ）屬性選擇器(a[href])CSS屬性哪些可以繼承：文字系列：font-size、color、line-height、text-align... ***不可繼承屬性：border、padding、margin...

1.2.4 CSS優先級算法如何計算？

優先級比較：!important > 內聯樣式 > id > class > 標簽 > 通配 CSS權重計算： 第一：內聯樣式（style） 權重值:1000 第二：id選擇器 權重值:100 第三：類選擇器 權重值:10 第四：標簽&偽元素選擇器 權重值:1 第五：通配、>、+ 權重值:0

1.2.5 用CSS畫一個三角形

用邊框畫（border）,例如： {width: 0;height: 0;border-left:100px solid transparent;border-right:100px solid transparent;border-top:100px solid transparent;border-bottom:100px solid #ccc; }

1.2.6 一個盒子不給寬度和高度如何水平垂直居中？

方式一：

<div class='container'><div class='main'>main</div> </div>.container{display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;border:5px solid #ccc; } .main{background: red; }

方式二：

<div class='container'><div class='main'>main</div> </div>.container{position: relative;width: 300px;height: 300px;border:5px solid #ccc; } .main{position: absolute;left:50%;top:50%;background: red;transform: translate(-50%,-50%); }

1.2.7 display有哪些值？說明他們的作用。

none 隱藏元素 block 把某某元素轉換成塊元素 inline 把某某元素轉換成內聯元素 inline-block 把某某元素轉換成行內塊元素

1.2.8 對BFC規范(塊級格式化上下文：block formatting context)的理解？

BFC就是頁面上一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。1. 了解BFC ： 塊級格式化上下文。 2. BFC的原則：如果一個元素具有BFC，那么內部元素再怎么弄，都不會影響到外面的元素。 3. 如何觸發BFC：float的值非noneoverflow的值非visibledisplay的值為：inline-block、table-cell...position的值為:absoute、fixed 4. BFC布局規則：1. 內部的塊會在垂直方向上一個接一個的放置2. 垂直方向上的距離里由margin決定，在同一個BFC里的兩個相鄰塊會重疊（大的 margin值決定）3. 每個塊的左外邊框緊貼父級的左邊框4. 開啟了BFC的塊和浮動元素不會重疊會挨著浮動元素顯示5. BFC是一個獨立的容器，BFC里面的子元素跟外面的子元素互不影響6. 計算BFC高度的時候，浮動子元素也參與運算

1.2.9 清除浮動有哪些方式？

1. 觸發BFC 2. 多創建一個盒子，添加樣式：clear: both; 3. after方式ul:after{content: '';display: block;clear: both;}

1.2.10 在網頁中的應該使用奇數還是偶數的字體？為什么呢？

偶數 : 讓文字在瀏覽器上表現更好看。另外說明：ui給前端一般設計圖都是偶數的，這樣不管是布局也好，轉換px也好，方便一點。

1.2.11 position有哪些值？分別是根據什么定位的？

static [默認] 沒有定位 fixed 固定定位，相對于瀏覽器窗口進行定位。 relative 相對于自身定位，不脫離文檔流。 absolute 相對于第一個有relative的父元素，脫離文檔流。relative和absolute區別 1. relative不脫離文檔流 、absolute脫離文檔流 2. relative相對于自身 、 absolute相對于第一個有relative的父元素 3. relative如果有left、right、top、bottom ==》left、topabsolute如果有left、right、top、bottom ==》left、right、top、bottom

1.2.12 圣杯布局和雙飛翼布局

圣杯布局和雙飛翼布局

1.2.13 什么是CSS reset？

reset.css 是一個css文件，用來重置css樣式的。 normalize.css 為了增強跨瀏覽器渲染的一致性，一個CSS 重置樣式庫。

1.2.14 css sprite是什么,有什么優缺點

1. 是什么把多個小圖標合并成一張大圖片。 2. 優缺點優點：減少了http請求的次數，提升了性能。缺點：維護比較差（例如圖片位置進行修改或者內容寬高修改）

1.2.15 display: none;與visibility: hidden;的區別

1. 占用位置的區別 display: none; 是不占用位置的 visibility: hidden; 雖然隱藏了，但是占用位置2. 重繪和回流的問題visibility: hidden; 、 display: none; 產生重繪 display: none; 還會產生一次回流產生回流一定會造成重繪，但是重繪不一定會造成回流。產生回流的情況：改變元素的位置(left、top...)、顯示隱藏元素.... 產生重繪的情況：樣式改變、換皮膚

1.2.16 opacity 和 rgba區別

共同性：實現透明效果1. opacity 取值范圍0到1之間，0表示完全透明，1表示不透明 2. rgba R表示紅色，G表示綠色，B表示藍色，取值可以在正整數或者百分數。A表示透明度取值0到1之間區別：繼承的區別 opacity會繼承父元素的opacity屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性。

1.3 JavaScript基礎面試題

1.3.1 延遲加載JS有哪些方式？

延遲加載：async、defer例如：<script defer type="text/javascript" src='script.js'></script>defer : 等html全部解析完成，才會執行js代碼，順次執行js腳本。 async : async是和html解析同步的（一起的），不是順次執行js腳本（誰先加載完誰先執行）。

1.3.2 JS數據類型有哪些？

基本類型：string、number、boolean、undefined、null、symbol、bigint 引用類型：objectNaN是一個數值類型，但是不是一個具體的數字。

1.3.3 JS數據類型考題

考題一：

console.log( true + 1 ); //2 console.log( 'name'+true ); //nametrue console.log( undefined + 1 ); //NaN console.log( typeof undefined ); //undefined

考題二：

console.log( typeof(NaN) ); //number console.log( typeof(null) ); //object

1.3.4 null和undefined的區別

1. 作者在設計js的都是先設計的null（為什么設計了null：最初設計js的時候借鑒了java的語言） 2. null會被隱式轉換成0，很不容易發現錯誤。 3. 先有null后有undefined，出來undefined是為了填補之前的坑。具體區別：JavaScript的最初版本是這樣區分的：null是一個表示"無"的對象（空對象指針），轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

1.3.5 == 和 === 有什么不同？

== : 比較的是值string == number || boolean || number ....都會隱式轉換通過valueOf轉換（valueOf() 方法通常由 JavaScript 在后臺自動調用，并不顯式地出現在代碼中。）=== ： 除了比較值，還比較類型

1.3.6 JS微任務和宏任務

1. js是單線程的語言。 2. js代碼執行流程：同步執行完==》事件循環同步的任務都執行完了，才會執行事件循環的內容進入事件循環：請求、定時器、事件.... 3. 事件循環中包含：【微任務、宏任務】 微任務：promise.then 宏任務：setTimeout..要執行宏任務的前提是清空了所有的微任務流程：同步==》事件循環【微任務和宏任務】==》微任務==》宏任務=》微任務...

1.3.7 JS作用域考題

1. 除了函數外，js是沒有塊級作用域。 2. 作用域鏈：內部可以訪問外部的變量，但是外部不能訪問內部的變量。注意：如果內部有，優先查找到內部，如果內部沒有就查找外部的。 3. 注意聲明變量是用var還是沒有寫（window.） 4. 注意：js有變量提升的機制【變量懸掛聲明】 5. 優先級：聲明變量 > 聲明普通函數 > 參數 > 變量提升

面試的時候怎么看：

1. 本層作用域有沒有此變量【注意變量提升】 2. 注意：js除了函數外沒有塊級作用域 3. 普通聲明函數是不看寫函數的時候順序

考題一：

function c(){var b = 1;function a(){console.log( b );var b = 2;console.log( b );}a();console.log( b ); } c();

考題二：

var name = 'a'; (function(){if( typeof name == 'undefined' ){var name = 'b';console.log('111'+name);}else{console.log('222'+name);} })()

考題三：

function fun( a ){var a = 10;function a(){}console.log( a ); } fun( 100 );

1.3.8 JS對象考題

JS對象注意點：

1. 對象是通過new操作符構建出來的，所以對象之間不想等(除了引用外)； 2. 對象注意：引用類型(共同一個地址)； 3. 對象的key都是字符串類型； 4. 對象如何找屬性|方法；查找規則：先在對象本身找 ===> 構造函數中找 ===> 對象原型中找 ===> 構造函數原型中找 ===> 對象上一層原型查找

考題一：

[1,2,3] === [1,2,3] //false

考題二：

var obj1 = {a:'hellow' } var obj2 = obj1; obj2.a = 'world'; console.log(obj1); //{a:world} (function(){console.log(a); //undefinedvar a = 1; })();

考題三：

var a = {} var b = {key:'a' } var c = {key:'c' }a[b] = '123'; a[c] = '456';console.log( a[b] ); // 456

1.3.9 JS作用域+this指向+原型的考題

考題一：

function Foo(){getName = function(){console.log(1)} //注意是全局的window.return this; }Foo.getName = function(){console.log(2)} Foo.prototype.getName = function(){console.log(3)} var getName = function(){console.log(4)} function getName(){console.log(5) }Foo.getName(); //2 getName(); //4 Foo().getName(); //1 getName(); //1 new Foo().getName();//3

考題二：

var o = {a:10,b:{a:2,fn:function(){console.log( this.a ); // 2console.log( this ); //代表b對象}} } o.b.fn();

考題三：

window.name = 'ByteDance'; function A(){this.name = 123; } A.prototype.getA = function(){console.log( this );return this.name + 1; } let a = new A(); let funcA = a.getA; funcA(); //this代表window

考題四：

var length = 10; function fn(){return this.length + 1; } var obj = {length:5,test1:function(){return fn();} } obj.test2 = fn; console.log( obj.test1() ); //1 console.log( fn()===obj.test2() ); //false console.log( obj.test1() == obj.test2() ); //false

1.3.10 JS判斷變量是不是數組，你能寫出哪些方法？

方式一：isArray

var arr = [1,2,3]; console.log( Array.isArray( arr ) );

方式二：instanceof 【可寫,可不寫】

var arr = [1,2,3]; console.log( arr instanceof Array );

方式三：原型prototype

var arr = [1,2,3]; console.log( Object.prototype.toString.call(arr).indexOf('Array') > -1 );

方式四：isPrototypeOf()

var arr = [1,2,3]; console.log( Array.prototype.isPrototypeOf(arr) )

方式五：constructor

var arr = [1,2,3]; console.log( arr.constructor.toString().indexOf('Array') > -1 )

1.3.11 slice是干嘛的、splice是否會改變原數組

1. slice是來截取的參數可以寫slice(3)、slice(1,3)、slice(-3)返回的是一個新的數組 2. splice 功能有：插入、刪除、替換返回：刪除的元素該方法會改變原數組

1.3.12 JS數組去重

方式一：new set

var arr1 = [1,2,3,2,4,1]; function unique(arr){return [...new Set(arr)] } console.log( unique(arr1) );

方式二：indexOf

var arr2 = [1,2,3,2,4,1]; function unique( arr ){var brr = [];for( var i=0;i<arr.length;i++){if( brr.indexOf(arr[i]) == -1 ){brr.push( arr[i] );}}return brr; } console.log( unique(arr2) );

方式三：sort

var arr3 = [1,2,3,2,4,1]; function unique( arr ){arr = arr.sort();var brr = [];for(var i=0;i<arr.length;i++){if( arr[i] !== arr[i-1]){brr.push( arr[i] );}}return brr; } console.log( unique(arr3) );

1.3.13 找出多維數組最大值

function fnArr(arr){var newArr = [];arr.forEach((item,index)=>{newArr.push( Math.max(...item) )})return newArr; } console.log(fnArr([[4,5,1,3],[13,27,18,26],[32,35,37,39],[1000,1001,857,1] ]));

1.3.14 給字符串新增方法實現功能

給字符串對象定義一個addPrefix函數，當傳入一個字符串str時，它會返回新的帶有指定前綴的字符串，例如：

console.log( ‘world’.addPrefix(‘hello’) ) 控制臺會輸出helloworld

解答： String.prototype.addPrefix = function(str){return str + this; } console.log( 'world'.addPrefix('hello') )

1.3.15找出字符串出現最多次數的字符以及次數

var str = 'aaabbbbbccddddddddddx'; var obj = {}; for(var i=0;i<str.length;i++){var char = str.charAt(i);if( obj[char] ){obj[char]++;}else{obj[char] = 1;} } console.log( obj ); //統計出來最大值 var max = 0; for( var key in obj ){if( max < obj[key] ){max = obj[key];} } //拿最大值去對比 for( var key in obj ){if( obj[key] == max ){console.log('最多的字符是'+key);console.log('出現的次數是'+max);} }

1.3.16new操作符具體做了什么

1. 創建了一個空的對象 2. 將空對象的原型，指向于構造函數的原型 3. 將空對象作為構造函數的上下文（改變this指向） 4. 對構造函數有返回值的處理判斷 function Fun( age,name ){this.age = age;this.name = name; } function create( fn , ...args ){//1. 創建了一個空的對象var obj = {}; //var obj = Object.create({})//2. 將空對象的原型，指向于構造函數的原型Object.setPrototypeOf(obj,fn.prototype);//3. 將空對象作為構造函數的上下文（改變this指向）var result = fn.apply(obj,args);//4. 對構造函數有返回值的處理判斷return result instanceof Object ? result : obj; } console.log( create(Fun,18,'張三') )

1.3.17 閉包

1. 閉包是什么閉包是一個函數加上到創建函數的作用域的連接，閉包“關閉”了函數的自由變量。 2. 閉包可以解決什么問題【閉包的優點】2.1 內部函數可以訪問到外部函數的局部變量2.2 閉包可以解決的問題var lis = document.getElementsByTagName('li');for(var i=0;i<lis.length;i++){(function(i){lis[i].onclick = function(){alert(i);}})(i)} 3. 閉包的缺點3.1 變量會駐留在內存中，造成內存損耗問題。解決：把閉包的函數設置為null3.2 內存泄漏【ie】 ==> 可說可不說，如果說一定要提到ie

1.3.18原型鏈

1. 原型可以解決什么問題對象共享屬性和共享方法 2. 誰有原型 函數擁有：prototype 對象擁有：__proto__ 3. 對象查找屬性或者方法的順序先在對象本身查找 --> 構造函數中查找 --> 對象的原型 --> 構造函數的原型中 --> 當前原型的原型中查找 4. 原型鏈4.1 是什么？：就是把原型串聯起來4.2 原型鏈的最頂端是null

1.3.19 JS繼承有哪些方式

方式一：ES6

class Parent{constructor(){this.age = 18;} }class Child extends Parent{constructor(){super();this.name = '張三';} } let o1 = new Child(); console.log( o1,o1.name,o1.age );

方式二：原型鏈繼承

function Parent(){this.age = 20; } function Child(){this.name = '張三' } Child.prototype = new Parent(); let o2 = new Child(); console.log( o2,o2.name,o2.age );

方式三：借用構造函數繼承

function Parent(){this.age = 22; } function Child(){this.name = '張三'Parent.call(this); } let o3 = new Child(); console.log( o3,o3.name,o3.age );

方式四：組合式繼承

function Parent(){this.age = 100; } function Child(){Parent.call(this);this.name = '張三' } Child.prototype = new Parent(); let o4 = new Child(); console.log( o4,o4.name,o4.age );

1.3.20 說一下call、apply、bind區別

共同點：功能一致

可以改變this指向語法： 函數.call()、函數.apply()、函數.bind()

區別：

1. call、apply可以立即執行。bind不會立即執行，因為bind返回的是一個函數需要加入()執行。 2. 參數不同：apply第二個參數是數組。call和bind有多個參數需要挨個寫。

場景：

1. 用apply的情況 var arr1 = [1,2,4,5,7,3,321]; console.log( Math.max.apply(null,arr1) )2. 用bind的情況 var btn = document.getElementById('btn'); var h1s = document.getElementById('h1s'); btn.onclick = function(){console.log( this.id ); }.bind(h1s)

1.3.21 sort背后原理是什么？

V8 引擎 sort 函數只給出了兩種排序 InsertionSort 和 QuickSort，數量小于10的數組使用 InsertionSort，比10大的數組則使用 QuickSort。之前的版本是：插入排序和快排，現在是冒泡原理實現鏈接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js***710行代碼開始***

1.3.22 深拷貝和淺拷貝

共同點：復制1. 淺拷貝：只復制引用，而未復制真正的值。 var arr1 = ['a','b','c','d']; var arr2 = arr1;var obj1 = {a:1,b:2} var obj2 = Object.assign(obj1);2. 深拷貝：是復制真正的值 （不同引用） var obj3 = {a:1,b:2 } var obj4 = JSON.parse(JSON.stringify( obj3 ));//遞歸的形式 function copyObj( obj ){if( Array.isArray(obj) ){var newObj = [];}else{var newObj = {};}for( var key in obj ){if( typeof obj[key] == 'object' ){newObj[key] = copyObj(obj[key]);}else{newObj[key] = obj[key];}}return newObj; } console.log( copyObj(obj5) );

1.3.23 localStorage、sessionStorage、cookie的區別

公共點：在客戶端存放數據 區別： 1. 數據存放有效期sessionStorage : 僅在當前瀏覽器窗口關閉之前有效。【關閉瀏覽器就沒了】localStorage : 始終有效，窗口或者瀏覽器關閉也一直保存，所以叫持久化存儲。cookie : 只在設置的cookie過期時間之前有效，即使窗口或者瀏覽器關閉也有效。 2. localStorage、sessionStorage不可以設置過期時間cookie 有過期時間，可以設置過期（把時間調整到之前的時間，就過期了） 3. 存儲大小的限制cookie存儲量不能超過4klocalStorage、sessionStorage不能超過5M****根據不同的瀏覽器存儲的大小是不同的。

1.4 H5/C3面試題

1.4.1 什么是語義化標簽

1. 易讀性和維護性更好。 2. seo成分會更好，蜘蛛抓取更好。 3. IE8不兼容HTML5標簽的。解決：可以通過html5shiv.js去處理。

1.4.2 ::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。

1. 區別:是偽類、::偽元素 ===》是為了做區分2.是什么？作用元素before之前 、 元素after之后作用：清除浮動、樣式布局上也有作用

1.4.3 如何關閉IOS鍵盤首字母自動大寫

<input type="text" autocapitalize='off'>

1.4.4 怎么讓Chrome支持小于12px 的文字？

Chrome默認字體大小是：16px **每個瀏覽器默認字體大小可能都不一樣<style type="text/css"> div{font-size:10px; } div span{display: inline-block;-webkit-transform:scale(1.6); } </style>

1.4.5 rem和em區別

相對于font-sizeem針對于父元素的font-size rem針對于根(html)元素的font-size

1.4.6 ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉

<style>a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);} </style>

1.4.7 webkit表單輸入框placeholder的顏色值能改變嗎？

<style type="text/css">input::-webkit-input-placeholder{color:red;} </style>

1.4.8 禁止ios長按時觸發系統的菜單，禁止ios&android長按時下載圖片

禁止ios 長按時觸發系統的菜單，禁止ios&android長按時下載圖片 html,body{touch-callout: none;-webkit-touch-callout: none;user-select:none;-webkit-user-select:none; }

1.4.9 禁止ios和android用戶選中文字

html,body{user-select:none;-webkit-user-select:none; }

1.4.10 自適應

淘寶無限適配【移動端】：淘寶無限適配 + 布局單位使用rem

1.4.11響應式

1. 是什么？一個URL可以響應多端 2. 語法結構@media only screen and (max-width: 1000px){ul li:last-child{display: none;}}only : 可以排除不支持媒體查詢的瀏覽器screen ： 設備類型max-width | max-heightmin-width | min-height 3. 響應式圖片【性能優化】<picture><source srcset="1.jpg" media='(min-width:1000px)'><source srcset="2.jpg" media='(min-width:700px)'><img srcset="3.jpg"></picture>

布局方案

一、什么情況下采用響應式布局數據不是特別多，用戶量不是特別大，純展示類的項目適合響應式布局例如：公司的官網、專題頁面特別追求性能的項目，不太適合響應式，因為如果添加了很多的響應式就會造成加載速度變慢。二、pc + 移動端應該做什么樣的布局方案注意：訪問量還可以或者比較大，類似于淘寶網。pc是一套，會加入一點點響應式。移動端是一套，會使用自適應的布局方式。三、pc的設計圖ui：1980筆記本電腦：1280ui圖的寬度和電腦的寬度不對應該怎么辦？1. 把ui圖進行等比縮放，縮放成和電腦一樣的尺寸2. 換1980的電腦四、移動端的設計圖寬度：750因為750設計圖/2就是375，正好是iphone6的尺寸，我們要把iphone6的尺寸做為基準點。

第二章 面試題進階篇

2.1 ES6面試題

2.1.1 var、let、const區別

var、let、const 共同點都是可以聲明變量的區別一：var 具有變量提升的機制let和const沒有變量提升的機制區別二：var 可以多次聲明同一個變量let和const不可以多次聲明同一個變量區別三：var、let聲明變量的const聲明常量var和let聲明的變量可以再次賦值，但是const不可以再次賦值了。區別四：var聲明的變量沒有自身作用域let和const聲明的變量有自身的作用域

2.1.2 作用域考題

考題一：let和const沒有變量提升性

console.log( str );//undefined var str = '你好';console.log( num );//報錯 let num = 10;

考題二：

function demo(){var n = 2;if( true ){var n = 1;}console.log( n );//1 } demo();function demo(){let n = 2;if( true ){let n = 1;}console.log( n );//2 } demo();

考題三：可以修改

const obj = {a:1 } obj.a = 11111; console.log( obj )const arr = ['a','b','c']; arr[0]= 'aaaaa'; console.log( arr );

2.1.3 將下列對象進行合并

方式一：Object.assign

const a = {a:1,b:4}; const b = {b:2,c:3};let obj1 = Object.assign(a,b); console.log( obj1 );

方式二：…

let obj2 = {...a,...b}; console.log( obj2 );

方式三：自己封裝方法

function extend( target, source ){for(var key in source){target[key] = source[key];}return target; } console.log( extend(a,b) );

2.1.4 箭頭函數和普通函數有什么區別？

1. this指向的問題箭頭函數中的this只在箭頭函數定義時就決定的，而且不可修改的（call、apply、bind）****箭頭函數的this指向定義時候、外層第一個普通函數的this 2. 箭頭函數不能new（不能當作構造函數） 3. 箭頭函數prototype 4. 箭頭函數arguments

2.1.5 Promise有幾種狀態

有三種狀態： pending（進行中） fulfilled（已成功） rejected（已失敗）

2.1.6 find和filter的區別

區別一：返回的內容不同filter 返回是新數組find 返回具體的內容 區別二：find ：匹配到第一個即返回filter ： 返回整體（沒一個匹配到的都返回）

2.1.7 some和every的區別

some ==》 如果有一項匹配則返回true every ==》 全部匹配才會返回true

2.2 webpack面試題

2.2.1 webpack插件

2.3 Git面試題

2.3.1 git常用命令

2.3.2 解決沖突

2.3.3GitFlow

第三章 面試題框架篇

3.1 Vue面試題

3.1.1 Vue2.x 生命周期

1. 有哪些生命周期 系統自帶：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed2. 一旦進入到頁面或者組件，會執行哪些生命周期，順序。beforeCreatecreatedbeforeMountmounted3. 在哪個階段有$el，在哪個階段有$databeforeCreate 啥也沒有created 有data沒有elbeforeMount 有data沒有elmounted 都有4. 如果加入了keep-alive會多倆個生命周期activated、deactivated5. 如果加入了keep-alive，第一次進入組件會執行哪些生命？beforeCreatecreatedbeforeMountmountedactivated6. 如果加入了keep-alive，第二次或者第N次進入組件會執行哪些生命周期？ 只執行一個生命周期：activated

3.1.2 談談你對keep-alive的了解

1. 是什么 vue系統自帶的一個組件，功能：是來緩存組件的。===》提升性能 2. 使用場景 就是來緩存組件，提升項目的性能。具體實現比如：首頁進入到詳情頁，如果用戶在首頁每次點擊都是相同的，那么詳情頁就沒必要請求N次了，直接緩存起來就可以了，當然如果點擊的不是同一個，那么就直接請求。

3.1.3 v-if和v-show區別

1. 展示形式不同 v-if是 創建一個dom節點 v-show 是display:none 、 block2. 使用場景不同 初次加載v-if要比v-show好，頁面不會做加載盒子 頻繁切換v-show要比v-if好，創建和刪除的開銷太大了，顯示和隱藏開銷較小

3.1.4 v-if和v-for優先級

v-for的優先級要比v-if高 ***是在源碼中體現的：function genElement

3.1.5 ref是什么？

來獲取dom的

3.1.6 nextTick是什么?

獲取更新后的dom內容

3.1.7 scoped原理

1. 作用：讓樣式在本組件中生效，不影響其他組件。 2. 原理：給節點新增自定義屬性，然后css根據屬性選擇器添加樣式。

3.1.8 Vue中如何做樣式穿透

stylus樣式穿透使用：>>> sass和less使用：/deep/ 通用使用： :v-deep

3.1.9 Vue組件傳值

1. 父組件-->子組件：1.1. 父組件：<user-detail :myName="name" />export default {components: {UserDetail}......} 1.2. 在子組件中使用props（可以是數組也可以是對象）接收即可。可以傳多個屬性。export default {props: ['myName']}2. 子組件-->父組件：2.1. 子組件<button @click="changeParentName">改變父組件的name</button>export default {methods: {//子組件的事件changeParentName: function() {this.$emit('handleChange', 'Jack')}}}2.2. 父組件<child @handleChange="changeName"></child>methods: {changeName(name) { this.name = name}}3. 兄弟組件之間：bus.js

3.1.9 computed、methods、watch有什么區別？

1. computed vs methods區別computed是有緩存的methods沒有緩存2. computed vs watch區別watch是監聽，數據或者路由發生了改變才可以響應（執行）computed計算某一個屬性的改變，如果某一個值改變了，計算屬性會監聽到進行返回watch是當前監聽到數據改變了，才會執行內部代碼

3.1.10 props和data優先級誰高？

props ===> methods ===> data ===> computed ===>watch

3.1.11 Vuex有哪些屬性？

state、getters、mutations、actions、modulesstate 類似于組件中data，存放數據 getters 類型于組件中computed mutations 類似于組件中methods actions 提交mutations的 modules 把以上4個屬性再細分，讓倉庫更好管理

3.1.12 Vuex是單向數據流還是雙向數據流？

Vuex是單向數據流

3.1.13 Vuex中的mutaitons和actions區別

mutaitons : 都是同步事物 actions : 可以包含任意異步操作***在調試中就看出來

3.1.14 Vuex如何做持久化存儲

Vuex本身不是持久化存儲1. 使用localStorage自己寫 2. 使用vuex-persist插件

3.1.14 Vue設置代理

vue.config.js

module.exports = {publicPath:'./',devServer: {proxy: 'http://localhost:3000'} }

3.1.15Vue項目打包上線

1. 自測==>修改路由模式 2. 代理不生效，使用ENV 3. 修改路徑

3.1.16Vue路由模式

路由模式有倆種：history、hash 區別：1. 表現形態不同history:http://localhost:8080/abouthash:http://localhost:8080/#/about2. 跳轉請求history : http://localhost:8080/id ===>發送請求hash : 不會發送請求3. 打包后前端自測要使用hash，如果使用history會出現空白頁

3.1.17 介紹一下SPA以及SPA有什么缺點

SPA是什么？單頁面應用 缺點：1. SEO優化不好2. 性能不是特別好

3.1.18 Vue路徑傳值

1. 顯式http://localhost:8080/about?a=11.1 傳：this.$router.push({path:'/about',query:{a:1}})1.2 接：this.$route.query.a2. 隱式http://localhost:8080/about2.1 傳：this.$router.push({name:'About',params:{a:1}})2.2 接：this.$route.params.a

3.1.19 路由導航守衛有哪些

全局、路由獨享、組件內1. 全局beforeEach、beforeResolve、afterEach 2. 路由獨享beforeEnter 3. 組件內beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave使用場景：判斷是否登錄，如果登錄就next否則就跳轉到登錄頁面

3.1.20 Vue動態路由

場景：詳情頁(文章、商品) router.js配置：{path: "/list",name: "List",children:[{path:"/list/:id",name:'Details',component: () =>import("../views/Details.vue"),}],component: () =>import("../views/List.vue"),},

3.1.21 雙向綁定原理

通過Object.defineProperty劫持數據發生的改變，如果數據發生改變了（在set中進行賦值的），觸發update方法進行更新節點內容（{{ str }}），從而實現了數據雙向綁定的原理。

3.1.22 什么是虛擬DOM

3.1.23 diff算法

功能：提升性能

虛擬dom ===》其實就是數據（ 把dom數據化 ）

主流：snabbdom、virtual-dom

snabbdom：https://www.npmjs.com/package/snabbdom

3.1.23.1 搭建環境

npm init -y

cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S

cnpm install snabbdom -S

新建webpack.config.js

配置webpack.config.js

3.1.23.2 虛擬節點 和 真實節點

虛擬節點：

{children: undefineddata: {}elm: h1key: undefinedsel: "h1"text: "你好h1" }

真實節點：

<h2>你好</h2>

3.1.23.3 新老節點替換的規則

? 1、如果新老節點不是同一個節點名稱，那么就暴力刪除舊的節點，創建插入新的節點。

? 2、只能同級比較，不能跨層比較。如果跨層那么就暴力刪除舊的節點，創建插入新的節點。

? 3、如果是相同節點，又分為很多情況

3.1 新節點有沒有children如果新的節點沒有children，那就證明新節點是文本，那直接把舊的替換成新的文本3.2 新節點有children新的有children，舊的也有children ===》就是diff算法的核心了【3.3】新的有children，舊的沒有 ===》創建元素添加（把舊的內容刪除清空掉，增加新的）3.3 diff算法的核心（最復雜的情況）3.3.1 舊前 和 新前匹配：舊前的指針++ 、 新前的指針++3.3.2 舊后 和 新后匹配：舊后的指針-- 、 新后的指針--3.3.3 舊前 和 新后匹配：舊前的指針++ 、 新后的指針--3.3.4 舊后 和 新前匹配：舊后的指針-- 、 新前的指針++3.3.5 以上都不滿足條件 ===》查找新的指針++，新的添加到頁面上并且新在舊的種有，要給舊的復制成undefined3.3.6 創建或者刪除

注意：如果要提升性能，一定要加入key，key是唯一標示，在更改前后，確認是不是同一個節點。

3.1.24 講一下MVVM

web1.0時代
? 文件全在一起，也就是前端和后端的代碼全在一起
? 問題：
? 1、前端和后端都是一個人開發。（技術沒有側重點或者責任不夠細分）
? 2、項目不好維護。
? 3、html、css、js頁面的靜態內容沒有，后端是沒辦法工作的（沒辦法套數據）。
? mvc…都是后端先出的

web2.0時代
? ajax出現了，就可以：前端和后端數據分離了。
? 解決問題：后端不用等前端頁面弄完沒，后端做后端的事情（寫接口）、前端布局、特效、發送請求。
? 問題： html、css、js都在一個頁面中，單個頁面可能內容也是比較多的（也會出現不好維護的情況）。

出現前端的框架了MVC、MVVM
? 解決問題：可以把一個“特別大”頁面，進行拆分（組件化），單個組件進行維護

3.1.25 什么是MVVM

Model-View-的簡寫

view : 視圖【dom==》在頁面中展示的內容】

model：模型【數據層：vue中的data數據】

viewModel：視圖模型層【就是vue源碼】

3.2 微信小程序面試題

3.2.1 如何自定義頭部？

3.2.2 如何自定義底部？

3.3 uni-app面試題

3.3.1生命周期

3.3.2 條件編譯

第四章 面試題性能優化篇

4.1 加載優化

4.2 圖片優化

4.3 渲染優化

4.4 首屏優化

4.5 vue優化

第五章 面試題兼容篇

5.1 頁面樣式兼容

5.2 框架兼容

第六章 面試題網絡請求篇

6.1 跨域面試題

6.2 http和https

第七章 WEB安全篇

7.1 XSS攻擊

7.2 SQL注入

7.3 接口安全

第八章 其他類面試題

8.1 token

8.2 SEO

總結

以上是生活随笔為你收集整理的2022年必刷前端高频面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。