位元組跳動前端開發工程師視訊面(2019)
面試開始,省去自我介紹,直接開問:
Part1:
- 瞭解TCP和UDP嗎
- 說三次握手
- 為什麼不是兩次握手
- 瞭解編碼嗎,哈夫曼編碼瞭解編碼嗎,哈夫曼編碼
- 說說程序和執行緒的區別
Part2:
開始做題
第一題:
始終需要滿足以下條件:
• A元素垂直居中於螢幕中央;
• A元素距離螢幕左右邊距各10px;
• A元素裡面的文字”A”的font-size:20px;水平垂直居中;
• A元素的高度始終是A元素寬度的50%; (如果搞不定可以實現為A元素的高度固定為200px;)
請用 html及css 實現
TODO
第二題:
請說出以下程式碼列印的結果
• if ([] == false) {console.log(1);};
• if ([]) {console.log(3);};
• if ({} == false ) {console.log(2);};
• if ({}) {console.log(2);};
• if ([1] == [1]) {console.log(4);};
控制檯輸出:
1 3 2
TODO
原理解釋:
- JavaScript裡面如果邏輯物件無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN,那麼物件的值為 false。
型別 | 0 | -0 | “” | null | NaN | undefined | 其他情況 |
---|---|---|---|---|---|---|---|
Boolean值 | false | false | false | false | false | false | false |
- 空陣列[]和空物件{}都是object型別:
console.log(typeof []); // 控制檯輸出:object console.log(typeof {}); // 控制檯輸出:object
- 空陣列[]轉化為Number,會得到0;空物件{}轉化為Number,會得到NaN:
console.log(Number([])); // 控制檯輸出0
console.log(Number({})); // 控制檯輸出NaN
- 關於[]和{}需要注意的點:
(1)空陣列[]和空物件{}都是object型別,因此直接用於if判斷條件時就會被轉化為 true。
(2)任意值與布林值比較,都會將兩邊的值轉化為Number。
(3) 如果將空陣列[]與布林值false比較,false轉化為0,而空陣列[]也轉化為0,因此[] == false的判斷得到true。
(4) 如果將空物件{}與布林值false比較,false轉化為0,而空物件{}轉化為NaN,由於NaN與任何數都不相等,因此{} == false的判斷得到false
(5) 引用型別之間的比較是記憶體地址的比較,不需要進行隱式轉換,所以[] == [] //false 地址不一樣
[] == [] //false 地址不一樣
var a = [];
b = a;
b == a //true
JavaScript的隱式型別轉換淺析
if ([])
console.log(1);
if ({})
console.log(2);
if ([] == false)
console.log(3);
if ({} == false)
控制檯輸出:1 2 3
--------------------------------------------------------
console.log(([0]) ? true : false); // true
console.log(([0] == false) ? true : false); // true
console.log(({x:0} == false) ? true : false); // false
分析:
[0]直接用於if判斷條件時會被轉化為true。
與布林值比較,都會將兩邊的值轉化為Number,[0]轉換為0,{x:0}轉換為NaN。
第三題:
以最小的改動解決以下程式碼的錯誤(可以使用es6)
const obj = {
name: " jsCoder",
skill: [“es6”, “react”, “angular”],
say: function () {
for(var i = 0, len = this.skill.length; i< len; i++){
setTimeout(function(){
console.log(‘No.’ + i + this.name);
console.log(this.skill[i]);
console.log(’--------------------------’);
}, 0);
console.log(i);
}
}
};
obj.say();
/*
期望得到下面的結果:
1
2
3
No.1 jsCoder
es6
/------------------------
No.2 jsCoder
react
/---------------------------
No. 3 jsCoder
angular
/--------------------------
*/
TODO
- 瞭解跨域嗎?
- 說說專案