前端面經總結合集（他人+本身）1

參考面經（字節）： https://segmentfault.com/a/11...

推薦幾個學習的網站：
現代JS教程：：https://zh.javascript.info/
JS詞典：https://developer.mozilla.org...
阮一峯老師的ES6入門：https://es6.ruanyifeng.com/#d...

問題區

1.JS

1. ES6基本類型 ？
2. Set，Map區別？ Set無序，相似於數組。能夠用於數組快速去重。Map相似於json數據，鍵值對，可是鍵能夠是對象。
3. 判斷數組的幾種方法？爲何要用Object.prototype.toString(),數組的.toString()不行嗎，輸出什麼
4. 講一下事件流，怎麼阻止冒泡？如何移除事件綁定？
5. ES6 ，ES7新特性？

2.HTMl和CSS

1. flex常見屬性，如何實現相似快手這種視頻列表的瀑布流佈局(一行兩個) flex:1的含義
2. css動畫的實現方式？具體一些
3. position每種屬性的做用

3.編程題

1. 什麼是面向對象？面向對象特性？與面向過程的區別？
   把大象放進冰箱 分別用面向對象，面向過程，函數式編程實現。
2. 求二叉樹每層的最大節點，放入數組輸出。(須要本身構造一棵二叉樹去驗證) 問優化：怎麼只用一層循環實現層序遍歷
3. 實現複雜版本的bind，可new可繼承
4. 實現一個函數，將輸入的數組轉爲鏈表，並實現一個方法向鏈表指定位置插入值
5. 兩個無序數組合併成一個有序數組，問時間複雜度。 延伸：快排和冒泡排序的時間複雜度，使用場景
6. 實現toFix函數
7. 說一下instanceof的原理，實現一下
8. 知道map方法嗎？實現一下。 reduce和基本版都寫了
9. 實現ajax，至少實現get和post方法。這裏深挖了get和post具體的傳參方式以及ajax中具體是如何實現的
10. 實現一個模態框組件，用vue和react都可(要能傳遞肯定取消事件函數，有遮罩，居中)
11. 看代碼輸出（考察this和const，let區別）

4. 項目

1. 實習項目，主要關心作的項目的做用和難點
2. 本身寫的最好的組件
3. react和vue的區別，各自的生命週期
4. vue 路由，hash和history的區別，大家項目中是怎麼進行狀態管理的，怎麼配置路由的？
5. 常見的HTTP請求以及每一個請求的做用？GET和POST的區別
6. 前端安全措施，常見的安全問題，XSS？CSRF
7. https ca證書的做用，SSL層的做用
8. 路由切換頁面的原理？
9. 如何儘量發現代碼中的bug，有沒有一些工具去輔助

5. 計算機相關知識

1. 你知道的數據結構有哪些？數組是數據結構嗎？不是，那爲何？什麼是數據結構？你剛剛說到了堆，堆是一種新的數據結構嗎？不是，是徹底二叉樹。什麼是徹底二叉樹？
2. 樹和圖的區別？ 圖的應用場景？
3. 網絡模型以及每層的協議？

6. 其餘

1. 別人的評價
2. 自身的優勢和缺點
3. 壓力最大的時候？怎麼排解壓力
4. 你對於之後前端學習的規劃？

答案區

1.1 ES6基本類型

String，Bool，Undefined，Object，Symbol，Number，Null

1.2 Set對象詳解

參見https://cloud.tencent.com/dev...

• Set 對象容許你存儲任何類型的惟一值，不管是原始值或者是對象引用。
• Set特殊值：Undefined和Infinity只能存一個；NaN只能存一個，雖然不相等；
• Set可與Array互換 ：

let arr = new Array([...Set對象])  
let set=new Set(arr)

• Set做用：並交差集，數組去重。

let a=new Set([1,2,3]);
let b=new Set([2,3,4]); //並集
let union=new Set([...a,...b]);
console.log(union); //交集
let intersect=new Set([...a].filter(x=>b.has(x)));
console.log(intersect); //差集
let diff=new Set([...a].filter(x=>!b.has(x)));

// 數組快速去重
console.log([...new Set(arr)])

1.3 判斷數組的幾種方法

參見https://juejin.cn/post/684490...

下面幾種方法前兩個不許確

1. arr instanceof Array 缺點：不一樣執行環境下，判斷不正確問題
2. arr.constructor ===Arrray 缺點：constructor可被重寫；不一樣執行環境下，constructor判斷不正確問題
3. Array.isArray(arr)
4. Object.prototype.toString
   如：Object.prototype.toString.call(arg)==='[object Array]'

