第一章 面試題基礎篇

? 1.1 HTML面試題

? 面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？

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

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

區別一：link先有，后有@import（兼容性link比@import兼容）； 區別二：加載順序差別，瀏覽器先加載的標簽link，后加載@import 區別三：使用dom，當使用js控制dom去改變樣式時，只能使用link標簽，因為@import不是dom可以控制的。 區別四：link屬于HTML標簽，而@import完全是CSS提供的一種方式。

? 面試題：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術語上（醫藥，生物）。

? 面試題：img標簽的title和alt有什么區別？

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

? 面試題：png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？

png:無損壓縮，尺寸體積要比jpg/jpeg的大，適合做小圖標。 jpg:采用壓縮算法，有一點失真，比png體積要小，適合做中大圖片。 gif:一般是做動圖的。 webp：同時支持有損或者無損壓縮，相同質量的圖片，webp具有更小的體積。兼容性不是特別好。 svg：可縮放矢量圖形，基于XML，與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強

? 1.2 CSS面試題

? 面試題：介紹一下CSS的盒子模型

CSS的盒子模型有哪些：標準盒子模型、IE盒子模型 CSS的盒子模型區別：標準盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ） 通過CSS如何轉換盒子模型：box-sizing: content-box; /*標準盒子模型*/box-sizing: border-box; /*IE盒子模型*/記憶方法，以指定屬性值為內容區域的邊界，如標準盒子以content為box的邊界，而IE盒子以border為box的邊界

? 面試題：line-height和heigh區別【大廠】

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

? 面試題：CSS選擇符有哪些？哪些屬性可以繼承？

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

? 面試題：CSS優先級算法如何計算？

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

? 面試題：用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; }

? 面試題：一個盒子不給寬度和高度如何水平垂直居中？

方式一：

<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%); }

? 面試題：display有哪些值？說明他們的作用。

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

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

BFC就是頁面上一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。1. 了解BFC ： 塊級格式化上下文。 2. BFC的原則：如果一個元素具有BFC，那么內部元素再怎么弄，都不會影響到外面的元素。 3. 如何觸發BFC：float的值非noneoverflow的值非visibledisplay的值為：inline-block、table-cell...position的值為:absoute、fixed

? 面試題：清除浮動有哪些方式？

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

? 面試題：在網頁中的應該使用奇數還是偶數的字體？為什么呢？

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

? 面試題：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

? 面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先加載中間塊，請寫出結構及樣式。

雙飛翼

? 面試題：什么是CSS reset？

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

? 面試題：css sprite是什么,有什么優缺點

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

? 面試題：display: none;與visibility: hidden;的區別

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

? 面試題：opacity 和 rgba區別

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

? 1.3 JavaScript基礎面試題

? 面試題：延遲加載JS有哪些方式？

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

? 面試題：JS數據類型有哪些？

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

? 面試題：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

? 面試題：null和undefined的區別

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

? 面試題：== 和 ===有什么不同？

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

? 面試題：JS微任務和宏任務

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

? 面試題：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 );

? 面試題：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

? 面試題：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

? 面試題：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 )

? 面試題：slice是干嘛的、splice是否會改變原數組

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

? 面試題：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) );

? 面試題：找出多維數組最大值

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] ]));

? 面試題：給字符串新增方法實現功能

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

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

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

? 面試題：找出字符串出現最多次數的字符以及次數

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);} }

? 面試題：new操作符具體做了什么

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. 閉包是什么閉包是一個函數加上到創建函數的作用域的連接，閉包“關閉”了函數的自由變量。 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. 原型可以解決什么問題對象共享屬性和共享方法 2. 誰有原型 函數擁有：prototype 對象擁有：__proto__ 3. 對象查找屬性或者方法的順序先在對象本身查找 --> 構造函數中查找 --> 對象的原型 --> 構造函數的原型中 --> 當前原型的原型中查找 4. 原型鏈4.1 是什么？：就是把原型串聯起來4.2 原型鏈的最頂端是null

? 面試題： 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 );

? 面試題：說一下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)

? 面試題：sort背后原理是什么？

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

? 面試題：深拷貝和淺拷貝

共同點：復制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) );

? 面試題：localStorage、sessionStorage、cookie的區別

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

? 1.4 H5/C3面試題

? 面試題：什么是語義化標簽

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

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

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

? 面試題：如何關閉IOS鍵盤首字母自動大寫

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

? 面試題：怎么讓Chrome支持小于12px 的文字？

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

? 面試題：rem和em區別

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

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

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

? 面試題：webkit表單輸入框placeholder的顏色值能改變嗎？

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

? 面試題：禁止ios長按時觸發系統的菜單，禁止ios&android長按時下載圖片

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

? 面試題：禁止ios和android用戶選中文字

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

? 面試題：自適應

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

? 面試題：響應式

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面試題

? 面試題：var、let、const區別

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

? 面試題：作用域考題

考題一：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 );

? 面試題：將下列對象進行合并

方式一：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) );

? 面試題：箭頭函數和普通函數有什么區別？

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

? 面試題：Promise有幾種狀態

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

? 面試題：find和filter的區別

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

? 面試題：some和every的區別

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

? 2.2 webpack面試題

? 面試題：webpack插件

? 2.3 Git面試題

? 面試題：git常用命令

? 面試題：解決沖突

? 面試題：GitFlow

第三章 面試題框架篇

? 3.1 Vue面試題

? 面試題：Vue2.x 生命周期

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

? 面試題：談談你對keep-alive的了解

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

總結

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

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