字节跳动｜前端｜提前批面经总结（二）｜2021｜
腐烂的橘子
6076
2020.11.27
2020.12.04
发布于 未知归属地
字节跳动JavaScript前端我要上推荐提前批腐烂的橘子求职面试

bytedance.jpg

CSS

  • 盒模型是什么
  • 聊一聊 box-sizing 属性
  • 行内元素，相对于它的父级水平垂直居中，css 怎么写
  • 对于一个行内元素，设置它的 margin 会有什么表现，为什么它是可行的
  • 行内元素设置 margin 会有位置的改变吗

答案：字节跳动前端面试题：行内元素设置 margin 有什么效果？

  • margin 给行内元素设置还是给父级元素设置
  • 块级元素 200px，行内元素 10px，左右设置多少
  • 块级元素，父级也是块级元素，水平垂直居中怎么写 css

JavaScript

  • JS 的基本数据类型
  • 手写一个闭包
  • 手写一个继承
  • 讲一讲变量提升
  • 事件循环是什么，微任务是什么，他们的执行顺序是什么样？你知道哪些微任务？

代码题

JavaScript
/**
 * --- 1. 实现对象merge ---
 */

const foo = (A,B) => {} 

foo({a:1},{b:2}) // {a:1,b:2}

foo({a:2},{c:2}) // {a:2,c:2}

/**
 * --- 2.1 怎么遍历这个对象 ---
 * --- 2.2 打印 c 中的所有键值
 */

let c = {a:1, b:2, c:3}

/**
 * --- 3.1 以下代码的运行结果是什么 ---
 */

console.log(y);

y = 1; 

/**
 * --- 3.2 以下代码的运行结果是什么 ---
 */

console.log(y);

var y = 2; 

/**
 * --- 3.3 以下代码的运行结果是什么 ---
 */

var z = 1;

let z;

console.log(z);

/**
 * --- 4. 计算 dom 树中有某标签有多少个 ---
 */

const foo = (root,tagName) => {

}

foo(document,'div') // 20

foo(document,'a') // 5

foo(document) // [tagName1,tagName2]

/**
 * --- 5. 用鼠标点击一下屏幕，输出结果是什么，为什么？ ---
 */

document.body.addEventListener('click', () => {
  Promise.resolve().then(()=>console.log(1));
  console.log(2)
});
document.body.addEventListener('click', () => {
  Promise.resolve().then(()=>console.log(3));
  console.log(4)
});

/**
 * --- 6. 以下代码的运行结果是什么 ---
 */

console.log('start');
let intervalId;
Promise.resolve()
  .then(() => {
  console.log('p1');
}).then(() => {
  console.log('p2');
});

setTimeout(() => {
  Promise.resolve()
    .then(() => {
    console.log('p3');
  }).then(() => {
    console.log('p4');
  });
  intervalId = setInterval(() => {
    console.log('interval');
  },3000);
  console.log('timeout1');
},0);

/**
 * --- 7. 以下代码的运行结果是什么 ---
 */

function Foo () {
  getName = function () {
    console.log(1)
  }
  console.log('this is' + this)
  return this
}

Foo.getName = function () {
  console.log(2)
}
Foo.prototype.getName = function () {
  console.log(3)
}
var getName = function () {
  console.log(4)
}
function getName () {
  console.log(5)
}
// 请写出一下的输出结果
Foo.getName()  //2
getName() // 4
Foo().getName() //this is window 1
getName()  // 1
new Foo.getName() //2
new Foo().getName() // this is window 1
new new Foo().getName()

/**
 * --- 8. 以下代码的运行结果是什么 ---
 */

window.name = 'ByteDance';
function A () {
  this.name = 123;
}
A.prototype.getA = function(){
  console.log(this);
  return this.name + 1;
}
let a = new A();
let funcA = a.getA;
funcA();

Vue

  • 如何理解 mvvm、Vue 组件通信、Vex、路由实现
  • 实现一个 user banner 组件，根据用户是否登陆、注册显示不同的信息：name, id, icon。
  • v-if 和 v-show 的区别

HTTP

  • http 报文的组成
  • E-tag 保存在哪里，怎么匹配，谁匹配
  • 具体的 session 和 cookie 在整个登陆流程中怎么保存的

算法题 & js 语法题

  • 实现每隔一秒输出数组中的一个数字
  • 141. 环形链表
  • 面试题 17.09. 第 k 个数
  • 写一个判断两个对象是否相等的函数
  • 一个轻量页面中存在一个用户生日输入框，用 input type=text 来实现, 实现对任意输入的字符串的 validate 和 parse，输出为 Date 对象。eg: yyyy-mm-dd
题目 1
题目 2
// 输入一个任意的四则运算字符串，给出计算结果

function exex(strInput: string): number{
  //TODO
}
// 补全代码，得到正确输出结果
评论 (1)