這是一次失敗的面經……但是吃一塹才能長一智不是嗎？
字節跳動2019校招面經 - 前端開發崗
1. 介紹以及項目經歷
吧啦吧啦……此處省略10000字
面試官會從項目經歷入手，考察項目中遇到的難題，以及解決方法，強調個人的努力以及在解決過程中扮演的角色（是主導還是參與）。
每個人都有不一樣的精彩經歷，好好琢磨簡歷怎麼寫吧 Q-Q
2. 瀏覽器基礎
從瀏覽器輸入網址到網頁呈現，中間發生了什麼？
具體可以參照我的另外一篇文章《【前端芝士樹】從瀏覽器搜索框輸入網址到網頁呈現發生了什麼？》
3. Javascript相關
字符串數組的倒序
題目如下
var input = 'Hello my best friend';
function reverse(){
//todo Please code here.
};
console.log(reverse(input));//'friend best my Hello'我的解法
先把字符串切分成數組，然後進行倒序插入
let input = 'Hello my best friend';
/**
* reverse
* @param str
* */
function reverse(str) {
let arr = str.split(' ');
let result = [];
let length = arr.length;
for (let i = length - 1; i > -1; i--) {
result.push(arr[i]);
}
return result.join(' ');
}
function reverse_2(str){
return str.split(' ').reverse().join(' ');
}
console.log(reverse(input));//'friend best my Hello'
console.log(reverse_2(input));//'friend best my Hello'CSS相關
實現一個寬度爲父容器一半的位置居中的正方形
HTML代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="father">
<div class="item"></div>
</div>
</body>
</html>首先分解題目的幾個關鍵點
- 寬度爲父容器一半的正方形
- 位置居中
一些邊寫邊問的過程中涉及的知識點
-
div的默認display是block（塊級元素） -
塊級元素 和 行內元素 的區別
-
塊級元素 獨佔一行， 其寬度自動填滿父元素寬度，可以設置高度
[div/h1~h6-p/ol-ul-li/form-button-textarea-select/table] -
行內元素 可以與其他行內元素排列在同一行中，寬高無效
[a/img/span-strong-b-i-em/label]
-
塊級元素 獨佔一行， 其寬度自動填滿父元素寬度，可以設置高度
-
父元素的display設置爲flex後，子元素的display是？
- emmm，難道不是默認值static？
幾種解題的方法
我按各個點，在代碼中列舉了幾種方法，歡迎提供其他的思路
HTML
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="father center_1">
<div class="item square_1"></div>
</div>
<div class="father center_2">
<div class="item square_2"></div>
</div>
<div class="father center_3">
<div class="item square_2"></div>
</div>
</div>
</body>
</html>CSS
.father {
position: relative;
width: 500px;
height: 300px;
margin: auto auto 2rem;
background: lightskyblue;
}
.item {
background: indianred;
}
/* 實現寬度爲父元素一半的正方形 */
.square_1 {
width: 250px;
height: 250px;
}
.square_2 {
width: 50%;
padding-top: 50%;
height: 0;
}
/* 實現位置居中 */
.center_1 {
display: flex;
align-items: center; /* 決定交叉軸上的對齊方式（垂直方向）*/
justify-content: center; /* 決定主軸上的對齊方式（水平方向）*/
}
.center_2 .item {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.center_3 .item{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}算法相關
拋硬幣問題
假設你是小A，和小B玩一個拋硬幣的遊戲，硬幣爲正面時獲勝，如果一方失敗了則交由另一方，現在由你先開始，求獲勝的概率？
經典概率問題
- 假設小A第一次就拋到了正面，那小A獲勝而遊戲結束，概率爲二分之一
- 假設小A第一次拋到的是反面，想要小A獲勝只能小B拋反面，小A再拋回正面，至此概率爲八分之一
- 後續同理，依次乘以四分之一，所有的概率進行相加，求極限可得結果爲三分之二