面試覆盤總結/前端社招面試記錄

樓主工做兩年半，開始從事java，19年春節後開始學習前端，19年4月開始前端項目。
面試題的基本整理以下，之後有機會慢慢補全答案，也歡迎大佬提供解答。

1、算法

前端算法考得比較簡單，並且不少公司都不考，目前遇到的有：
1，打平數組
2，最長不重複子串
3，最大島嶼
4，全排列與組合
5，用兩個棧實現隊列
6，以及會問一些排序算法思路、複雜度、優缺點什麼的
總的來講沒什麼難度吧，畢竟也沒有公司會讓前端手寫堆排哈哈哈哈哈

2、手寫代碼題

1，正則將十六進制顏色轉成rgb 2，手寫call、apply和bind
3，手寫instanceOf
4，函數柯里化

function curry(fn, args = []) {
  return function(){
      let rest = [...args, ...arguments];
      if (rest.length < fn.length) {
          return curry.call(this,fn,rest);
      }else{
          return fn.apply(this,rest);
      }
  }
}
//test
function sum(a,b,c) {
  return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2,3)); //6
複製代碼

5，Promise和Promise.all的手寫，以及Promise的finally是怎麼實現的
6，手寫reduce以及用reduce計算元素個數

var arr = [1,4,5,3,7,2]

Array.prototype.myReduce = function(fn,prev){
  let myArr=this
  for(let i=0;i<myArr.length;i++){
    if(prev===undefined){
      prev=myArr[i]
    }else {
      prev=fn(prev,myArr[i],i,myArr)
    }
  }
  return prev
}

console.log(arr.reduce((a,b)=>a-b),arr.myReduce((a,b)=>a-b))
console.log(arr.reduce((a,b)=>a-b,0),arr.myReduce((a,b)=>a-b,0))
複製代碼

function count(arr,val) {
  return arr.reduce((prev,item)=>{
    if(item==val){
      return prev+1
    }else {
      return prev
    }
  },0)
}

console.log(count([1,2,3,2,4,4,4,9],4))
複製代碼

7，實現一個函數刪除數組中某個指定元素（元素可能有多個），要求數組還在原地
8，尾遞歸實現斐波那契數列

function fib(n,first,second){
  if(n<=1){
    return first
  }else {
    return fib(n-1,second,first+second)
  }
}
複製代碼

9，節流和防抖
10，手寫eventbus
11，已知add，實現sum

var add = function(a,b,fn){
  fn(a+b)
}

add(1,2,(r)=>console.log(r))

var sum = function(fn,...args){
  var tempSum = 0
  for(let i=0;i<args.length;i++){
    add(tempSum,args[i],(result)=>{tempSum=result})
  }
  fn(tempSum)
}

console.log(sum((r)=>{console.log(r)},1,2,4,5,5,7))
複製代碼

12，實現Object.is
面試官問Set是用什麼實現的，我說Object.is，而後他說你能本身實現一個嗎，主要是NaN和+-0的判等，+-0我想用算數移位看符號的，結果失敗，而後面試官說能夠除+-0，判斷正負無窮的相等性。
13，lru

3、手寫css題

1，實現三角形

#triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}
複製代碼

2，手寫自適應兩欄佈局
我剛開始寫了個flex，而後面試官問還有嗎，我答calc(100%-100px)，而後他又問我還有嗎，沒想到，後來想一想他可能想問bfc

4、js基礎

1，es6新增，class的super指向父原型對象，map和weakmap，set和weakset，箭頭函數和普通函數的this指向，document.addEventListener的this指向（箭頭函數中window，普通函數中target），Genrator和yield，Proxy和Reflect
2，js事件循環，setTimeout的時間是等待加入隊列的時間,在setInterval中加入alert，會怎麼執行
3，Promise和aysnc和await，抄了一道讀代碼題

let a;
const b = new Promise((resolve, reject) => {
  console.log('promise1');
  resolve();
}).then(() => {
  console.log('promise2');
}).then(() => {
  console.log('promise3');
}).then(() => {
  console.log('promise4');
});

