2020字节跳动我总结了以下扎心❤面试题

4,988 阅读9分钟

字节跳动的考查内容:

  • 通用型业务和过往项目经历
  • 价值观和软技能。

看到这里你千万可不要轻视,不然会死的很惨。

我的面试历程:

  • 面试是通过视频远程面试,不得不说疫情影响导致远程面试的确省了很多事,但是视频远远没有面对面更让面试者产生代入感。第一次用视频面试,不太会用导致很紧张,很大一部分原因是自己眼高手低,平时写代码的习惯使用编译器提示,但是没有提示的时候你会发现写不出来了,所以建议大家很如理解代码,手到心到。
  • 面试官首先会考察你对的简历的熟悉程度,其次主要考察的内容都是一些非常基础的底层原理。

今天悟到的一些:

  • CI/CD(持续继承和持续开发)概念应用到了工具和框架中
  • 程序员最常用的按键是control/command + C && control/command + V
  • 从研究语言书写到研究工具使用(例如Git=>sourcetree;语言=>框架等)
  • 高级语言之所以存在只是方便了开发者

1、display常用属性:

display 属性规定元素应该生成的框的类型。

  • none 此元素不会被显示。
  • block 此元素将显示为块级元素,此元素前后会带有换行符。
  • inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
  • inline-block 行内块元素。(CSS2.1 新增的值)

2、position常用属性:

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

  • absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • fixed 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

3、margin与padding的区别

margin:(外边距)是指从自身边框到另一个容器边框之间的距离,就是容器外距离。

margin 指的是box1 与box2之间的边距
<div class="box1"></div>
<div class="box2"></div>

padding:(内边距)是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

padding是指box1到box2的内边距,常用与父子DOM元素之间
<div class="box1">
    <div class="box2"></div>
</div>

  • margin值可以为负值/padding值不能为负值

4、用CSS实现三角形

①首先我们创建一个带边框的div:

具体代码实现如下:
width: 40px;
height: 40px;
border: 40px;
border-style: solid;
border-color: red green blue brown;

②然后我们将内部DIV的宽高设置为0:

width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;

③将其他的三个边框给取消

width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;

原理:主要使用了border这个属性,CSS写三角形就这样了,用JS打印三角形好几年没考了。

5、1rpx等于多少px?多少物理像素?

关于大小换算的问题,各有评说,我自己也不过多解释,推荐看一下别人总结的吧,我觉得比我总结的全面

www.cnblogs.com/leejersey/p…

6、上下左右垂直居中

方法千千万-我只推荐大家使用flex布局形式

直接上代码 我相信这应该是最简单的实现方式

index.html
<div id="app">
    <div class="center">hello world</div>
</div>
style.css
#app {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
#app .center {
            width: 300px;
            height: 300px;
        }

7、GET 与 POST 的区别

GET - 从指定的资源请求数据。

  • GET 请求可被缓存

  • GET 请求保留在浏览器历史记录中

  • GET 请求可被收藏为书签

  • GET 请求不应在处理敏感数据时使用

  • GET 请求有长度限制

  • GET 请求只应当用于取回数据

POST - 向指定的资源提交要被处理的数据

  • POST 请求不会被缓存
  • POST 请求不会保留在浏览器历史记录中
  • POST 不能被收藏为书签
  • POST 请求对数据长度没有要求

然而这只是表层的区别,当你自信满满回答,面试人徽徽一笑这傻蛋!

若要搞明白get与post区别还得从底层分析:

无论是GET || POST 从底层上我们都要遵守HTTP协议,HTTP协议是什么呢?类似于我们的交通法规,无论你是挂着GET牌照还是POST牌照都要遵从HTTP的要求。

真正要传输数据还是要看我们TCP传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的、可靠的、基于字节流的传输层通信协议。这是请求和服务端建立连接的暗语。

这就是TCP(C:天王盖地虎 S:宝塔镇河妖 C:来者都是客 S:吃饭)

GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。 重大差异

  • 对于GET方式的请求,浏览器会把http,header和data一并发送出去,服务器响应200(返回数据)

  • 而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

因此,理论上讲get的性能是不是更胜一筹,但是你要知道服务器的计算能力已经很🐂 了,已经不再是冯诺依曼时代的计算机了,1毫秒与3毫秒的差别在用户体验上是完全感知不到的。处于post对大小不限制,安全等众多优势于一身,因此我更推荐大家使用post。

