资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【前端面试】字节跳动2019校招面经 - 前端开发岗（一）

【前端面试】字节跳动2019校招面经 - 前端开发岗（一）

BigTomato / 3447人阅读

摘要：这是一次失败的面经但是吃一堑才能长一智不是吗字节跳动校招面经前端开发岗一介绍以及项目经历吧啦吧啦此处省略字面试官会从项目经历入手，考察项目中遇到的难题，以及解决方法，强调个人的努力以及在解决过程中扮演的角色是主导还是参与。

这是一次失败的面经……但是吃一堑才能长一智不是吗？
字节跳动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前端工程师校招

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99172.html

相关文章

  • "双非"应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

    摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

    jeffrey_up 评论0 收藏0

  • "双非"应届生校招如何获得大厂青睐?（内附前端大厂面经+技术岗超全求职攻略）

    摘要：拿到秋招的同学，如确定入职需与用人单位签署三方协议，以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同，但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论，学习技术也不例外，掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有...

    lindroid 评论0 收藏0

  • 2019春招前端实习面经总结

    摘要：春招前端实习面试记录从就开始渐渐的进行复习，月末开始面试，到现在四月中旬基本宣告结束。上海爱乐奇一面盒模型除之外的面向对象语言继承因为是视频面试，只记得这么多，只感觉考察的面很广，前端后端移动端都问了，某方面也有深度。 春招前端实习面试记录(2019.3 ~ 2019.5) 从2019.1就开始渐渐的进行复习，2月末开始面试，到现在四月中旬基本宣告结束。在3月和4月经历了无数次失败，沮...

    atinosun 评论0 收藏0

  • 2018.11.19秋招末第二波前端实习/校招小结

    摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...

    suxier 评论0 收藏0

  • 2018.11.19秋招末第二波前端实习/校招小结

    摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...

    canger 评论0 收藏0

发表评论

登陆后可评论

0条评论

BigTomato

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<