我是怎么失去成为东哥兄弟的机会的(京东前端面经)

不知道这算不算提前批,听说东哥今年给的高想和他做兄弟,结果没有好好珍惜,直到失去才追悔莫及
本该40分钟视频,结果连不上,变成20分钟电话,几个问题也没答好

一面

Vue

Vue组件生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是Vue的生命周期

各个生命周期的作用

生命周期 描述
beforeCreate 组件实例被创建之初,组件的属性生效之前
created 组件实例已经完全创建,属性也绑定,但真实dom还没有生成,$el还不可用
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
activited keep-alive专属,组件被激活时调用
deadctivated keep-alive专属,组件被销毁时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

img

父子组件生命周期

菜鸡答错了

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常用钩子简易版

父create->子created->子mounted->父mounted

v-if原理

答成了v-if和v-show区别,介绍了v-if做了什么事,原理真不会

参考Vue 3 中 v-if 和 v-show 指令实现的原理(源码分析)

基于数据驱动的理念,当 v-if 指令对应的 valuefalse 的时候会预先创建一个注释节value 发生变化时,命中派发更新的逻辑,对新旧组件树进行 patch,从而完成使用 v-if 指令元素的动态显示隐藏。

img

JS

JS有哪些数据类型

基本类型:String、Number、Boolean、Null、Undefined、Symbol、BigInt

引用数据类型:Object、Array、Function。

object有哪些具体类型

只说了几个,找全一点

object Map、object Set、object Array、object Object、object Arguments、object Boolean、object Date、object Error、object Number、object RegExp、object String、object Symbol、object Function

怎么判断数据类型

typeof instanceof

之前写过一个函数,特别注意以下null即可

实现一个函数判断数据类型

function getType(obj) {
    if (obj === null) return String(obj);
    // 对象类型 "[object XXX]"->XXX的小写 简单类型typeof obj
    return typeof obj === 'object' ? Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase() : typeof obj;
}

// 调用
console.log(getType(null)); // null
console.log(getType(undefined)); // undefined
console.log(getType({})); // object
console.log(getType([])); // array
console.log(getType(123)); // number
console.log(getType(true)); // boolean
console.log(getType('123')); // string
console.log(getType(/123/)); // regexp
console.log(getType(new Date())); // date

typeof可以判断函数吗

答错了,可以,我说只记得Array和Function之间一个可以一个不可以

有哪些js数组方法可以改变原数组

一时只想起来这几个

  • pop():删除数组最后一个元素,并返回该元素
  • push():在数组尾部添加元素,并返回更新后的数组长度
  • shift():删除数组的第一个元素,并返回该元素
  • unshift():在数组第一位添加元素,并返回更新后的数组长度
  • splice(index, howmany, 新数据):返回被删除元素所组成的数组。

其实还有

  • sort():对数组排序(按字符ASCII进行排序),也可添加回调函数按照想要的规则排序
  • reverse():数组反转

js数组有哪些遍历方式

已回答

for循环

使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。

foreach循环

for in/of遍历

原生方法:map、filter、reduce

可以回答,但当时没想到

keys,values,entries

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

reduce的应用

求和,compose函数,其实有4个参数,累计值,当前值,当前索引,数组自身,只说了前2个参数,我又错了

CSS

怎么实现两列布局1列固定宽度

只答了flex和float,不知道table怎么用

html代码:

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

float

#sidebar {
  float: right; width: 300px;
}
#content {
  margin-right: 300px;
}

绝对定位

#wrap{
  position:relative;
}
#content {
  margin-right:300px;
}
#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

display:table

#wrap{
  display:table;
}
#content {
  display:table-cell;
}
#sidebar {
  width:300px;
  display:table-cell;
}

display:flex

#wrap{
  display:flex;
}
#content {
  flex:1;
}
#sidebar {
  width:300px;
}

计算机网络

TCP 3次握手 4次挥手

假如一根网线断了,TCP连接怎么断开

有点懵逼,想了一下,TCP有个超时,超时之后断开连接

看一看一下大神的文章

很多人都知道TCP并不会去主动检测连接的丢失,这意味着,如果双方不产生交互,那么如果网络断了或者有一方机器崩溃,另外一方将永远不知道连接已经不可用了。检测连接是否丢失的方法大致有两种:keepaliveheart-beat

