字节跳动春招面经
刚刚HR面完，来回馈一下牛客盆友们。
春招的时候面了两个部门，第一个部门因为准备的不太好，就挂掉了，但是面经也给大家写一下，希望对大家有帮助
一面（企业应用）：
1. CSS实现一个秒针效果（一分钟转一圈，匀速和一秒一走），不知道怎么做的朋友可以看一下我github上的demo(https://github.com/onechunlin/JS_Demo/tree/master/CSS%E5%AE%9E%E7%8E%B0%E7%A7%92%E9%92%88)
2. 实现Promise.limit()，实现对promise数组的限制运行。讲了一下思路，然后手写不出来
，后面整理了一下，答案在这（https://github.com/onechunlin/JS_Demo/tree/master/Promise.limit%E7%9A%84%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0）
，后面整理了一下，答案在这（https://github.com/onechunlin/JS_Demo/tree/master/Promise.limit%E7%9A%84%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0） 欢迎大家点个小星星哦
3. Vue 2.x和Vue 3.x的区别（数据劫持方式、脚手架命令、UI界面等等）
4. CSS实现类似微信朋友圈的效果，要求根据图片数量显示不同的布局。（一张时占比50%，四张是田字布局，九张时九宫格布局）。
这个题其实挺偏的，我说了JS判断元素数量的方法，但是面试官还是不是很满意，核心思想就是利用伪类nth-last-child(1):first-child找到元素的子元素个数，
例如倒数第一个也是第一个元素时，说明只有一个元素。整理了答案在这咯
5. 如何获取一个元素相对于浏览器窗口左上角的位置（我说的是利用offsetParent循环直到找到body节点，进行一个数值的累加，
但是面试官说这种方法不好。后面找了好久终于找到了，可以利用Dom元素上的getBoundingClientRect()方法，该方法直接返回一个对象，可以拿到距离浏览器的距离）
6. 一次http请求的过程
还有其他一些小的知识点不太记得了，面完以后一个星期都没消息，然后我发邮件问了一下，挂啦。其实我觉得这一轮面试体验有点不太好（但是后面面其他部门的体验又很棒！），
面试官会在我说比较擅长点的时候打断我，然后继续下一个问题，所以后面搞得我都有点不太敢答了，你以为就这样结束了吗？
没有！我知道这个部门挂了，我又另外在牛客找了一个内推，投了抖音，但是抖音满了，最后好像没处理，但是HR给我打电话说我被捞出来了，
因为一面面试官对我评价还不错！（那为啥挂了
），所以我又开始了另一个部门的面试。。。
），所以我又开始了另一个部门的面试。。。 一面：
看到面试官是个小姐姐，哈哈，心情都好了，然后就闲聊了一会儿（为了缓解我的紧张），开始自我介绍
1. 客户端和服务器怎么维持登录态（cookie和session的配合，还有token也可以）
2. cookie是每次请求都会发送给服务器吗（不会，因为服务器设置cookie时会指定其domain和path，只有请求相应的域时才会带上cookie）
3.跨域的方法（jsonp，跨域资源共享(CROS)， 代理， 中间件等）
4. 你说的跨域资源共享是怎么用的呢（通过在后端设置响应头“Access-Control-Allow-Origin：*”来启用跨域）
5. for(var i = 0; i<5; i++){
setTimeout(() => {
console.log(i)
})
}输出什么(5,5,5,5,5)，应该怎么改？（1. var改为let，这里扯一扯let的块级作用域，2. 使用立即执行函数将i传入函数里，这里扯扯JS的事件循环，宏队列微队列等）
6. [-4,-3,0,0,0,6,2,3]这样一个有规律的数列，0的左边都是负数，0的右边都是整数，要求找到与0相邻的正数和负数（-3,6），要求复杂度为log n（采用两次二分查找找出整数和负数）
7. position的取值（absolute， relative， sticky， static，然后这里小姐姐说你是不是还忘了一个，然后我连inherit都说出来了。。。
但是忘了fixed，但是小姐姐真的很nice,提醒了我，然后问了一下它的作用，因为前面说sticky的时候其实也提到了相对于浏览器定位，但是一时脑抽忘记了）
8. 怎么判断一个数组（Array.isArray，instance of，Object.prototype.toString.call(arr)）
9. [] instance of Object的结果（true）， typeof []的结果（Object），Object.prototype.toString.call([])的结果("[object Array]")
10.
<html>
<head>
<script type="text/javascript" src=‘./1.js' />
<script type="text/javascript">
console.log('2');
</script>
</head>
</html>
1.js内容：console.log('1')
上述代码输出结果，（1,2），因为js是阻塞式加载的，而且是同步代码，所以会依次执行，但是一般会吧script标签放在body尾标签前，防止阻塞页面加载
<head>
<script type="text/javascript" src=‘./1.js' />
<script type="text/javascript">
console.log('2');
</script>
</head>
</html>
1.js内容：console.log('1')
上述代码输出结果，（1,2），因为js是阻塞式加载的，而且是同步代码，所以会依次执行，但是一般会吧script标签放在body尾标签前，防止阻塞页面加载
11. 面试官说其实放在尾部js的加载也是阻塞式的，有什么办法解决吗（async defer，此处介绍了一下浏览器的线程等，说明一下两个的不同，好像defer是ie里的，不太确定！）
12. 实现一个合并数组的方法，使其合并后的数组仍是有序的，
mergeArray(arr1, arr2)
[-10,-2, 12,15]
[-4,4]
[-10,-4,-2,4,12,15]
[-4,4]
[-10,-4,-2,4,12,15]
利用双指针，每次比较指针的位置，当一个指针完时，将另一个数组直接添加到结果数组之后即可（此处拓展了一下数组的concat和slice方法）
一面就记得这么多，其实每个问题我都有拓展一点，所以面试过程感觉小姐姐挺满意的，让我在那个房间等一会儿，二面马上上线！
一面就记得这么多，其实每个问题我都有拓展一点，所以面试过程感觉小姐姐挺满意的，让我在那个房间等一会儿，二面马上上线！
二面：
二面是个面相很友善的大哥，顿时就放松了很多
1. 在Date上添加一个方法，使得能够格式化的输出日期（
如用户输入：
(new Date()).format("YYYY-MM-DD HH:mm:ss");
(new Date()).format("YYYY/MM/DD HH:mm:ss");
(new Date()).format("YYYY/MM/DD HH:mm:ss");
都能得到同意的效果，这个题应该是考察原型链以及正则，我简单写了一下代码，然后说了一下思路就过了
）
）
2. 实现正则检查：email，ip 地址。你看，正则来啦，现场写了两个正则，应该存在一些问题，因为不知道邮箱具体标准，但是面试官应该能看出我会写一般的正则。
所以也没太为难我，追问了一下^和$)
3. 两数之和的算法（我说了两种，一种是排序之后使用头尾双指针，一种是利用数组的indexOf方法，在一个for循环中每次查找target-arr[i]的数是否存在，存在则加入结果数组）
这里还问了一下数组的indexOf和lastIndexOf的时间复杂度，因为数组本质其实是hash表，所以是常数项的复杂度
4. [1,2,3].map(parseInt)的结果（1，NaN，NaN），为什么？（因为map接收两个参数时值分别为value和index，而parseInt接收两个参数时值为value和radix馈一下牛客盆友们。
春招的时候面了两个部门，第一个部门因为准备的不太好，就挂掉了，但是面经也给大家写一下，希望对大家有帮助
一面（企业应用）：
1. CSS实现一个秒针效果（一分钟转一圈，匀速和一秒一走），不知道怎么做的朋友可以看一下我github上的demo(https://github.com/onechunlin/JS_Demo/tree/master/CSS%E5%AE%9E%E7%8E%B0%E7%A7%92%E9%92%88)
2. 实现Promise.limit()，实现对promise数组的限制运行。讲了一下思路，然后手写不出来，后面整理了一下，答案在这（https://github.com/onechunlin/JS_Demo/tree/master/Promise.limit%E7%9A%84%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0）
欢迎大家点个小星星哦
3. Vue 2.x和Vue 3.x的区别（数据劫持方式、脚手架命令、UI界面等等）
4. CSS实现类似微信朋友圈的效果，要求根据图片数量显示不同的布局。（一张时占比50%，四张是田字布局，九张时九宫格布局）。
这个题其实挺偏的，我说了JS判断元素数量的方法，但是面试官还是不是很满意，核心思想就是利用伪类nth-last-child(1):first-child找到元素的子元素个数，
例如倒数第一个也是第一个元素时，说明只有一个元素。整理了答案在这咯
5. 如何获取一个元素相对于浏览器窗口左上角的位置（我说的是利用offsetParent循环直到找到body节点，进行一个数值的累加，
但是面试官说这种方法不好。后面找了好久终于找到了，可以利用Dom元素上的getBoundingClientRect()方法，该方法直接返回一个对象，可以拿到距离浏览器的距离）
6. 一次http请求的过程
还有其他一些小的知识点不太记得了，面完以后一个星期都没消息，然后我发邮件问了一下，挂啦。其实我觉得这一轮面试体验有点不太好（但是后面面其他部门的体验又很棒！），
面试官会在我说比较擅长点的时候打断我，然后继续下一个问题，所以后面搞得我都有点不太敢答了，你以为就这样结束了吗？
没有！我知道这个部门挂了，我又另外在牛客找了一个内推，投了抖音，但是抖音满了，最后好像没处理，但是HR给我打电话说我被捞出来了，
因为一面面试官对我评价还不错！（那为啥挂了），所以我又开始了另一个部门的面试。。。
一面：
看到面试官是个小姐姐，哈哈，心情都好了，然后就闲聊了一会儿（为了缓解我的紧张），开始自我介绍
1. 客户端和服务器怎么维持登录态（cookie和session的配合，还有token也可以）
2. cookie是每次请求都会发送给服务器吗（不会，因为服务器设置cookie时会指定其domain和path，只有请求相应的域时才会带上cookie）
3.跨域的方法（jsonp，跨域资源共享(CROS)， 代理， 中间件等）
4. 你说的跨域资源共享是怎么用的呢（通过在后端设置响应头“Access-Control-Allow-Origin：*”来启用跨域）
5. for(var i = 0; i<5; i++){
setTimeout(() => {
console.log(i)
})
}输出什么(5,5,5,5,5)，应该怎么改？（1. var改为let，这里扯一扯let的块级作用域，2. 使用立即执行函数将i传入函数里，这里扯扯JS的事件循环，宏队列微队列等）
6. [-4,-3,0,0,0,6,2,3]这样一个有规律的数列，0的左边都是负数，0的右边都是整数，要求找到与0相邻的正数和负数（-3,6），要求复杂度为log n（采用两次二分查找找出整数和负数）
7. position的取值（absolute， relative， sticky， static，然后这里小姐姐说你是不是还忘了一个，然后我连inherit都说出来了。。。
但是忘了fixed，但是小姐姐真的很nice,提醒了我，然后问了一下它的作用，因为前面说sticky的时候其实也提到了相对于浏览器定位，但是一时脑抽忘记了）
8. 怎么判断一个数组（Array.isArray，instance of，Object.prototype.toString.call(arr)）
9. [] instance of Object的结果（true）， typeof []的结果（Object），Object.prototype.toString.call([])的结果("[object Array]")
10.
<html>
<head>
<script type="text/javascript" src=‘./1.js' />
<script type="text/javascript">
console.log('2');
</script>
</head>
</html>
1.js内容：console.log('1')
上述代码输出结果，（1,2），因为js是阻塞式加载的，而且是同步代码，所以会依次执行，但是一般会吧script标签放在body尾标签前，防止阻塞页面加载
11. 面试官说其实放在尾部js的加载也是阻塞式的，有什么办法解决吗（async defer，此处介绍了一下浏览器的线程等，说明一下两个的不同，好像defer是ie里的，不太确定！）
12. 实现一个合并数组的方法，使其合并后的数组仍是有序的，
mergeArray(arr1, arr2)
[-10,-2, 12,15]
[-4,4]
[-10,-4,-2,4,12,15]
利用双指针，每次比较指针的位置，当一个指针完时，将另一个数组直接添加到结果数组之后即可（此处拓展了一下数组的concat和slice方法）
一面就记得这么多，其实每个问题我都有拓展一点，所以面试过程感觉小姐姐挺满意的，让我在那个房间等一会儿，二面马上上线！
二面：
二面是个面相很友善的大哥，顿时就放松了很多
1. 在Date上添加一个方法，使得能够格式化的输出日期（
如用户输入：
(new Date()).format("YYYY-MM-DD HH:mm:ss");
(new Date()).format("YYYY/MM/DD HH:mm:ss");
都能得到同意的效果，这个题应该是考察原型链以及正则，我简单写了一下代码，然后说了一下思路就过了
）
2. 实现正则检查：email，ip 地址。你看，正则来啦，现场写了两个正则，应该存在一些问题，因为不知道邮箱具体标准，但是面试官应该能看出我会写一般的正则。
所以也没太为难我，追问了一下^和$)
3. Vue 2.x和Vue 3.x的区别（怎么样！！神奇吗！是不是前面被问到过！）
4. 你能写一下Vue的双向绑定吗？利用Proxy实现，刚好我自己学习过程中整理了一下，写了一个Demo，所以很顺利完成，Demo地址：
5. 两数之和的算法（我说了两种，一种是排序之后使用头尾双指针，一种是利用数组的indexOf方法，在一个for循环中每次查找target-arr[i]的数是否存在，存在则加入结果数组）
这里还问了一下数组的indexOf和lastIndexOf的时间复杂度，因为数组本质其实是hash表，所以是常数项的复杂度
6. [1,2,3].map(parseInt)的结果（1，NaN，NaN），为什么？（因为map接收两个参数时值分别为value和index，而parseInt接收两个参数时值为value和radix，即字符串和基底。
parseInt(1,0)当基底为0时会使用10进制，即为1，基底为1时不会有2,基底为2时不会有3,所以为NaN）
7. array reduce 实现 filter，这个就不说答案了，很简单，百度一下reduce的使用以及filter的使用应该就会了
8. flex实现圣杯布局（即上下固定，中间自适应，左右固定，中间自适应），利用flex: 0 100px来设置一个固定大小，flex:1来实现自适应大小。上下固定时将flex-direction设置为column即可。
其他的好像记不太清了，感觉二面体验也不错，面试官说回头再联系（
有戏！）
有戏！） 三面：
当天上午连着两轮两小时面完，下午HR打电话约三面，约了第三天的晚上。
三面面试官那边网好像不太好，所以全程我都间歇性的问他（您好，能再说一遍题目吗，刚没听清。。。。巨尴尬，还好我脸皮厚，hhh
）
） 1. 上来面试官先自我介绍了一下，然后我自我介绍了一下（感觉又是个比较好的面试官，很好！）
2. 聊一下你最满意的项目，这个因人而异，大家一定要记得把自己项目的亮点说出来，我在说我做的那个点餐系统加入了一个推荐算法的时候，面试官明显眼前一亮（因为字节推荐算法很厉害！）
3. 你刚介绍项目的时候说你做过移动端的项目，能说一下和PC有什么不同吗（DPR问题，移动端滚动问题，不同分辨率的布局问题）
4. 你那个移动端的项目最终是怎么实现布局的呢（想知道我怎么实现自适应布局），我说我那个项目是使用的百分比布局，但是使用的CSS2还是CSS3的flex有点忘了，
因为那项目做了一年了，然后我就给面试官分别用CSS2和CSS3实现了一下经典的左右固定，中间自适应。（hh,二面的知识三面又用到了，真好）。然后顺着这个话题
跟面试官说了一下淘宝的flexible那个库，说了一下它的原理，利用rem来实现自适应布局和等比例缩放
5. 不使用setTimeout/setInterval等js的api，实现每隔一秒输出数组的一个元素。这个题刚开始给我难住了，但是后面突然灵光一闪，这不是和节流很像吗！，
然后写了一个节流函数用于替代setTimeout，还在其中加入了丰富的异步编程的知识（哈哈，我真是个小机灵鬼），但是最后面试官说你这个很接近了，让我再改改，
但是这时候我有点思绪紊乱了，所以最终没改出来。但是看面试官样子应该不是很失望
6. 说一下一次http通信的过程（惊人的相似）
7. 追问了一下网络传输中路由器怎么转发（这题有点懵，然后我就解释了一下OSI七层网络模型，以及其相关的协议，然后解释了一下TCP头中会包含目标地址和源地址）
8. 智力题：一个岛上有三种变色龙，每两种相遇就会变成第三种颜色，请问如果初始数量为10，14, 15,他们最终能变为一种颜色吗？
这个题在那演算了一下，告诉面试官可以，然后演示了一下推导过程。然后面试官一句。。。他们相遇不是合体变成一个。。。是都变了
场面一度十分尴尬，然后我又进行了新一轮的推导。
场面一度十分尴尬，然后我又进行了新一轮的推导。 结果是不能，他说那数字怎么改才可以变成一种颜色呢？其中两数相减以后的值是3的倍数时，可以变为一种颜色。
三面下来大概就记得这么多了，整理一下自己的项目到github也是个很好的习惯，因为面试官在面试过程中会问你上面的项目（加分项！）
总之面试过程中面试官会捕获你的亮眼之处，所以建议大家好好准备！希望大家都能拿到自己心仪的offer！
=============================================================================================
时隔几月，入职啦！欢迎大家来咱们部门呀，部门氛围很好，岗位需求多多哦
#字节跳动-2021届秋招提前批-产研前端内推码来啦~#
🙋我们的公司——
字节跳动成立于2012年3月，公司使命为“Inspire Creativity, Enrich Life（激发创造，丰富生活）”。公司业务覆盖150个国家和地区、75个语种，拥有超过6万名员工。
字节跳动在全球推出了多款有影响力的产品，包括今日头条、抖音、西瓜视频、飞书、TikTok、Lark、Helo等。截至2020年1月，字节跳动旗下产品全球月活跃用户数超过15亿。
🙋我们的团队——
字节跳动业务研发和工程架构部前端技术团队期待你的加入~
- 我们提供Web应用与产品研发的能力输出，目前涵盖的产品范围包括：今日头条、西瓜视频、教育系列产品、皮皮虾、番茄小说、Helo等；
- 此外，我们也支持公司大多数中台产品的研发工作，包括：游戏中台、基础架构、业务架构、搜索、用户增长等业务与技术中台；
- 在涵盖了ToC与ToB业务研发的同时，我们有独立的前端基础工程与架构团队，为业务研发团队提供研发工具、平台与相关技术解决方案等。
🙋我们的优势——
- 自由平等的工作环境
- 灵活的办公时间，上班不打卡
- 平等的工作氛围，沟通无“大小”
- 关注每一位校招新人的成长
- Mentor制，初入职场你有一位“领路人”
- Dance舞计划，应届生专属培养计划
- Bootcamp，技术新人训练营
- ByteTalk，行业前沿资讯分享
- 全方位的贴心福利关怀
- 免费三餐和就近住房补贴，帮你减轻压力
- 完善的商业保险制度，守护你的前行
- 温暖的节日礼品，点亮每一个值得庆祝的日子
- 多样化的健康关怀，助你更好地工作生活
- 精彩多元的文化生活
- 定期举办CEO面对面
- 欢乐温馨的家庭开放日
- 加入兴趣社团，寻找志趣相投的朋友
提前批更早更稳，且不影响正式批次投递喔～速速点击下方链接投递简历吧（校招实习也是这个）👇
【内推链接】https://job.bytedance.com/campus/position?referral_code=1QCW6G1
【内推码】1QCW6G1
欢迎大家转发内推码给朋友们（校招岗位皆可用），在官网投递时【填写内推码】并【完善简历】，点击【提交投递】即可内推成功，快来投递吧～
社招内推（日常实习也是这个）
https://job.toutiao.com/s/JFgHfmy
若投递时间截止也可以将简历发送到：wangchunlin.1@bytedance.com(记得主题说明来意，如：提前批、社招内推、实习等)，备注：姓名 - 岗位 - 城市，欢迎前来投递~
