大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12

本文經作者@lxcan 授權轉載，未經授權請勿直接轉載。
原文標題：《三年經驗前端社招——慧擇網》
原文鏈接：https://zhuanlan.zhihu.com/p/405690519
文末點擊閱讀原文直達

一面

1、自我介紹

2、以往公司介紹，項目介紹【描述】

3、算法題，有n階樓梯，一次可以走1步或2步，問有多少種走法。比如有3階，可以 111 12 21 總共3種走法【編程】
考點：斐波那契數列解法
分析：
（1）n=0和n=1 的時候，沒有其他選擇，F(0)=0;F(1)=1
（2）n>=2 的時候就變復雜起來，這時候可以操作的步驟也就2種，也就是走1步 (n-1) 與走2步 (n-2)
所以可以得到 F(n) = F(n-1) + F(n-2) ，從當前狀態轉為下一狀態的通用算法即可。
（3）驗證，使用2以上的數字驗證幾次
實現方式：
（1）遞歸
（2）循環迭代
（3）動態規劃（遞歸+緩存）

4、JS數據類型有哪些？它們在內存里面的模型是怎樣的，堆和棧有什么區別？【描述】
原始數據類型，存放在 棧內存中
number string boolean null undefined symbol
引用數據類型，存放在 堆內存中
object （細分為 object array function）

棧內存

• 存儲原始數據類型

• 按值訪問

• 存儲的值大小固定

• 由系統自動分配內存空間

• 空間小，運行效率高

• 先進后出，后進先出

堆內存

• 存儲引用數據類型

• 按引用地址訪問

• 存儲的值大小不定，可動態調整

• 由代碼進行指定分配

• 空間大，運行效率相對較低

• 無序存儲，可根據引用直接獲取

5、有三套樣式，大中小，怎么實現樣式切換？主題切換怎么做？【描述】【舉例】

之前做過的主題切換思路：
（1）在 static 目錄下新建一個 styles 文件夾，在 styles 下新建一個 theme.css 文件，將需要替換的 CSS 聲明在此文件中
（2）新建 theme-colors.js，用于聲明所有可選的主題，每種顏色都對應一個關鍵詞如 'primaryBtn' 等，方便區分
（3）通過 ajax 獲取 theme.css ，先將顏色值替換為關鍵詞，比如將 '#67c23a' 替換為 'primaryBtn'
（4）把關鍵詞再換回剛剛拿到的最新主題相應的顏色值，并在頁面上添加 style 標簽

6、頁面響應式做過嗎，實現思路？用幾套代碼實現的？【描述】

7、混合式app做過嗎【描述】

8、React做過嗎【描述】

9、最近在學什么技術？【描述】
Vue 3.0
React 基礎用法
下階段學習：
Node.js 全棧開發
泛客戶端開發（uni-app、React Native、Flutter）
計算機基礎、網絡、數據結構、算法

10、往后的職業規劃是怎樣的？【描述】

11、你有什么問題要問我的？【描述】

二面

1、說一下JS原型【描述】
5條原型規則：

所有的引用類型（數組、對象、函數），都具有對象特性，即可自由擴展屬性（除了"null"）以外

所有的引用類型（數組、對象、函數），都有一個__proto__ （隱式原型）屬性，屬性值是一個普通的對象

所有的函數，都有一個 prototype （顯式原型）屬性，屬性值也是一個普通的對象

所有的引用類型（數組、對象、函數），__proto__ 屬性值指向它的構造函數的 prototype 屬性值

當試圖得到一個對象（引用類型）的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__（即它的構造函數的 prototype）中尋找

2、instanceof 原理，怎么實現的？【描述】【偽代碼】
instanceof 可以正確的判斷對象的類型，因為內部機制是通過判斷 對象的原型鏈 中是不是能找到 類型的 prototype。

手寫實現instanceof

function?myInstanceof(left,?right)?{var?prototype?=?right.prototype;left?=?left.__proto__;while?(true)?{if?(left?===?null?||?left?===?undefined)?return?false;if?(left?===?prototype)?return?true;left?=?left.__proto__;} } console.log(myInstanceof(o1,?M));?//?true console.log(myInstanceof(o1,?Object));?//?true console.log(myInstanceof([1,?2],?Array));?//?true console.log(myInstanceof({?a:?1?},?Array));?//?false