Keepalive是很多的TCP实现提供的一种机制,它允许连接在空闲的时候双方会发送一些特殊的数据段,并通过响应与否来判断连接是否还存活着(所谓keep~~alive)。我曾经写过一篇关于keepalive的blog ,但后来我也发现,其实keepalive在实际的应用中并不常见。为何如此?这得归结于keepalive设计的初衷。Keepalive适用于清除死亡时间比较长的连接。
比如这样的场景:一个用户创建tcp连接访问了一个web服务器,当用户完成他执行的操作后,很粗暴的直接拨了网线。这种情况下,这个tcp连接已经断开了,但是web服务器并不知道,它会依然守护着这个连接。如果web server设置了keepalive,那么它就能够在用户断开网线的大概几个小时以后,确认这个连接已经中断,然后丢弃此连接,回收资源。
采用keepalive,它会先要求此连接一定时间没有活动(一般是几个小时),然后发出数据段,经过多次尝试后(每次尝试之间也有时间间隔),如果仍没有响应,则判断连接中断。可想而知,整个周期需要很长的时间。
所以,如前面的场景那样,需要一种方法能够清除和回收那些在系统不知情的情况下死去了很久的连接,keepalive是非常好的选择。
但是,在大部分情况下,特别是分布式环境中,我们需要的是一个能够快速或者实时监控连接状态的机制,这里,heart-beat才是更加合适的方案。
Heart-beat(心跳),按我的理解,它的原理和keepalive非常类似,都是发送一个信号给对方,如果多次发送都没有响应的话,则判断连接中断。它们的不同点在于,keepalivetcp实现中内建的机制,是在创建tcp连接时通过设置参数启动keepalive机制;而heart-beat则需要在tcp之上的应用层实现。一个简单的heart-beat实现一般测试连接是否中断采用的时间间隔都比较短,可以很快的决定连接是否中断。并且,由于是在应用层实现,因为可以自行决定当判断连接中断后应该采取的行为,而keepalive在判断连接失败后只会将连接丢弃。
关于heart-beat,一个非常有趣的问题是,应该在传输真正数据的连接中发送心跳信号,还是可以专门创建一个发送“心跳”信号的连接。比如说,AB两台机器之间通过连接m来传输数据,现在为了能够检测AB之间的连接状态,我们是应该在连接m中传输心跳信号,还是创建新的连接n来专门传输心跳呢?我个人认为两者皆可。如果担心的是端到端的连接状态,那么就直接在该条连接中实现心跳。但很多时候,关注的是网络状况和两台主机间的连接状态,这种情况下, 创建专门的心跳连接也未尝不可。

#京东##前端工程师##面经##校招#
全部评论
这也太优秀了吧,快来我们小程序部门吧,我的内推码 9G5WQRP
1 回复
分享
发布于 2021-07-30 10:04
好详细啊,祝楼主能够拿到心仪Offer
点赞 回复
分享
发布于 2021-07-30 11:18
阿里巴巴
校招火热招聘中
官网直投
京东了面试题一般很着重考察项目经验和框架使用及其原理,比较实际😀
点赞 回复
分享
发布于 2021-07-30 00:17
怎么你的一面比我的难多了…
点赞 回复
分享
发布于 2021-07-30 01:52
楼主蚂蚁不香吗,为何还要去找东哥😶
点赞 回复
分享
发布于 2021-07-30 10:18
2年后升到16薪,你可以等一两年再跟东哥做兄弟
点赞 回复
分享
发布于 2021-07-30 10:21
码,感谢楼主的分享
点赞 回复
分享
发布于 2021-07-30 11:23
XXLZ
点赞 回复
分享
发布于 2021-07-30 11:23
#华为22届秋招启动#  软件开发/测试/算法/等多个岗位,欢迎联系我内推,HR全程解答疑惑,微信Vicky_WY_Joy https://mp.weixin.qq.com/s/3F3L9zIrAVmRVb4c7W3N_A
点赞 回复
分享
发布于 2021-07-30 19:23
抄袭我的帖子?
点赞 回复
分享
发布于 2021-07-30 22:17
Shopee2022提前批开启了 薪资比肩顶级大厂, 来自腾讯、字节、阿里大厂同事高达65%. 岗位超多多 总有一款属于你 1、微信搜索”Shopee虾皮招聘“即可投递: 内推码:ADVpY 2、或者官网投递https://app.mokahr.com/campus_apply/shopee/2962#/jobs?zhineng=&page=1&_k=abhqth
点赞 回复
分享
发布于 2021-07-31 10:09
前端这么卷了吗,浙大也来前端卷?
点赞 回复
分享
发布于 2021-07-31 11:05
v-if原理有点冷门了,挺难的,还好俺jd已经到hr了....
点赞 回复
分享
发布于 2021-08-01 00:45

相关推荐

20 97 评论
分享
牛客网
牛客企业服务