instanceof 判斷實例是否屬於某種類型，邏輯上是按照該實例的__proto__一層層向上找，子類或者後代一樣適用。
它假定只有一個全局環境。若是網頁中包含多個框架，那實際上就存在兩個以上不一樣的全局執行環境，從而存在兩個以上不一樣版本的Array構造函數。若是你從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具備各自不一樣的構造函數。

toString 能夠用toString封裝一個函數，判斷變量的類型

function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1);
}

var a = [1,2,3];
console.log(getType(a)); //Array 

var b = function(){};
console.log(getType(b)); //Function

**typeof(Arr) ** // Object    不可用於判斷Array，通常用來判斷基本類型

typeof基本用法參見下圖

1.4 事件流，阻止冒泡，接觸事件綁定

https://segmentfault.com/a/11...
1.事件流描述的是從頁面中接收事件的順序,也可理解爲事件在頁面中傳播的順序。
2.事件就是用戶或瀏覽器自身執行的某種動做。諸如click(點擊)、load(加載)、mouseover(鼠標懸停)。
3.事件處理程序響應某個事件的函數就叫事件處理程序(或事件偵聽器)。

addEventListener()和removeEventListener()。全部DOM節點中都包含這兩個方法，而且它們都接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。當這個布爾值爲true時，表示在捕獲階段調用事件處理程序；若果是false，表示在冒泡階段調用事件處理程序。

調用順序：
捕獲階段，按照由外以內調用事件處理函數；
冒泡階段，按照由內至內調用事件處理函數；
捕獲階段又在冒泡階段調用事件處理程序時：事件按DOM事件流的順序執行事件處理程序，且當事件處於目標階段時，事件調用順序決定於綁定事件的書寫順序（ps:目標階段是指點中的最內節點）

阻止冒泡
參見紅寶書（第4版P525）

1. 給子級加上 event.stopPropagation( )，阻止往上冒泡
2. 在事件處理函數中返回 false，組織了事件自己（默認事件）沒搞懂
3. event.target==event.currentTarget，讓觸發事件的元素等於綁定事件的元素，也能夠阻止事件冒泡；沒搞懂

1.5 ES5，ES6新特性

屬於基礎知識，不贅述

2.1 flex

1. 常見屬性：參見阮一峯老師的 http://www.ruanyifeng.com/blo...
2. 如何實現相似快手這種視頻列表的瀑布流佈局(一行兩個)
3. flex:1的含義：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。這裏至關於flex：1 1 auto。

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。
flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

2.2 css動畫的實現方式？具體一些

https://zh.javascript.info/js...

2.3 position每種屬性的做用

positon和display是前端最重要的兩個基本屬性，必定得好好寫
參見：阮一峯老師的https://www.ruanyifeng.com/bl...

3.11 (this、const/let/var）

// Q1 若是一個函數中有this，可是它沒有被上一級的對象所調用，那麼this指向的就是window
var a = 1;
function print () {
 console.log(this.a)
}            
print()  //a=1

// Q2 若是一個函數中有this，這個函數有被上一級的對象所調用，那麼this指向的就是上一級的對象。
const obj = {
 a: 2,
 print: function () { console.log(this.a) }
}
obj.print();  //2
​
// Q3 
const obj = {
 a: 3,
 print: function () { console.log(this.a) }
}
obj.print()  //3  與下面的foo()區別在因而全局環境仍是obj環境
const foo = obj.print; 
foo()     //undefind      全局狀況下調用的，沒有全局變量a

// Q3.1   若是一個函數中有this，這個函數中包含多個對象，儘管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象
const obj = {
    a: 3,
    printOut:{
        a:4,
        printIn: function(){ console.log(this.a)},
    },
}
obj.printOut.printIn()    //4 
const foo = obj.printOut.printIn;  
foo()     //undefind      全局狀況下調用的，沒有全局變量a
​
// Q4
const obj = {
 a: 4,
 print: () => { console.log(this.a) }
}
obj.print();                 //undefined     有箭頭函數，對象不構成單獨的做用域，致使`print`箭頭函數定義時的做用域就是全局做用域。
​
// Q5
var a = 5
const obj = {
 a: 6,
 print: () => { console.log(this.a) }
}
obj.print.call({a: 7}); //5         理由同上
​
// Q6 不太會
function Person () {
 this.a = 8
 this.print = function () {console.log(this.a)}
 return {a: 9}
}
​
const p = new Person()
console.log(p.a)
console.log(p.print())
​
// Q7 不太會
'use strict';
var a = 1;
​
function print () {
 console.log(this.a)
}
print()    //1

//考察let，const
// 1.
a = 100;
let a;
a = 10;
function test(num) {
    console.log(a);
    a = num;
}
console.log(a);
test(5);
console.log(a);

// 2.
const a;
a = 10;      //報錯