8、跨域问题

开发时一个100%会遇到的问题就是跨域,解决跨域用无论是通过jsonp,还是后台给你放开请求限制原则上来讲都是很复杂的。

程序员很不喜欢麻烦自己,也不喜欢麻烦别人,别人也不喜欢你找麻烦。

所以跨域这种事情最好还是自己解决,我推荐的方式自己搭建一个本地NGINX服务器太好用了,任何人脸色都不用看,想请求啥就请求啥。 NGINX搭建方法和配置看我之前的总结:【如何Mac使用 Nginx】 https://juejin.cn/post/6844904131161784333 等你项目部署上线之后前后端肯定就在一个IP下了就不存在跨域了,如果是项目比较大前后端分离部署那就索性把NGINX玩的666起来吧。

9、闭包

本质上:闭包就是函数

  • 私有化变量
  • 避免内存泄漏

这篇文章我特意把闭包说道说道 https://juejin.cn/post/6844904199898005512

10、前端存储 cookie|| sessionStorage|| localStorage

cookie

严格来将,cookie是和后端有关系的.cookie 一般是由后端设置,并通过 response 流发送给前端.并设置过期时间.在过期时间结束之前,cookie一直会存储在浏览器当中.并且每次发送HTTP 请求时,都会携带在HTTP请求头中.

localStorage

localStorage 生命周期是永久的,这表示了,除非用户自己手动清除.否则就一直存储在用户的浏览器当中.(关机,重启没用.写入到硬盘了)

const db = window.localStorage
db.setItem('name','李四')
db.setItem('age',22)
console.log(db.getItem('name')) // '李四'
console.log(db.getItem('age')) // '22' 存进去的是数字,取出来是字符串了

db.removeItem('age')
console.log(db.getItem('age')) // 当取出一个不存在的数据是,返回 null

db.clear() // 删除所所有数据
console.log(db.getItem('name'))

如果存储的是对象,直接存储拿出来的是 [object object] 无法使用.

const obj = {xxxxx}
localStorage.setItem('key',JSON.stringify(obj))
const obj2 = JSON.parse(localStorage.getItem('key'))

sessionStorage

sessionStorage 用法和 localStorage 完全一致. 这里就不多做介绍了. 除了 seesionStorage 在当前域名下的所有选项卡都关闭之后,它就被清除.(仅仅被写入内存,存储在服务端,断开连接就失效)

sessionStorage.setItem(key,value)//存储
sessionStorage.getItem(key,value)//获取
sessionStorage.removeItem(key)//删除
sessionStorage.clear()//清空

11、普通函数function(){} 与 ()=>{}箭头函数的差异

  • 更简洁的语法
  • 没有this
  • 不能使用new 构造函数
  • 不绑定arguments,用rest参数...解决
  • 使用call()和apply()调用
  • 捕获其所在上下文的 this 值,作为自己的 this 值
  • 箭头函数没有原型属性
  • 不能简单返回对象字面量
  • 箭头函数不能当做Generator函数,不能使用yield关键字
  • 箭头函数不能换行

总结:

  • 箭头函数的 this 永远指向其上下文的 this ,任何方法都改变不了其指向,如 call() , bind() , apply()
  • 普通函数的this指向调用它的那个对象

12、var const let区别

一般问这个问题的人主要想考察一下你对ES6的熟悉程度;推荐看下我之前的文章讲ES6的新特性:【你不知道的ES6新特性】https://juejin.cn/post/6844904023783374862

13、call && apply && bind改变this指向

  • call :function.prototype.call()
      call 方法可以指定this 的指向(即函数执行时所在的的作用域),然后再指定的作用域中,执行函数

      call 方法的参数,应该是对象obj,如果参数为空或null,undefind,则默认传参全局对象 
  • apply:func.apply(thisValue, [arg1, arg2, ...])
      apply 和call 作用类似,也是改变this 指向,然后调用该函数,唯一区别是apply 接收数组作为函数执行时的参数
  • bind:Function.prototype.bind()
      bind 用于将函数体内的this绑定到某个对象,然后返回一个新函数

推荐一篇比较完成的文章https://www.cnblogs.com/nana-share/p/9469455.html

先写这么多主要是太困了,有空补充一下,建议大家如果有时间还是要多读书,搜索出来的只是别人的拥有到的知识,每个人只能解释自己的认知,所以还是直接看权威的解读更深刻更全面。