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

BigTomato 發布于2019-08-23 13:02 / 3446人閱讀

摘要：這是一次失敗的面經但是吃一塹才能長一智不是嗎字節跳動校招面經前端開發崗一介紹以及項目經歷吧啦吧啦此處省略字面試官會從項目經歷入手，考察項目中遇到的難題，以及解決方法，強調個人的努力以及在解決過程中扮演的角色是主導還是參與。

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

字節跳動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"

Javascript中，this的指向是什么？

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

比如

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

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

再看下面的一段代碼：

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

在實際應用場景中，常常分為四種情況進行討論：

全局環境
全局環境下，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代碼如下




    
    Title

首先分解題目的幾個關鍵點

寬度為父容器一半的正方形

位置居中

一些邊寫邊問的過程中涉及的知識點

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




    
    Title

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

5. 算法相關 拋硬幣問題

假設你是小A，和小B玩一個拋硬幣的游戲，硬幣為正面時獲勝，如果一方失敗了則交由另一方，現在由你先開始，求獲勝的概率？

經典概率問題

假設小A第一次就拋到了正面，那小A獲勝而游戲結束，概率為二分之一

假設小A第一次拋到的是反面，想要小A獲勝只能小B拋反面，小A再拋回正面，至此概率為八分之一

后續同理，依次乘以四分之一，所有的概率進行相加，求極限可得結果為三分之二

GPU云服務器云服務器校招面經前端開發工程師面試 web前端開發工程師面試 web前端工程師校招

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99172.html

"雙非"應屆生校招如何獲得大廠青睞?（內附前端大廠面經+技術崗超全求職攻略）

摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。寫在前面的話筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...

jeffrey_up 2019-08-30 14:23 評論0 收藏0
"雙非"應屆生校招如何獲得大廠青睞?（內附前端大廠面經+技術崗超全求職攻略）

摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。寫在前面的話筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...

lindroid 2019-08-26 17:25 評論0 收藏0
2019春招前端實習面經總結

摘要：春招前端實習面試記錄從就開始漸漸的進行復習，月末開始面試，到現在四月中旬基本宣告結束。上海愛樂奇一面盒模型除之外的面向對象語言繼承因為是視頻面試，只記得這么多，只感覺考察的面很廣，前端后端移動端都問了，某方面也有深度。春招前端實習面試記錄(2019.3 ~ 2019.5) 從2019.1就開始漸漸的進行復習，2月末開始面試，到現在四月中旬基本宣告結束。在3月和4月經歷了無數次失敗，沮...

atinosun 2019-08-23 16:58 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

suxier 2019-08-29 17:21 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

canger 2019-08-26 13:25 評論0 收藏0