第一章 面試題基礎(chǔ)篇
1.1 HTML面試題
面試題：行內(nèi)元素有哪些逾滥？塊級元素有哪些职烧？ 空(void)元素有哪些淆院？
行內(nèi)元素：span恬砂、img鸥印、input...
塊級元素：div妄呕、footer傀履、header鸥鹉、section搀玖、p余境、h1...h6...
空元素：br、hr...
元素之間的轉(zhuǎn)換問題：
display: inline; 把某元素轉(zhuǎn)換成了行內(nèi)元素 ===>不獨占一行的灌诅，并且不能設(shè)置寬高
display: inline-block; 把某元素轉(zhuǎn)換成了行內(nèi)塊元素 ===>不獨占一行的芳来，可以設(shè)置寬高
display: block; 把某元素轉(zhuǎn)換成了塊元素 ===>獨占一行，并且可以設(shè)置寬高
面試題：頁面導(dǎo)入樣式時猜拾，使用link和@import有什么區(qū)別即舌？
區(qū)別一：link先有，后有@import（兼容性link比@import兼容）挎袜；
區(qū)別二：加載順序差別顽聂，瀏覽器先加載的標(biāo)簽link，后加載@import
面試題：title與h1的區(qū)別盯仪、b與strong的區(qū)別紊搪、i與em的區(qū)別？
title與h1的區(qū)別：
定義：
title：概括了網(wǎng)站信息全景，可以告訴搜索引擎或者用戶關(guān)于這個網(wǎng)站的內(nèi)容主題是什么
h1：文章主題內(nèi)容耀石，告訴蜘蛛我們的網(wǎng)站內(nèi)容最主要是什么
區(qū)別：
title他是顯示在網(wǎng)頁標(biāo)題上、h1是顯示在網(wǎng)頁內(nèi)容上
title比h1添加的重要 (title > h1 ) ==》對于seo的了解
場景：
網(wǎng)站的logo都是用h1標(biāo)簽包裹的
b與strong的區(qū)別：
定義：
b：實體標(biāo)簽爸黄，用來給文字加粗的滞伟。
strong：邏輯標(biāo)簽，用來加強(qiáng)字符語氣的炕贵。
區(qū)別：
b標(biāo)簽只有加粗的樣式梆奈，沒有實際含義。
strong表示標(biāo)簽內(nèi)字符比較重要称开，用以強(qiáng)調(diào)的鉴裹。
題外話：為了符合css3的規(guī)范，b盡量少用該用strong就行了钥弯。
i與em的區(qū)別：
定義：
i:實體標(biāo)簽径荔，用來做文字傾斜的。
em：是邏輯標(biāo)簽脆霎，用來強(qiáng)調(diào)文字內(nèi)容的
區(qū)別：
i只是一個傾斜標(biāo)簽总处，沒有實際含義。
em表示標(biāo)簽內(nèi)字符重要睛蛛，用以強(qiáng)調(diào)的鹦马。
場景：
i更多的用在字體圖標(biāo)胧谈，em術(shù)語上（醫(yī)藥，生物）荸频。
面試題：img標(biāo)簽的title和alt有什么區(qū)別菱肖？
區(qū)別一：
title ： 鼠標(biāo)移入到圖片顯示的值
alt ： 圖片無法加載時顯示的值
區(qū)別二：
在seo的層面上，蜘蛛抓取不到圖片的內(nèi)容旭从，所以前端在寫img標(biāo)簽的時候為了增加seo效果要加入alt屬性來描述這張圖是什么內(nèi)容或者關(guān)鍵詞稳强。
面試題：png、jpg和悦、gif 這些圖片格式解釋一下退疫，分別什么時候用？
png:無損壓縮鸽素，尺寸體積要比jpg/jpeg的大褒繁，適合做小圖標(biāo)。
jpg:采用壓縮算法馍忽，有一點失真棒坏，比png體積要小，適合做中大圖片遭笋。
gif:一般是做動圖的俊抵。
webp：同時支持有損或者無損壓縮，相同質(zhì)量的圖片坐梯，webp具有更小的體積徽诲。兼容性不是特別好。
1.2 CSS面試題
面試題：介紹一下CSS的盒子模型
CSS的盒子模型有哪些：標(biāo)準(zhǔn)盒子模型吵血、IE盒子模型
CSS的盒子模型區(qū)別：
標(biāo)準(zhǔn)盒子模型：margin谎替、border、padding蹋辅、content
IE盒子模型 ：margin钱贯、content（ border + padding + content ）
通過CSS如何轉(zhuǎn)換盒子模型：
box-sizing: content-box; /*標(biāo)準(zhǔn)盒子模型*/
box-sizing: border-box; /*IE盒子模型*/
面試題：line-height和heigh區(qū)別【大廠】
line-height是每一行文字的高，如果文字換行則整個盒子高度會增大（行數(shù)*行高）侦另。
height是一個死值秩命，就是這個盒子的高度。
面試題：CSS選擇符有哪些褒傅？哪些屬性可以繼承弃锐？
CSS選擇符：
通配（*）
id選擇器（#）
類選擇器（.）
標(biāo)簽選擇器（div、p殿托、h1...）
相鄰選擇器(+)
后代選擇器(ul li)
子元素選擇器（ > ）
屬性選擇器(a[href])
CSS屬性哪些可以繼承：
文字系列：font-size霹菊、color、line-height支竹、text-align...
***不可繼承屬性：border旋廷、padding鸠按、margin...
面試題：CSS優(yōu)先級算法如何計算？
優(yōu)先級比較：!important > 內(nèi)聯(lián)樣式 > id > class > 標(biāo)簽 > 通配
CSS權(quán)重計算：
第一：內(nèi)聯(lián)樣式（style） 權(quán)重值:1000
第二：id選擇器 權(quán)重值:100
第三：類選擇器 權(quán)重值:10
第四：標(biāo)簽&偽元素選擇器 權(quán)重值:1
第五：通配饶碘、>目尖、+ 權(quán)重值: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 把某某元素轉(zhuǎn)換成塊元素
inline 把某某元素轉(zhuǎn)換成內(nèi)聯(lián)元素
inline-block 把某某元素轉(zhuǎn)換成行內(nèi)塊元素
面試題：對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
BFC就是頁面上一個隔離的獨立容器绪囱，容器里面的子元素不會影響到外面的元素测蹲。
1. 了解BFC ： 塊級格式化上下文莹捡。
2. BFC的原則：如果一個元素具有BFC鬼吵，那么內(nèi)部元素再怎么弄，都不會影響到外面的元素篮赢。
3. 如何觸發(fā)BFC：
float的值非none
overflow的值非visible
display的值為：inline-block齿椅、table-cell...
position的值為:absoute、fixed
面試題：清除浮動有哪些方式启泣？
1. 觸發(fā)BFC
2. 多創(chuàng)建一個盒子涣脚，添加樣式：clear: both;
3. after方式
ul:after{
content: '';
display: block;
clear: both;
}
面試題：在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢寥茫？
偶數(shù) : 讓文字在瀏覽器上表現(xiàn)更好看遣蚀。
另外說明：ui給前端一般設(shè)計圖都是偶數(shù)的，這樣不管是布局也好纱耻，轉(zhuǎn)換px也好芭梯，方便一點。
面試題：position有哪些值弄喘？分別是根據(jù)什么定位的玖喘？
static [默認(rèn)] 沒有定位
fixed 固定定位，相對于瀏覽器窗口進(jìn)行定位蘑志。
relative 相對于自身定位累奈，不脫離文檔流。
absolute 相對于第一個有relative的父元素急但，脫離文檔流澎媒。
relative和absolute區(qū)別
1. relative不脫離文檔流 、absolute脫離文檔流
2. relative相對于自身 波桩、 absolute相對于第一個有relative的父元素
3. relative如果有l(wèi)eft旱幼、right、top突委、bottom ==》left柏卤、top
absolute如果有l(wèi)eft冬三、right、top缘缚、bottom ==》left勾笆、right、top桥滨、bottom
面試題：寫一個左中右布局占滿屏幕窝爪，其中左、右倆塊固定寬200齐媒，中間自適應(yīng)寬蒲每，要求先加載中間塊，請寫出結(jié)構(gòu)及樣式喻括。
雙飛翼
面試題：什么是CSS reset邀杏？
reset.css 是一個css文件，用來重置css樣式的唬血。
normalize.css 為了增強(qiáng)跨瀏覽器渲染的一致性望蜡，一個CSS 重置樣式庫。
面試題：css sprite是什么,有什么優(yōu)缺點
1. 是什么
把多個小圖標(biāo)合并成一張大圖片拷恨。
2. 優(yōu)缺點
優(yōu)點：減少了http請求的次數(shù)脖律，提升了性能。
缺點：維護(hù)比較差（例如圖片位置進(jìn)行修改或者內(nèi)容寬高修改）
面試題：display: none;與visibility: hidden;的區(qū)別
1. 占用位置的區(qū)別
display: none; 是不占用位置的
visibility: hidden; 雖然隱藏了腕侄，但是占用位置
2. 重繪和回流的問題
visibility: hidden; 小泉、 display: none; 產(chǎn)生重繪
display: none; 還會產(chǎn)生一次回流
產(chǎn)生回流一定會造成重繪，但是重繪不一定會造成回流冕杠。
產(chǎn)生回流的情況：改變元素的位置(left微姊、top...)、顯示隱藏元素....
產(chǎn)生重繪的情況：樣式改變拌汇、換皮膚
面試題：opacity 和 rgba區(qū)別
共同性：實現(xiàn)透明效果
1. opacity 取值范圍0到1之間柒桑，0表示完全透明，1表示不透明
2. rgba R表示紅色噪舀，G表示綠色魁淳，B表示藍(lán)色，取值可以在正整數(shù)或者百分?jǐn)?shù)与倡。A表示透明度取值0到1之間
區(qū)別：繼承的區(qū)別
opacity會繼承父元素的opacity屬性界逛，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性。
1.3 JavaScript基礎(chǔ)面試題
面試題：延遲加載JS有哪些方式纺座？
延遲加載：async息拜、defer
例如：<script defer type="text/javascript" src='script.js'></script>
defer : 等html全部解析完成，才會執(zhí)行js代碼，順次執(zhí)行js腳本少欺。
async : async是和html解析同步的（一起的）喳瓣，不是順次執(zhí)行js腳本（誰先加載完誰先執(zhí)行）。
面試題：JS數(shù)據(jù)類型有哪些赞别？
基本類型：string畏陕、number、boolean仿滔、undefined惠毁、null、symbol崎页、bigint
引用類型：object
NaN是一個數(shù)值類型鞠绰，但是不是一個具體的數(shù)字。
面試題：JS數(shù)據(jù)類型考題
考題一：
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的區(qū)別
1. 作者在設(shè)計js的都是先設(shè)計的null（為什么設(shè)計了null：最初設(shè)計js的時候借鑒了java的語言）
2. null會被隱式轉(zhuǎn)換成0飒焦，很不容易發(fā)現(xiàn)錯誤蜈膨。
3. 先有null后有undefined，出來undefined是為了填補(bǔ)之前的坑荒给。
具體區(qū)別：JavaScript的最初版本是這樣區(qū)分的：null是一個表示"無"的對象（空對象指針）丈挟，轉(zhuǎn)為數(shù)值時為0刁卜；undefined是一個表示"無"的原始值志电，轉(zhuǎn)為數(shù)值時為NaN。
面試題：==和===有什么不同蛔趴？
== : 比較的是值
string == number || boolean || number ....都會隱式轉(zhuǎn)換
通過valueOf轉(zhuǎn)換（valueOf() 方法通常由 JavaScript 在后臺自動調(diào)用挑辆，并不顯式地出現(xiàn)在代碼中。）
=== ： 除了比較值孝情，還比較類型
面試題：JS微任務(wù)和宏任務(wù)
1. js是單線程的語言鱼蝉。
2. js代碼執(zhí)行流程：同步執(zhí)行完==》事件循環(huán)
同步的任務(wù)都執(zhí)行完了，才會執(zhí)行事件循環(huán)的內(nèi)容
進(jìn)入事件循環(huán)：請求箫荡、定時器魁亦、事件....
3. 事件循環(huán)中包含：【微任務(wù)、宏任務(wù)】
微任務(wù)：promise.then
宏任務(wù)：setTimeout..
要執(zhí)行宏任務(wù)的前提是清空了所有的微任務(wù)
流程：同步==》事件循環(huán)【微任務(wù)和宏任務(wù)】==》微任務(wù)==》宏任務(wù)=》微任務(wù)...
面試題：JS作用域考題
1. 除了函數(shù)外羔挡，js是沒有塊級作用域洁奈。
2. 作用域鏈：內(nèi)部可以訪問外部的變量，但是外部不能訪問內(nèi)部的變量绞灼。
注意：如果內(nèi)部有利术，優(yōu)先查找到內(nèi)部，如果內(nèi)部沒有就查找外部的低矮。
3. 注意聲明變量是用var還是沒有寫（window.）
4. 注意：js有變量提升的機(jī)制【變量懸掛聲明】
5. 優(yōu)先級：聲明變量 > 聲明普通函數(shù) > 參數(shù) > 變量提升
面試的時候怎么看：
1. 本層作用域有沒有此變量【注意變量提升】
2. 注意：js除了函數(shù)外沒有塊級作用域
3. 普通聲明函數(shù)是不看寫函數(shù)的時候順序
考題一：
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操作符構(gòu)建出來的印叁，所以對象之間不想等(除了引用外)；
2. 對象注意：引用類型(共同一個地址)；
3. 對象的key都是字符串類型轮蜕；
4. 對象如何找屬性|方法昨悼；
查找規(guī)則：先在對象本身找 ===> 構(gòu)造函數(shù)中找 ===> 對象原型中找 ===> 構(gòu)造函數(shù)原型中找 ===> 對象上一層原型查找
考題一：
[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); //undefined
var 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 ); // 2
console.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判斷變量是不是數(shù)組，你能寫出哪些方法跃洛？
方式一：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是否會改變原數(shù)組
1. slice是來截取的
參數(shù)可以寫slice(3)、slice(1,3)税课、slice(-3)
返回的是一個新的數(shù)組
2. splice 功能有：插入闲延、刪除、替換
返回：刪除的元素
該方法會改變原數(shù)組
面試題：JS數(shù)組去重
方式一：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) );
面試題：找出多維數(shù)組最大值
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]
]));
面試題：給字符串新增方法實現(xiàn)功能
給字符串對象定義一個addPrefix函數(shù)韩玩，當(dāng)傳入一個字符串str時垒玲，它會返回新的帶有指定前綴的字符串，例如：
console.log( 'world'.addPrefix('hello') ) 控制臺會輸出helloworld
解答：
String.prototype.addPrefix = function(str){
return str + this;
}
console.log( 'world'.addPrefix('hello') )
面試題：找出字符串出現(xiàn)最多次數(shù)的字符以及次數(shù)
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 );
//統(tǒng)計出來最大值
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('出現(xiàn)的次數(shù)是'+max);
}
}
面試題：new操作符具體做了什么
1. 創(chuàng)建了一個空的對象
2. 將空對象的原型找颓，指向于構(gòu)造函數(shù)的原型
3. 將空對象作為構(gòu)造函數(shù)的上下文（改變this指向）
4. 對構(gòu)造函數(shù)有返回值的處理判斷
function Fun( age,name ){
this.age = age;
this.name = name;
}
function create( fn , ...args ){
//1. 創(chuàng)建了一個空的對象
var obj = {}; //var obj = Object.create({})
//2. 將空對象的原型合愈，指向于構(gòu)造函數(shù)的原型
Object.setPrototypeOf(obj,fn.prototype);
//3. 將空對象作為構(gòu)造函數(shù)的上下文（改變this指向）
var result = fn.apply(obj,args);
//4. 對構(gòu)造函數(shù)有返回值的處理判斷
return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'張三') )
面試題：閉包
1. 閉包是什么
閉包是一個函數(shù)加上到創(chuàng)建函數(shù)的作用域的連接，閉包“關(guān)閉”了函數(shù)的自由變量击狮。
2. 閉包可以解決什么問題【閉包的優(yōu)點】
2.1 內(nèi)部函數(shù)可以訪問到外部函數(shù)的局部變量
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 變量會駐留在內(nèi)存中佛析，造成內(nèi)存損耗問題。
解決：把閉包的函數(shù)設(shè)置為null
3.2 內(nèi)存泄漏【ie】 ==> 可說可不說彪蓬，如果說一定要提到ie
面試題：原型鏈
1. 原型可以解決什么問題
對象共享屬性和共享方法
2. 誰有原型
函數(shù)擁有：prototype
對象擁有：__proto__
3. 對象查找屬性或者方法的順序
先在對象本身查找 --> 構(gòu)造函數(shù)中查找 --> 對象的原型 --> 構(gòu)造函數(shù)的原型中 --> 當(dāng)前原型的原型中查找
4. 原型鏈
4.1 是什么寸莫？：就是把原型串聯(lián)起來
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 );
方式三：借用構(gòu)造函數(shù)繼承
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區(qū)別
共同點：功能一致
可以改變this指向
語法： 函數(shù).call()膘茎、函數(shù).apply()、函數(shù).bind()
區(qū)別：
1. call酷誓、apply可以立即執(zhí)行披坏。bind不會立即執(zhí)行，因為bind返回的是一個函數(shù)需要加入()執(zhí)行盐数。
2. 參數(shù)不同：apply第二個參數(shù)是數(shù)組棒拂。call和bind有多個參數(shù)需要挨個寫。
場景：
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 函數(shù)只給出了兩種排序 InsertionSort 和 QuickSort帚屉，數(shù)量小于10的數(shù)組使用 InsertionSort，比10大的數(shù)組則使用 QuickSort琐旁。
之前的版本是：插入排序和快排涮阔，現(xiàn)在是冒泡
原理實現(xiàn)鏈接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js
***710行代碼開始***
面試題：深拷貝和淺拷貝
共同點：復(fù)制
1. 淺拷貝：只復(fù)制引用，而未復(fù)制真正的值灰殴。
var arr1 = ['a','b','c','d'];
var arr2 = arr1;
var obj1 = {a:1,b:2}
var obj2 = Object.assign(obj1);
2. 深拷貝：是復(fù)制真正的值 （不同引用）
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的區(qū)別
公共點：在客戶端存放數(shù)據(jù)
區(qū)別：
1. 數(shù)據(jù)存放有效期
sessionStorage : 僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效∥袄【關(guān)閉瀏覽器就沒了】
localStorage : 始終有效辣之，窗口或者瀏覽器關(guān)閉也一直保存，所以叫持久化存儲皱炉。
cookie : 只在設(shè)置的cookie過期時間之前有效怀估，即使窗口或者瀏覽器關(guān)閉也有效。
2. localStorage合搅、sessionStorage不可以設(shè)置過期時間
cookie 有過期時間多搀，可以設(shè)置過期（把時間調(diào)整到之前的時間，就過期了）
3. 存儲大小的限制
cookie存儲量不能超過4k
localStorage灾部、sessionStorage不能超過5M
****根據(jù)不同的瀏覽器存儲的大小是不同的康铭。
1.4 H5/C3面試題
面試題：什么是語義化標(biāo)簽
1. 易讀性和維護(hù)性更好。
2. seo成分會更好赌髓，蜘蛛抓取更好从藤。
3. IE8不兼容HTML5標(biāo)簽的。解決：可以通過html5shiv.js去處理锁蠕。
面試題：::before 和 :after中雙冒號和單冒號 有什么區(qū)別夷野？解釋一下這2個偽元素的作用。
1. 區(qū)別
:是偽類荣倾、::偽元素 ===》是為了做區(qū)分
2.是什么悯搔？作用
元素before之前 、 元素after之后
作用：清除浮動逃呼、樣式布局上也有作用
面試題：如何關(guān)閉IOS鍵盤首字母自動大寫
<input type="text" autocapitalize='off'>
面試題：怎么讓Chrome支持小于12px 的文字鳖孤？
Chrome默認(rèn)字體大小是：16px
**每個瀏覽器默認(rèn)字體大小可能都不一樣
<style type="text/css">
div{
font-size:10px;
}
div span{
display: inline-block;
-webkit-transform:scale(1.6);
}
</style>
面試題：rem和em區(qū)別
相對于font-size
em針對于父元素的font-size
rem針對于根(html)元素的font-size
面試題：ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉
<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長按時觸發(fā)系統(tǒng)的菜單抡笼，禁止ios&android長按時下載圖片
禁止ios 長按時觸發(fā)系統(tǒng)的菜單，禁止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;
}
面試題：自適應(yīng)
淘寶無限適配【移動端】：淘寶無限適配 + 布局單位使用rem
面試題：響應(yīng)式
1. 是什么黄鳍？
一個URL可以響應(yīng)多端
2. 語法結(jié)構(gòu)
@media only screen and (max-width: 1000px){
ul li:last-child{
display: none;
}
}
only : 可以排除不支持媒體查詢的瀏覽器
screen ： 設(shè)備類型
max-width | max-height
min-width | min-height
3. 響應(yīng)式圖片【性能優(yōu)化】
<picture>
<source srcset="1.jpg" media='(min-width:1000px)'>
<source srcset="2.jpg" media='(min-width:700px)'>
<img srcset="3.jpg">
</picture>
布局方案
一推姻、什么情況下采用響應(yīng)式布局
數(shù)據(jù)不是特別多，用戶量不是特別大框沟，純展示類的項目適合響應(yīng)式布局
例如：公司的官網(wǎng)藏古、專題頁面
特別追求性能的項目，不太適合響應(yīng)式忍燥，因為如果添加了很多的響應(yīng)式就會造成加載速度變慢拧晕。
二、pc + 移動端應(yīng)該做什么樣的布局方案
注意：訪問量還可以或者比較大梅垄，類似于淘寶網(wǎng)厂捞。
pc是一套，會加入一點點響應(yīng)式。
移動端是一套靡馁，會使用自適應(yīng)的布局方式欲鹏。
三、pc的設(shè)計圖
ui：1980
筆記本電腦：1280
ui圖的寬度和電腦的寬度不對應(yīng)該怎么辦臭墨？
1. 把ui圖進(jìn)行等比縮放赔嚎，縮放成和電腦一樣的尺寸
2. 換1980的電腦
四、移動端的設(shè)計圖
寬度：750
因為750設(shè)計圖/2就是375胧弛，正好是iphone6的尺寸尤误，我們要把iphone6的尺寸做為基準(zhǔn)點。
第二章 面試題進(jìn)階篇
2.1 ES6面試題
面試題：var结缚、let袄膏、const區(qū)別
var寸癌、let藤韵、const 共同點都是可以聲明變量的
區(qū)別一：
var 具有變量提升的機(jī)制
let和const沒有變量提升的機(jī)制
區(qū)別二：
var 可以多次聲明同一個變量
let和const不可以多次聲明同一個變量
區(qū)別三：
var、let聲明變量的
const聲明常量
var和let聲明的變量可以再次賦值抚吠，但是const不可以再次賦值了德崭。
區(qū)別四：
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 );
面試題：將下列對象進(jìn)行合并
方式一：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) );
面試題：箭頭函數(shù)和普通函數(shù)有什么區(qū)別斥黑？
1. this指向的問題
箭頭函數(shù)中的this只在箭頭函數(shù)定義時就決定的，而且不可修改的（call眉厨、apply锌奴、bind）
****箭頭函數(shù)的this指向定義時候、外層第一個普通函數(shù)的this
2. 箭頭函數(shù)不能new（不能當(dāng)作構(gòu)造函數(shù)）
3. 箭頭函數(shù)prototype
4. 箭頭函數(shù)arguments
面試題：Promise有幾種狀態(tài)
有三種狀態(tài)：
pending（進(jìn)行中）
fulfilled（已成功）
rejected（已失敽豆伞）
面試題：find和filter的區(qū)別
區(qū)別一：返回的內(nèi)容不同
filter 返回是新數(shù)組
find 返回具體的內(nèi)容
區(qū)別二：
find ：匹配到第一個即返回
filter ： 返回整體（沒一個匹配到的都返回）
面試題：some和every的區(qū)別
some ==》 如果有一項匹配則返回true
every ==》 全部匹配才會返回true
2.2 webpack面試題
面試題：webpack插件
2.3 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第三章 面試題框架篇
3.1 Vue面試題
面試題：Vue2.x 生命周期
1. 有哪些生命周期
系統(tǒng)自帶：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2. 一旦進(jìn)入到頁面或者組件鹿蜀，會執(zhí)行哪些生命周期，順序服球。
beforeCreate
created
beforeMount
mounted
3. 在哪個階段有$el茴恰，在哪個階段有$data
beforeCreate 啥也沒有
created 有data沒有el
beforeMount 有data沒有el
mounted 都有
4. 如果加入了keep-alive會多倆個生命周期
activated、deactivated
5. 如果加入了keep-alive斩熊，第一次進(jìn)入組件會執(zhí)行哪些生命往枣？
beforeCreate
created
beforeMount
mounted
activated
6. 如果加入了keep-alive，第二次或者第N次進(jìn)入組件會執(zhí)行哪些生命周期粉渠？
只執(zhí)行一個生命周期：activated
面試題：談?wù)勀銓eep-alive的了解
1. 是什么
vue系統(tǒng)自帶的一個組件分冈，功能：是來緩存組件的。===》提升性能
2. 使用場景
就是來緩存組件霸株，提升項目的性能雕沉。具體實現(xiàn)比如：首頁進(jìn)入到詳情頁，如果用戶在首頁每次點擊都是相同的去件，那么詳情頁就沒必要請求N次了坡椒，直接緩存起來就可以了饺著，當(dāng)然如果點擊的不是同一個，那么就直接請求肠牲。
面試題：v-if和v-show區(qū)別
1. 展示形式不同
v-if是 創(chuàng)建一個dom節(jié)點
v-show 是display:none 幼衰、 block
2. 使用場景不同
初次加載v-if要比v-show好，頁面不會做加載盒子
頻繁切換v-show要比v-if好缀雳，創(chuàng)建和刪除的開銷太大了渡嚣，顯示和隱藏開銷較小
面試題：v-if和v-for優(yōu)先級
v-for的優(yōu)先級要比v-if高
***是在源碼中體現(xiàn)的：function genElement
面試題：ref是什么？
來獲取dom的
面試題：nextTick是什么?
獲取更新后的dom內(nèi)容
面試題：scoped原理
1. 作用：讓樣式在本組件中生效肥印，不影響其他組件识椰。
2. 原理：給節(jié)點新增自定義屬性，然后css根據(jù)屬性選擇器添加樣式深碱。
面試題：Vue中如何做樣式穿透
stylus樣式穿透使用：>>>
sass和less使用：/deep/
通用使用： :v-deep
面試題：Vue組件傳值
父組件-->子組件：
1. 父組件：
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}
2. 在子組件中使用props（可以是數(shù)組也可以是對象）接收即可腹鹉。可以傳多個屬性敷硅。
export default {
props: ['myName']
}
子組件-->父組件：
1. 子組件
<button @click="changeParentName">改變父組件的name</button>
export default {
methods: {
//子組件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack')
}
}
}
2. 父組件
<child @handleChange="changeName"></child>
methods: {
changeName(name) {
this.name = name
}
}
兄弟組件之間：bus.js
面試題：computed功咒、methods、watch有什么區(qū)別绞蹦？
1. computed vs methods區(qū)別
computed是有緩存的
methods沒有緩存
2. computed vs watch區(qū)別
watch是監(jiān)聽力奋，數(shù)據(jù)或者路由發(fā)生了改變才可以響應(yīng)（執(zhí)行）
computed計算某一個屬性的改變，如果某一個值改變了幽七，計算屬性會監(jiān)聽到進(jìn)行返回
watch是當(dāng)前監(jiān)聽到數(shù)據(jù)改變了景殷，才會執(zhí)行內(nèi)部代碼
面 試題：props和data優(yōu)先級誰高？
props ===> methods ===> data ===> computed ===>watch
面試題：Vuex有哪些屬性澡屡？
state猿挚、getters、mutations驶鹉、actions绩蜻、modules
state 類似于組件中data，存放數(shù)據(jù)
getters 類型于組件中computed
mutations 類似于組件中methods
actions 提交mutations的
modules 把以上4個屬性再細(xì)分梁厉，讓倉庫更好管理
面試題：Vuex是單向數(shù)據(jù)流還是雙向數(shù)據(jù)流辜羊？
Vuex是單向數(shù)據(jù)流
面試題：Vuex中的mutaitons和actions區(qū)別
mutaitons : 都是同步事物
actions : 可以包含任意異步操作
***在調(diào)試中就看出來
面試題：Vuex如何做持久化存儲
Vuex本身不是持久化存儲
1. 使用localStorage自己寫
2. 使用vuex-persist插件
面試題：Vue設(shè)置代理
vue.config.js
module.exports = {
publicPath:'./',
devServer: {
proxy: 'http://localhost:3000'
}
}
面試題：Vue項目打包上線
1. 自測==>修改路由模式
2. 代理不生效，使用ENV
3. 修改路徑
面試題：Vue路由模式
路由模式有倆種：history词顾、hash
區(qū)別：
1. 表現(xiàn)形態(tài)不同
history:http://localhost:8080/about
hash:http://localhost:8080/#/about
2. 跳轉(zhuǎn)請求
history : http://localhost:8080/id ===>發(fā)送請求
hash : 不會發(fā)送請求
3. 打包后前端自測要使用hash，如果使用history會出現(xiàn)空白頁
面試題：介紹一下SPA以及SPA有什么缺點
SPA是什么碱妆？單頁面應(yīng)用
缺點：
1. SEO優(yōu)化不好
2. 性能不是特別好
面試題：Vue路徑傳值
1. 顯式
http://localhost:8080/about?a=1
1.1 傳：this.$router.push({
path:'/about',
query:{
a:1
}
})
1.2 接：this.$route.query.a
2. 隱式
http://localhost:8080/about
2.1 傳：this.$router.push({
name:'About',
params:{
a:1
}
})
2.2 接：this.$route.params.a
面試題：路由導(dǎo)航守衛(wèi)有哪些
全局肉盹、路由獨享、組件內(nèi)
1. 全局
beforeEach疹尾、beforeResolve上忍、afterEach
2. 路由獨享
beforeEnter
3. 組件內(nèi)
beforeRouteEnter骤肛、beforeRouteUpdate、beforeRouteLeave
使用場景：判斷是否登錄窍蓝，如果登錄就next否則就跳轉(zhuǎn)到登錄頁面
面試題：Vue動態(tài)路由
場景：詳情頁(文章腋颠、商品)
router.js配置：
{
path: "/list",
name: "List",
children:[
{
path:"/list/:id",
name:'Details',
component: () =>
import("../views/Details.vue"),
}
],
component: () =>
import("../views/List.vue"),
},
面試題：雙向綁定原理
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的。
通過Object.defineProperty()來實現(xiàn)數(shù)據(jù)劫持的吓笙。
1.實現(xiàn)一個解析器Compile淑玫，可以掃描和解析每個節(jié)點的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器面睛。
2.實現(xiàn)一個監(jiān)聽器Observer絮蒿，用來劫持并監(jiān)聽所有屬性，如果有變動的叁鉴，就通知訂閱者土涝。
3.實現(xiàn)一個訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)幌墓，從而更新視圖但壮。
面試題：什么是虛擬DOM
其實就是數(shù)據(jù)，把dom變成數(shù)據(jù)結(jié)構(gòu)常侣。
面試題：diff算法
利用diff算法可以更多提升dom之間對比的性能（采用虛擬dom數(shù)據(jù)進(jìn)行對比）茵肃。
面試題：講一下MVVM
M就是data的model層
V就是view視圖層
VM就是理解為v-model原理實現(xiàn)，通過view更新model
3.2 微信小程序面試題
面試題：如何自定義頭部袭祟？
app.json進(jìn)行配置
"window":{
"navigationStyle":"custom",
}
面試題：不校驗URL
工具==》詳情==》本地設(shè)置==》不校驗合法域名 ： 項目上線前URL一定要請求到（不勾選也可以請求到數(shù)據(jù)）
3.3 uni-app面試題
面試題：生命周期
應(yīng)用生命周期验残、頁面生命周期、組件生命周期
面試題：條件編譯
在工具中巾乳，打if出現(xiàn)的條件編譯
例如：
<!-- #ifdef H5 -->
<h1>這是h5端</h1>
<!-- #endif -->
第四章 面試題性能優(yōu)化篇
4.1 加載優(yōu)化
1. http請求
能不能減少（能不能合并）
2. 圖片的雪碧圖
3. script標(biāo)簽位置
4. link標(biāo)簽（css引入）
4.2 圖片優(yōu)化
1. 圖片懶加載
2. 響應(yīng)式圖片
3. webp代替其他格式
4. 小圖標(biāo)可以改用字體圖標(biāo)
4.3 渲染優(yōu)化
1. 減少重繪和回流
2. 改變位置使用transform
3. 動畫盡量用requestAnimationFrame您没，不要用定時器
4.4 首屏優(yōu)化
1. 長列表
2. 項目的html文件、css文件胆绊、圖片氨鹏、js文件壓縮打包
4.5 vue優(yōu)化
1. keep-alive 緩存組件
2. 路由懶加載
3. 內(nèi)容使用
v-if和v-show
computed、watch压状、methods
4. Object.freeze ：凍結(jié)對象
純展示類的接口數(shù)據(jù)仆抵，凍結(jié)就可以了
5. 使用ui組件按需引入
第五章 面試題兼容篇
5.1 頁面樣式兼容
1. 在ios鍵盤中首字母大寫的問題?
<input type="text" autocapitalize='off'>
2. ios日期轉(zhuǎn)換NAN問題
具體就是，new Date('2020-11-12 00:00:00')在ios中會為NAN
解決方案：用new Date('2020/11/12 00:00:00')的日期格式种冬，或者寫個正則轉(zhuǎn)換
3. 在移動端使用click事件有300ms延遲的問題
禁止雙擊縮放===》meta:user-scalabel=no
4. 移動端touch事件有穿透（點透）的問題镣丑，怎么解決？
4.1 阻止默認(rèn)行為 : e.preventDefault();
4.2 fastclick.js
5. 安卓部分版本input的placeholder偏上
input{
line-height:normal;
}
第六章 面試題網(wǎng)絡(luò)請求篇
6.1 跨域面試題
前端：jsonp娱两、vue的項目可以設(shè)置代理（打包后無效莺匠。解決：.ENV文件）
后端：CORS
6.2 http和https的區(qū)別？
1. 端口不同
http ：80端口
https ：443端口
2. https比http更加安全
***https就是證書
第七章 WEB安全篇
7.1 XSS攻擊
用戶輸入的文本框十兢，需要替換某些特殊字符（ <> ... ）
7.2 SQL注入
用戶輸入的文本框中不可以有特殊符號（ 引號趣竣、空格 ）
7.3 接口安全
第八章 其他類面試題
8.1 token
8.2 SEO
新增面試題vue2/vue3面試題
vue2雙向綁定和vue3雙向綁定區(qū)別
說一說vue2和vue3區(qū)別
在beforeMount中如何獲取dom
nextTick原理
Vite使用過嗎摇庙？說一說Vite與webpack區(qū)別
pinia使用過嗎？說一說vuex與pinia區(qū)別
vue如何解決seo的問題
vue如何分包
Vue3自己封裝過組件嗎遥缕？如何設(shè)計一個modal組件
vue3提升性能有哪些點
Vue 3.0 性能提升主要是通過哪幾方面體現(xiàn)的卫袒？
Vue 3.0 所采用的 Composition Api 與 Vue 2.x使用的Options Api 有什么區(qū)別？
Proxy 相對于 Object.defineProperty 有哪些優(yōu)點单匣？
Vue 3.0 在編譯方面有哪些優(yōu)化夕凝？
新增微信小程序面試題
- 體積過大如何分包
- 小程序js和javascript區(qū)別
新增TypeScript面試題
- ts和js有什么不同？
- 是否可以將多個.ts文件合并成一個.js文件封孙？如果是迹冤，那么如何做？
- 內(nèi)部模塊和外部模塊有什么區(qū)別虎忌？
- JavaScript不支持函數(shù)重載泡徙，但TypeScript是否支持函數(shù)重載？
- TypeScript是否支持所有面向?qū)ο蟮脑瓌t膜蠢？
- 如何檢查TypeScript中的null和undefined 堪藐？
- TS的“接口”和“type”語句有什么區(qū)別？
