前端面試題

博主認為 面試題不在多在於精 一道題會了 可以延伸解決相同的類似問題

// 時間: 2020年-5月-29日 
1. javascript的幾種資料型別？.   // 供稿人: 博主自己
答案：string,boolean,number,undefined,array,null,function,object，symbol(es6新增)；


// 時間: 2020年-6月-1日 
2. js中深拷貝和淺拷貝的問題？.   // 供稿人: 博主自己
答案：https://blog.csdn.net/yunchong_zhao/article/details/102976981  // 部落格地址



// 時間: 2020年-6月-2日 
3.不使用for迴圈 建立一個長度為100 每個元素值等於它的下標的陣列？  // 供稿人: 博主自己
var arr=new Array(100);
arr=arr.fill(0).map((_,index)=>index);
console.log(arr)



// 時間: 2020年-6月-3日 
4.請說下你對js中原型物件和原型鏈的理解  // 供稿人: 博主自己
https://blog.csdn.net/yunchong_zhao/article/details/106207698  // 答案 參考地址



// 時間: 2020年-6月-4日 
5.請說出css中浮動帶來的問題,解決方法以及他們之間的缺點？  // 供稿人: 博主自己
https://blog.csdn.net/yunchong_zhao/article/details/105125239   // 答案 參考地址



// 時間: 2020年-6月-5日 
6.請說出幾種js中陣列去重的方法？  // 供稿人: 博主自己
https://blog.csdn.net/yunchong_zhao/article/details/104542382   // 答案 參考地址


// 時間: 2020年-6月-8日 
7.請說出rem和em的區別?    // 供稿人: 博主自己
https://blog.csdn.net/yunchong_zhao/article/details/104854398 // 答案 參考地址



// 時間: 2020年-6月-10日 
8.請說出你對js中作用域和作用域鏈的理解?    // 供稿人: 博主自己
https://blog.csdn.net/yunchong_zhao/article/details/106213233 // 答案 參考地址



// 時間: 2020年-6月-11日 
9.請說出下面的程式輸出什麼,為什麼這樣，怎麼樣讓他輸出0 1 2 3 4 5?    // 供稿人: 博主自己
for(var i=0;i<5;i++){
	setTimeout(function(){
		console.log(i);
	},1000)
}
// 輸出: 5 5 5 5 5
原因哈:非同步程式會放在事件佇列中，並不會阻塞主程式的執行，等主程式執行完之後，i已經變成了
5  這個時候 再輸出 i的值 就變成了 5 for迴圈裡面定義的變數是全域性作用域
// 輸出 0 1 2 3 4 的實現方式
//1.使用es5的方式 閉包來實現
for(var i=0;i<5;i++){
	(function(i){
		setTimeout(function(){
			console.log(i);
		},1000)
	})(i);
}
   // es6的let 關鍵字 塊級作用域
for(let i=0;i<5;i++){
	setTimeout(function(){
		console.log(i);
	},1000)
}


// 時間: 2020年-6月-12日 
10.說一說css中的盒子模型    // 供稿人: 博主
1）有三種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
還有一種就是css3新增的 border-sizing:border-box; 怪異盒模型
設定這個屬性之後   那麼  border,padding 將計算到content中 和ie盒子一樣了
還有一種不知道該不該加上 是 css3中的彈性佈局 也叫作 彈性盒子模型  待議哈 先算是三種
2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；

// 時間: 2020年-6月-15日 
11.能不能給我實現一個倆個數值之間產生隨機數功能?   // 供稿人: 博主 
https://blog.csdn.net/yunchong_zhao/article/details/105133279; // 答案參考地址

// 時間: 2020年-6月-17日 
12.說一下vue中元件的生命週期鉤子函式有那幾個?   // 供稿人: 博主 
答案:  beforeCreate 元件生成前,
       created  生成後,
       beforeMount 掛在前,
       mounted 掛載後,
       beforeUpdate 資料更新前,
       updated 更新後  
       beforeDestroy元件銷燬前,
       destoryed銷燬後
       
// 時間: 2020年-6月-18日 
13.說下你對防抖和節流的理解,能簡單實現下嗎?   // 供稿人: 博主 
https://blog.csdn.net/yunchong_zhao/article/details/104597753  // 答案參考地址

// 時間: 2020年-6月-19日 
14.說下你對js中閉包的理解，以及閉包的優缺點?   // 供稿人: 博主 
閉包的概念：閉包就是能讀取其他函式內部變數的函式，內層函式引用著外層函式的作用域，導致外層函式無法釋放變數，這個就叫做閉包
優點：
避免全域性變數的汙染
希望一個變數長期儲存在記憶體中（快取變數）
缺點：
記憶體洩露（消耗）
常駐記憶體，增加記憶體使用量

