跳至文章
Shemol字節前端工程訓練營機試
笔试 / 实习找工 / 字节

字節前端工程訓練營機試

分為單選題和程式題,記錄一下大概的知識點。

單選題

主要考資料結構與演算法,電腦網路和 html,css,js 基礎。

資料結構與演算法

夢回大一還是大二的資料結構與演算法考試…

排序題,氣泡排序,快速排序等等。出了兩三道吧。

演算法複雜度出了一道很簡單的題。

二元樹遍歷感覺也出了兩三道。

還有一道關於堆疊的問題。

電腦網路

傳輸層不可靠傳輸協定是什麼

UDP協定。

還有一道DNS報文的題目

只記得A選項是QR為0代表查詢,QR為1代表回應了。

html,css,js

如何統一不同瀏覽器的margin padding?

CSS Reset

css
* {
  margin: 0;
  padding: 0;
}

似乎還有 Normalize.css,這個要再學習一下。

還有一個 CSS float的問題,問哪一個屬於錯誤的用法

選項中有

A. float:

B. float: none

C. float: left

D. float: right

總之選A就對了

如何清除父元素高度塌陷

這個我忘記選項是什麼了,我暫時還沒了解。

  1. ::after 偽元素清除。
  2. 現代方案: display: flow-root 。
  3. 觸發 BFC 法:overflow 屬性。缺點是: overflow: hidden 的本職工作是「隱藏溢出的內容」。如果有下拉選單、陰影、提示框等需要「溢出」父容器的子元素,它們會被裁切掉。
做法屬於BFC應用的是:

BFC(Block Formatting Context),塊級格式化上下文。

BFC應用:

  1. 清除內部浮動(最常見的應用):父元素內部有浮動子元素(float: left/right),導致父元素高度塌陷。給父元素設定 overflow: hidden; 或 display: flow-root;。
  2. 防止垂直外邊距摺疊(Margin Collapse):在正常的文件流中,相鄰的兩個兄弟塊級元素,它們的垂直外邊距(margin-top 和 margin-bottom)會發生「摺疊」,合併為兩者中較大的那個值。 將其中一個元素(或兩個元素分別)用一個新的父元素包裹起來,並為這個父元素觸發 BFC(例如 overflow: hidden;)。
  3. 實現自適應兩欄/三欄佈局:實現一邊定寬、另一邊自適應的佈局?(例如,左側選單欄 float: left,右側主內容區自動填滿剩餘寬度)。左側元素 float: left;(定寬)。右側主內容區觸發 BFC(例如 overflow: hidden; 或 display: flow-root;)。

面試題的另一個問法可能是:「以下哪個屬性可以觸發 BFC?」

以下是幾種常見的觸發方式(做法):

  • overflow: hidden; / auto; / scroll; (最經典的 hack)
  • display: flow-root; (最現代、語義最正確的「BFC 觸發器」)
  • float: left; / right; (浮動元素自己會建立一個 BFC)
  • position: absolute; / fixed; (絕對定位元素會建立一個 BFC)
  • display: inline-block;
  • display: table-cell;
  • Flex/Grid 佈局的子項 (flex item / grid item)

下次在面試題中看到 overflow: hidden;、display: flow-root; 這些做法時,如果它們是為了解決「高度塌陷」、「外邊距摺疊」或「兩欄佈局」問題,那麼這就是一次BFC的應用。

js 中的requestAnimationFrame

看了一下js紅寶書沒有太看明白,這個回頭再說好了。

js中關於setTimeout,Promise.then()的輸出順序

js 在執行時會把任務分成三種:

  • 同步任務(Synchronous Code):在呼叫堆疊中立即執行的程式
  • 微任務:在當前同步任務執行完畢後,立即執行的任務。Promise.then() 和 .catch() 裡的回呼函式就是最常見的微任務。
  • 巨集任務:在同步任務和所有微任務都執行完畢後,才從佇列裡拿出一個來執行的任務。setTimeout() 和 setInterval() 裡的回呼函式就是巨集任務。
css
console.log('1. 同步代码:开始');

// 安排一个宏任务
setTimeout(() => {
  console.log('2. 宏任务:setTimeout 1');
}, 0);

// new Promise 的执行器是同步的
new Promise((resolve, reject) => {
  console.log('3. 同步代码:Promise Executor');
  
  // 在 Promise 内部安排一个宏任务
  setTimeout(() => {
    console.log('4. 宏任务:setTimeout 2 (在Promise内部)');
    resolve(); // 在这个宏任务中,Promise 状态变为 fulfilled
  }, 0);

}).then(() => {
  // 当 promise被 resolve() 时,这个 .then() 才会被放入微任务队列
  console.log('5. 微任务:Promise.then 1');
});

// 安排一个立即 resolve 的 Promise
Promise.resolve().then(() => {
  console.log('6. 微任务:Promise.then 2');
});

console.log('7. 同步代码:结束');
  1. 執行console.log('1. 同步代码:开始')
  2. 遇到setTimeout 1 ,將其回呼放入巨集任務佇列
  3. 遇到 new Promise,立即同步執行它的 executor 函式。執行 console.log('3. 同步代码:Promise Executor')。
  4. 遇到 setTimeout 2,將其回呼放入巨集任務佇列。
  5. 遇到 Promise.resolve().then(),這個Promise立即 resolved,將其 .then 回呼放入微任務佇列。
  6. 執行 console.log('7. 同步代码:结束')。
  7. 清空微任務佇列。
  8. 取出第一個巨集任務執行。
  9. 再檢查微任務佇列。
  10. 執行下一個巨集任務。在同一個任務中,resolve() 被呼叫。resolve() 觸發了它所關聯的 .then,將其回呼放入微任務佇列。
  11. 清空微任務佇列。

程式題

ACM 模式還是有點不太熟悉,回頭多刷一下牛客。

給定一組方程,給出A,B,C的值,求該方程組有多少實數解
方程組形式:
X² + A²Y² + C = 0
Y² + Z² + B = 0
Z² + A = 0

感覺是數學題…先把他們都算出來然後討論就行。

在位數為k的整數中,有多少個數,其每個位上之和為m。
如k=2,m=3,有12,21,30這三個數每個位上的整數之和為3
python
import functools

def solve_digit_sum(k:int,m:int)->int:
	@functools.lru_cache(None)
	def count_sequences(digits:int,target_sum:int)->int:
		if target_sum < 0:
			return 0
			
		if target_sum > 9*digits:
			return 0
			
		if digits == 0:
			return 1 if target_sum==0 else 0
			
		total_ways = 0
		for d in range(10):
			total_ways += count_sequences(digits - 1,target_sum - d)
		
		return total_ways
		
		
	if k<=0:
		return 0
		
	final_count = 0
	
	for d1 in range(1,10):
		final_count += count_sequences(k-1,m-d1)
		
	return final_count

還有一道題貌似是:

「花費」定義為該簡單路徑上所有邊權值的最大值。一個無向帶權簡單圖,圖連通,統計圖上有多少不同的節點(u,v),滿足他們之間的最小花費為k。

但是感覺太難了,我打算先放一放。