字节跳动前端一面+二面+三面面经(无)

字节跳动前端一面 1h

• 自我介绍

• Flex布局，实现两个子元素垂直，并且一个靠右一个靠左

 <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
 </div>

• css代码

.parent {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 400px;
   border: 1px black solid;
}
.left {
   width: 100px;
   height: 150px;
   border: 1px red solid;
}
.right {
   width: 100px;
   height: 150px;
   border: 1px green solid;
}

• JS基本数据类型
• 闭包
• 你说到了作用域链，那么你来谈一下作用域？
• 说到了执行上下文，所以又问了执行上下文
• 继续深入问到变量提升、词法作用域、动态作用域
• 看一点相关的题目吧

console.log(foo);
function foo(){
    console.log("foo");
}
var foo = 1;

输出
//ƒ foo(){
//    console.log("foo");
//}

var value = 'tom';
function foo() {
    console.log(value)
}
function bar() {
    var value = 'bob';
    foo();
}
bar();

输出
//tom

function foo() {
    return function() {
        console.log(this)
    }
}
foo()(); 

输出
//window

var foo = {
    bar: function () {
        return this;
    }
}
foo.bar(); 

输出
//{bar: f}

• http的请求方法
• http常见状态码
• TCP 和 UDP区别
• 为什么浏览器的请求有两次，一次options，第二次才是真正请求？哪些场景用到
• 模拟一个队列
• 数组扁平化？至少两种方法实现
• 反问

字节跳动前端二面 1h

• 问了项目中的D3.js
• 前端展示统计图或者一些复杂的图片是用图片好还是svg生成，这两种方式的优缺点，以及如何做取舍
• 最近出了 Vue 3.0,有了解过它与 Vue 2.0 的区别吗？
• Vue 3.0 的 Composition API 有了解吗？
• Css画圆有哪些方式？
• 如何知道某个dom元素是否在当前可视窗口呢？
• scrollTop如何获取？
• Css的position的常见属性，sticky用过吗？
• Promise说一下
• Promise.all用过吗，自己用promise封装一个Promise.all？要求每一个promise能并行执行，并且要保证最后的回调参数顺序与执行顺序一致（解释：每个 promise 封装的请求不一定会按照调用顺序得到响应，可能后面调用的比前面的要快，但一样要保证最后的顺序是按照调用顺序的）
• 写一个题吧

const obj = {a: {b : {c : {d: 3}}}}

function getValue(obj, str, defaultValue) {}

getValue(obj, 'a.b.c.d', 1) => 3 (存在该属性返回该属性对应的值)

getValue(obj, 'a.b.c.d.e', 1) => 1 (出现错误返回传入的默认值)

改动，能处理数组

const obj_1 = {a: {b : {c : {d: [{e : 4}]}}}}

getValue(obj_1, 'a.b.c.d[0].e', 1) => 4

• 改动前的代码实现（不一定对，望大家给个建议）

function getRightValue(obj, propertyString, defaultValue) {
  let str = propertyString.split('.');
  for(let i = 0; i < str.length; i++) {
      if(obj.hasOwnProperty(str[i])) {
          obj = obj[str[i]];
      } else {
          return defaultValue;
      }
  }
  return obj;
}

const obj = { a: {b: {c: { d: 3 }}}}

console.log(getRightValue(obj, 'a.b.c.d', 1))

• 改动后加上了数组，所以细节要处理好，我当时卡壳了没弄出来

• 反问

• 别的暂时想不起来了，等想起来在补充

• 面试官很 nice，有耐心，会给你仔细讲解出现的问题

• 发面经回馈牛客，希望能有一个三面，小伙伴们也加油!

2020-10-15 更新

• 果然写面经回馈牛客是对的

• 今天下午打电话约三面了，呜呜，第一次进到三面，愿顺利！

• 小伙伴们也加油！

2020-10-21 更新

字节跳动前端三面 35min

• 前两次的面试感觉怎么样？
• 通过之前的面试觉得自己还有哪些问题？
• 说一下你认为做得好的一个项目，遇到了些什么问题？
• 说了一个项目，然后接下来大部分时间都是围绕这个项目交流
• 问了自己更偏向于实习还是正式，然后自己回答：优先考虑正式 offer，如果达不到正式批要求，给一个实习 offer 也可以？？哈哈哈我太天真了，，，
• 反问了具体的业务，还有自己有待提高的地方

因为自己没有实习经历，项目都是自己写的，一下子想不出什么难点，只是简单聊了一些功能实现。所以建议大家以后聊项目时，有好的实习经历，就说一下实习的项目，没有实习只有自己项目的，也要往自己项目里面添加一些亮点（难点）。面试之前也要梳理好自己的项目，不然面试一下想不起来细节就尴尬了，别像我一样，，，呜，，，

楼主今年3月份了才开始正式学习的前端（之前只知道html、css这些），所以春招也没找实习，秋招就很艰难，自己的同学中都有拿了 sp 的。之前我都不敢投字节的，因为太菜，后来颤颤巍巍投了一下，但是居然撑到三面，这就很出乎我的意料了。

• 发面经回馈牛客，许愿自己能有 offer。也希望跟我一样还在努力的小伙伴们早日上岸！

2020/10/28 更新。已卒。。

• HR那边很负责，已经尽力帮我争取了，但是奈何本人技术太菜，先是从正式变成实习，然后那边的面试官讨论之后觉得还是差一点，所以实习的机会也没了，另外的一个offer也不满意。就此秋招也算是画上句号了，一个失望与遗憾并存的句号。可是你说我会放弃？no，我真的喜欢前端，即使找不到工作我依然会学习它。等春招，我或许还会回来的。