一年經驗面試字節抖音電商，分享下面經！

2024-04-18碼農

前言

大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心，今天分享一個一年經驗的 字節抖音電商 面經

一面

1、自我介紹？

略

2、問計畫

略

3、leetcode第112題，【路徑總和】

const hasPathSum = (root, sum) => { if (root == null) { // 遍歷到null節點 returnfalse; } if (root.left == null && root.right == null) { // 遍歷到葉子節點 return sum - root.val == 0; // 如果滿足這個就返回true。否則返回false } // 不是上面的情況，則拆成兩個子樹的問題，其中一個true了就行 return hasPathSum(root.left, sum - root.val) || hasPathSum(root.right, sum - root.val); }

4、你知道哪些JS陣列的API？

方法	作用	是否影響原陣列
push	在陣列後添加元素，返回長度	✅
pop	刪除陣列最後一項，返回被刪項	✅
shift	刪除陣列第一項，返回被刪項	✅
unshift	陣列開頭添加元素，返回長度	✅
reserve	反轉陣列，返回陣列	✅
sort	排序陣列，返回陣列	✅
splice	截取陣列，返回被截取部份	✅
join	將陣列變字串，返回字串	❌
concat	連線陣列	❌
map	相同規則處理陣列項，返回新陣列	❌
forEach	遍歷陣列	❌
filter	過濾陣列項，返回符合條件的陣列	❌
every	每一項符合規則才返回true	❌
some	只要有一項符合規則就返回true	❌
reduce	接受上一個return和陣列下一項	❌
flat	陣列扁平化	❌
slice	截取陣列，返回被截取區間	❌

5、手寫reduce

Array.prototype.sx_reduce = function (callback, ...args) { let start = 0, pre if (args.length) { pre = args[0] } else { pre = this[0] start = 1 } for (let i = start; i < this.length; i++) { pre = callback(pre, this[i], i, this) } return pre }

6、講一下HTTP緩存？

7、談談vue和react的區別和優劣？

vue2對ts支持較差，vue3時已解決

vue2對jsx支持較差，vue3時已解決

vue 和 react都是單向數據流

vue多用樣版 template，react多用 jsx

vue和react都使用虛擬dom和diff演算法

vue是雙向繫結，react是單向繫結

vue和react都倡導元件化開發

vue和react都支持伺服端渲染

vue2的狀態管理工具vuex，vue3用pinia，react用redux、mobx、recoil

vue的diff演算法比react更高效

react的寫法更貼近js原生

8、hooks用過嗎？聊聊react中 class元件和函陣列件的區別？

我的React比較菜。。

class元件：state和props都是固定的地址

函式式元件：state和props每次都會跟著渲染更新而更新

9、前端效能最佳化你會怎麽做？

列表最佳化：懶載入、虛擬列表、分頁

重繪回流：合並修改、requestAnimationFrame、will-change

送出最佳化：防抖

網路請求：控制並行量、取消重復請求、合並請求、http緩存

webpack最佳化：程式碼壓縮、gzip、CDN、代分碼割、合理設定hash、圖片轉base64

10、反問環節

略

二面

1、自我介紹？

略

2、計畫中遇到最復雜的是什麽？最有技術難度的是什麽？

略

3、演算法題

fn([['a', 'b'], ['n', 'm'], ['0', '1']]) => ['an0', 'am0', 'an1', 'am1', 'bn0', 'bm0', 'bn1', 'bm0']

解答

const fn = (arr) => { const length = arr.length const res = [] const dfs = (items, str = '', index = 1) => { if (index > length) { res.push(str) } else { for (const item of items) { dfs(arr[index], str + item, index + 1) } } } dfs(arr[0]) return res }

4、手寫

u.console('breakfast').setTimeout(3000) .console('lunch').setTimeout(3000) .console('dinner')

解答

classU{ constructor() { this.tasks = [] setTimeout(() => { this.next() }) } next() { const task = this.tasks.shift() task && task() } console(str) { const task = () => { console.log(str) this.next() } this.tasks.push(task) returnthis } setTimeout(delay) { const task = () => { setTimeout(() => { this.next() }, delay) } this.tasks.push(task) returnthis } }

5、事件代理是什麽？

當子元素都需要繫結同樣的事件的時候，這個時候可以把事件直接繫結在父元素上，並透過target物件來判斷執行不同的子元素操作，這樣可以大大減少繫結事件的數量，減少DOM操作，提高效能

6、e.target和e.currentTarget的區別？

e.target ：觸發事件的元素

e.currentTarget ：事件所繫結的元素

7、寫一個事件代理函式，需要判斷child是parent的子節點？

functionproxy(event, cb, parent, child) { parent[event] = function (e) { if (parent.contains(child) && e.target === child) { cb.call(this) } } }

8、看程式碼說結果？

var length = 10; functionfn() { returnthis.length + 1; } var obj1 = { length: 5, test1: function () { return fn() } } obj1.test2 = fn; obj1.test1.call() // 11 obj1.test1() // 11 obj1.test2.call() // 11 obj1.test2() // 6