實現分析：

• 首先獲取右邊參數 類型的顯式原型

• 然后獲得左邊參數 對象的隱式原型

• 然后一直循環判斷 對象的隱式原型 是否等于 類型的顯式原型，直到 對象的隱式原型為 null，因為原型鏈最終為 null

3、項目使用的是 原生小程序 還是 uni-app 小程序【描述】

4、你說做過SEO優化，做了哪些優化？【描述】

5、vue3有哪些新特性，它做了什么優化【描述】
Vue 3.0 性能提升：（1）響應式系統升級

• Vue.js 2.x 中響應式系統的核心是 Object.defineProperty

• Vue.js 3.0 中使用 Proxy 對象重寫了響應式系統

  • 可以監聽動態新增的屬性

  • 可以監聽刪除的屬性

  • 可以監聽數組的索引和 length 屬性

（2）編譯優化

• Vue.js 2.x 中通過標記靜態根節點，優化 diff 過程

• Vue.js 3.0 中標記和提升所有的靜態節點，diff 的時候只需要對比動態節點內容

  • Fragments 片段，模板中可以直接放文本內容或同級標簽(升級 vetur 插件)

  • 靜態節點提升到 render 函數外部，只在初始化時執行一次，再次render無需再次執行

  • Patch flag，標記動態節點（記錄節點內容、節點屬性），diff時跳過靜態根節點 只需關心動態節點內容

  • 緩存事件處理函數，減少了不必要的更新操作

（3）源碼體積的優化

• Vue.js 3.0 中移除了一些不常用的 API。例如：inline-template / filter 等

• Tree-shaking

6、TypeScript 有了解嗎？說下它的特性和優缺點【描述】
TypeScript 是 JavaScript 的一個超集（擴展集），就是在 JS 的基礎上多出一些擴展特性，這些擴展特性包括：強大的類型系統、對 ES6+ 的良好支持。TS 最終會被編譯為 JS 運行。

優點：

• 使用 TS 新特性開發項目，項目代碼的健壯性增強，代碼錯誤更早暴露。

• 編輯器支持情況良好，比如：VSCode，有很多智能提示，編碼更準確，提升開發效率。

• 使用 TS 的強類型特性來開發項目，可以使得項目代碼重構更牢靠。

• 使用 TS 的強類型特性來編寫代碼，可以減少很多不必要的類型判斷。

• TS 最終會被編譯為 JS 運行，可以將 ES6+ 編譯為ES5/ES3，兼容性好。

• TS 是漸進式的，完全可以使用 JS 編寫代碼，可以將新特性慢慢應用到項目中。

缺點：

• 引入了很多概念和新語法，有一定學習成本，對于一些小項目會增加開發成本

• 開發過程中遇到問題，可能相關 TS 的網上資料相比 JS 會少一些，需要花一些精力查找資料去解決問題

7、如果讓你接手react項目，是否能快速上手【描述】

最后

慧擇網是國內知名互聯網保險產品與服務平臺，早九晚六雙休，聽說不加班，地點在南山區粵海路動漫園。這家面試難度不大，好像是急招要求快速到崗，最后HR面談薪時，公司給不到期望的薪資，那就拜拜~繼續加油
往期回顧：

• 三年經驗前端社招——樸樸科技

• 三年經驗前端社招——騰訊微保

• 三年經驗前端社招——豐巢科技

• 三年經驗前端社招——眾安保險

• 三年經驗前端社招——有贊

• 三年經驗前端社招——Shopee

天生我材必有用，千金散盡還復來

最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信?湖南?拉你進群。

---

推薦閱讀

1個月，200+人，一起讀了4周源碼
我讀源碼的經歷

老姚淺談：怎么學JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結

以上是生活随笔為你收集整理的三年经验前端社招——慧择网的全部內容，希望文章能夠幫你解決所遇到的問題。

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