文章へ移動
Shemolバイトダンス前端工程訓練キャンプの機試
笔试 / 实习找工 / 字节

バイトダンス前端工程訓練キャンプの機試

単選択とプログラミング問題に分かれる。だいたいの知識点を記録しておく。

単選択

主にデータ構造とアルゴリズム、コンピュータネットワーク、html,css,jsの基礎。

データ構造とアルゴリズム

大学1年か2年のデータ構造とアルゴリズムの試験に戻った気分…

ソート問題、バブルソート、クイックソートなど。2、3問出たと思う。

アルゴリズム計算量はとても簡単な問題が1問。

二分木の走査も2、3問出た感じ。

スタックに関する問題も1問。

コンピュータネットワーク

トランスポート層の信頼できない伝送プロトコルは何か

UDPプロトコル。

DNSパケットの問題も1問

覚えているのは、選択肢AがQRが0ならクエリ、QRが1ならレスポンス、ということだけ。

html,css,js

異なるブラウザのmargin paddingをどう揃えるか?

CSS Reset

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

Normalize.cssもあるらしい。これもあとで学び直す。

CSS floatの問題も1問、どれが誤った使い方か

選択肢には

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)を防ぐ:通常の文書流では、隣接する2つの兄弟ブロック要素の垂直マージン(margin-top と margin-bottom)が「折りたたまれ」、大きい方の値に合流する。片方(または両方それぞれ)を新しい親で包み、その親でBFCを起こす(例えば overflow: hidden;)。
  3. 適応的な2カラム/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; を見たら、それが「高さ崩壊」「マージン折りたたみ」「2カラムレイアウト」の解決なら、それがBFCの応用だ。

js のrequestAnimationFrame

JSの赤い本を少し見たが、あまり分からなかった。あとで。

jsにおけるsetTimeout、Promise.then()の出力順

js は実行時、タスクを3種類に分ける:

  • 同期タスク(Synchronous Code):コールスタックで直ちに実行されるコード
  • マイクロタスク:今の同期タスクが終わった直後に実行されるタスク。Promise.then() と .catch() のコールバックが最もよくあるマイクロタスク。
  • マクロタスク:同期タスクとすべてのマイクロタスクが終わってから、キューから1つ取り出して実行するタスク。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つが各位の整数の和が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

もう1問はどうも:

「コスト」はその単純パス上のすべての辺重みの最大値。無向・重み付きの単純グラフ、連結。グラフ上で異なるノード対(u,v)のうち、間の最小コストがkであるものはいくつあるか、を数える。

でも難しすぎる気がする。いったん置いておく。