【前端面試】字節跳動2019校招面經 - 前端開發崗（一）

時間 2019-11-09

標籤前端面試字節跳動前端開發欄目快樂工作简体版

原文原文鏈接

這是一次失敗的面經……可是吃一塹才能長一智不是嗎？

字節跳動2019校招面經 - 前端開發崗（一）

1. 介紹以及項目經歷

吧啦吧啦……此處省略10000字

面試官會從項目經歷入手，考察項目中遇到的難題，以及解決方法，強調我的的努力以及在解決過程當中扮演的角色（是主導仍是參與）。
每一個人都有不同的精彩經歷，好好琢磨簡歷怎麼寫吧 Q-Qhtml

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'

Javascript中，this的指向是什麼？

> 定義：this的指向是包含它的函數做爲方法被調用時所屬的對象。
1. 包含它的函數
2. 做爲方法被調用時
3. 所屬的對象。

好比segmentfault

function hello(){
   console.log(this.name);
}
hello(); //undefined

this所在的方法是hello(), 而hello()的執行語境爲全局，也就是說其所屬的對象爲windows。
由於windows是沒有name整個屬性的，因此結果爲undefined。windows

再看下面的一段代碼：數組

function hello(){
   console.log('Hello ' + this.name);
}
var person = {
    name: 'Alice'
};
person.hello = hello;
person.hello(); //Hello Alice

在這段代碼中，能夠看到咱們實現了一個person的對象，而後將方法賦值爲person的一個函數屬性。
當person.hello()被調用時，this指針指向的對象爲person，因此結果爲Hello Alice瀏覽器

在實際應用場景中，經常分爲四種狀況進行討論：app

全局環境
全局環境下，this就表明Window對象。函數

var name = 'zhar';
function say(){
  console.log(this.name);//zhar
}
say();

對象環境
對象環境中的this指向對象自己。

var obj = {
  name : "zhar",
  say : function(){
    console.log(this.name);//zhar
  }
}
obj.say();

構造函數環境
構造函數中的this會指向建立出來的實例對象

function Person() {
    this.name = 'zhar';
}
var p = new Person();
console.log(p.name);

事件對象
在 DOM 事件中使用 this，this 指向了觸發事件的 DOM 元素自己
```
li.onclick = function(){
    console.log(this.innerHTML);
}
```

如何修改this的指向？

使用局部變量來代替this指針

var name = "zhar";
var obj = {
  name : "zhar",
  say : function(){
    var _this = this;    //使用一個變量指向 this
    setTimeout(function(){ //把執行語境變成了全局環境
      console.log(_this.name);
    },0);
  }
}
obj.say();

使用call 或 apply 方法

call 普通傳參

function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.call(obj,'one','two');//tom one two

apply 以數組的形式傳參

function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.apply(obj,['one','two']);//tom one two

4. 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%);
    }