a = new Promise(async (resolve, reject) => {
  console.log(a);
  await b;
  console.log(a);
  console.log('after1');
  await a
  resolve(true);
  console.log('after2');
});

console.log('end');
複製代碼

4，原型鏈、js繼承的六種方式及優缺點、也抄了道讀代碼題

console.log('Hello World!');
Function.prototype.a = () => console.log(1);
Object.prototype.b = () => console.log(2);
function A() {}
const a = new A();
a.a();
a.b();
複製代碼

5，強緩存與協商緩存，304狀態碼
6，cookie和localStorage，sessionStorage
7，xss和csrf攻擊
8，跨域方式、jsonp詳細原理、cors普通請求和複雜請求的區別
9，typeof和instanceof，及Object.prototype.toString.call()
10，事件流，事件冒泡與事件捕獲
11，dom事件，document.ready和window.onload
12，垃圾回收機制及存放堆區仍是棧區及閉包
13，xhr
14，cmd和amd，commonjs和es6，require加載順序，詳見紅寶書
15，重排和重繪以及怎樣防止重排和重繪
16，[]==![]

5、webpack

1，loader和pluguin的區別、執行順序
2，cssloader和styleloader區別、babelpolyfill和babelruntime的區別
3，babel原理與ast樹與編譯原理
3，靜態引入才能作treeshaking
4，webpack優化相關，codesplit，treeshaking，sourcemap和gzip
5，webpack多入口配置
6，cssmodule的開啓
7，骨架屏

6、vue相關

1，vue和react的區別
2，源碼理解，包括initState，nextTick，set，computed，以及Object.defineProperty、發佈訂閱模式、diff算法
3，watch的immediate和deep
4，vue3和vue2的區別，Proxy不兼容ie
5，vue父子組件生命週期鉤子的執行順序
6，組件間通訊方式，vuex模塊化，怎麼在一個模塊裏通知另外一個模塊
7，hash和history的原理及優缺點
8，路由鉤子
9,vue加載優化
10，vue.component和extend
11，數組變異方法的實現

七，css相關

1，水平與垂直居中的方式
2，flex：0 1 auto表明什麼
3，bfc
juejin.cn/post/692419…
4，定位方式
5, 哪些屬性能夠繼承
6，rem佈局
7，怎樣實現小於12px的字體
8，link和import
9，清除浮動的方式
10，讓一個元素消失，當時答了display：none;visible:hidden；和opacity:0；應該是還有的

八，ts相關

1，type和interface
2，可選鏈

九，網絡相關

1，iso模型和每層的協議
2，http1.1和2.0
3，tcp和udp，三次握手和四次揮手，爲何握手三次揮手四次，爲何要兩個msl
4，http和https，ssl原理
不知道，而後我說我猜是rsa公鑰加密私鑰解密，而後面試官說你猜的好準哦。。。。。
5，從輸入url到渲染界面，發生了什麼，經典問題。

十，設計題，個人噩夢，真的徹底不會。。。。。

1，讓你設計一個input輸入框，你會怎麼作
2，設計一個dialog，用過$dialog(....)方式調用
3，實現ajax請求的封裝，大概就是實現一個axios？
4，下拉加載更多，再滾上去，怎樣減小重排重繪，印象中好像是刪掉內容不刪掉cell
5，實現一個div在父div裏面的拖拽，手寫代碼。。。。。面試官你告訴我你能在面試半小時內寫出來嗎？？？
6，設計一個相似於elementUI的form表單
7，給個案例，問minxin裏面放什麼，組件裏面放什麼
8，大文件上傳
9，vue實現一個樹形組件
吸收的教訓就是多看看平時使用的一些庫的實現吧，好比axios和elementUI。

十一，其餘

1，部署相關：jenkins和nginx，以及cdn原理，問了一下cdn向主服務器發送的是什麼請求，這個我後來沒搜到。。。。 2，設計模式：報你知道的設計模式，而後報的過程當中被問過單例、裝飾器和適配器、以及工廠和抽象工廠 3，echarts底層：我說webgl，canvas和svg，而後面試官好像不是很滿意，我也不懂該答什麼，懶得研究