// 時間: 2020年-6月-21日 
15.讓一個元素居於螢幕正中間的方法？   // 供稿人: 博主
1.知道元素的寬高情況
<div></div>
div{
	height: 200px;
	width: 200px;
	background-color: #f00;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px
} 
2.不知道元素寬高
<div></div>
div{
	height: 200px;
	width: 200px;
	background-color: #f00;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

// 時間: 2020年-6月-22日 
16.說說跨域的是怎麼產生的?以及說幾種常見的解決方式？   // 供稿人: 博主
跨域是由於瀏覽器的同源策略導致的，導致不同源的資料瀏覽器雖然傳送成功了請求但是回來的時候瀏覽器隔擋在外，不會使用這些資料。
1.解決方式 使用jsop方式跨域解決  動態生成script標籤 通過src實現跨域請求
2.cors方式解決 後臺新增請求頭 同意相關域名可以進行訪問，後端解決 （node，中有個cors模組跨域）
3.webpack 代理跨域 一般是本地開發的使用用到的  會用
4.nginx 反向代理 上線的時候需要這種方式 解決跨域 瞭解

// 時間: 2020年-6月-23日 
1.說出幾個常用的vue中自帶的指令？   // 供稿人: 博主
1.v-on  方法繫結   語法糖  @
2.b-bind 屬性繫結   語法糖 ：
3.v-if  渲染判斷
4.v-show  元素狀態切換
5. v-for 遍歷渲染
6. v-html 渲染html字串
7. v-text 渲染文字
8. v-cloak  [v-cloak]{display:none;}  // 常用於在頁面載入時間比較長的情況下 隱藏頁面
9. v-once 只執行一次
10. v-model  資料雙向繫結
11. v-else v-else-if 和v-if 搭配使用
12. v-slot  插槽 

// 時間: 2020年-6月-29日 
17.談一談你對js中的垃圾回收機制的理解？   // 供稿人: 博主
1.標記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當變數進入執行環境的時候，比如函式中宣告一個變數，垃圾回收器將其標記為“進入環境”，當變數離開環境的時候（函式執行結束）將其標記為“離開環境”。
垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記，然後去掉環境中的變數以及被環境中變數所引用的變數（閉包），在這些完成之後仍存在標記的就是要刪除的變數了

2.引用計數(reference counting)
在低版本IE中經常會出現記憶體洩露，很多時候就是因為其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當宣告瞭一個變數並將一個引用型別賦值給該變數的時候這個值的引用次數就加1，如果該變數的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變數在使用，這個值沒法被訪問了，因此可以將其佔用的空間回收，這樣垃圾回收器會在執行的時候清理掉引用次數為0的值佔用的空間。

在IE中雖然JavaScript物件通過標記清除的方式進行垃圾回收，但BOM與DOM物件卻是通過引用計數回收垃圾的，
也就是說只要涉及BOM及DOM就會出現迴圈引用問題。

// 時間: 2020年-6月-30日 
18.說下vue中v-if和v-show的區別？   // 供稿人: 博主
首先他們都是控制元素在頁面上進行顯示隱藏的
區別:v-if 是通過元素在dom樹上的新增和刪除來實現的
    v-show 則是通過樣式 display:none/block； 來實現的
 效能優化，頻繁切換顯示隱藏的元素 最好使用 v-show進行渲染 v-if則運用於載入次數很少的dom元素 或者 第一次進入頁面載入後 往後就不變得的情況

// 時間: 2020年-7月-1日 
19.說下js中判斷資料型別的幾種方式？   // 供稿人: 博主
https://blog.csdn.net/yunchong_zhao/article/details/107039932  // 參考答案

// 時間: 2020年-7月-1日 
20.說下你對cookie和sessionStorage和localStorage的理解哈？   // 供稿人: 博主
https://blog.csdn.net/yunchong_zhao/article/details/105133172  // 參考答案

// 時間: 2020年-7月-13日 
21.說出下面num的輸出結果                  // 供稿人: 博主
var a=function(m,n){
	return m-n;
}
function a(m,n){
	return m+n;
}

var num=a(2,3);
console.log(num); //-1
解析： function 和 var 都有變數提升的作用 但是function提升比var更靠前 導致 var 宣告的函式a把之前function宣告的函式a覆蓋了  後面呼叫的函式 就是用 var宣告的函式a了


// 時間: 2020年-7月-16日 
21.下面的輸出結果是什麼                  // 供稿人: 博主
function obj(name){
	if(name){
		this.name=name;
	}
	return this;
}
obj.prototype.name="name2";
var a=obj('name1');
var b=new obj;
console.log(a.name,b.name);   // name1  name2

// 時間: 2020年-7月-17日 
21.React和Vue中為什麼要給遍歷的元件新增key屬性,其作用是什麼 ？      // 供稿人: 博主
答案: 略

// 時間: 2020年-7月-21日 
21.請問下面的a,b輸出什麼      // 供稿人: 博主
var a={n:1};var b=a; a.x=a={n:2};