记人生第一次工作面试 - 小米前端实习

题外话

笔者目前大三,北京周边院校。作为人生的第一场面试,以及一些感触,有感而发,经历三面,包含部分面试题。

个人经历简述： 至今接触互联网编程有8年多,也依靠互联网从初二做到经济独立。大一的时候选择了前端并开始深入学习,目前基本掌握html,css,js,es6等,有多次前后端独立开发经验,也有团队引导经历。之所以想加入xx,是因为xx,想加入一个有激情、有上进的Team - 官话,也就是自我介绍

见识到的东西：

• 工作环境: 和学校我们自己的场地相比, 高大上很多倍, 办公环境由玻璃挡片桌子构成,每个桌子上基本有苹果笔记本一台,外加横竖显示器各一台。
• 福利: 我所知道的是我花了1分钱买了友宝在学校3元钱的冰红茶(3-2-0.99[京东])。
• 面试官: 同龄人。
• 面试: 坐着不是站着,所以如果纠结穿什么鞋的话,没必要。
• 感触: 背着电脑跑一天,真的很累。
• 自我介绍: 真的没那么重要,因为气氛不适合说出那么一段官话。

学到的东西(不含技术)：

• 尊重别人的劳动成果: 当我看到第三面Lead面试官,将我写的4k字的主观题(面试前做的),用标记把重点标出的时候,我已经觉得,我或者很多人其实已经输在态度上。
• 谦虚: 面试官们技术或者各方面都比我厉害,但从头到尾,面试官给我的感觉就是非常和蔼,会的东西很多,不骄不躁，仔细听我说，然后也给我建议和反馈,真的是社会的老师。
• 通过二手资料学习技术当然不错,不管是看教程还是看博客,虽然效率是有了,但会错过很多细节,所以学习一手资料，直接看经典JS书,或许学到的更多。我的ES6刚开始是看M课网的ES6CP实战教程学习的,后来又看了深入理解ES6这本书,感触真的不一样。不过这一点,笔者也没做的很好,始终年轻气燥。(笔者大一就知道这四本书：你不知道的JavaScript,高性能Javascript,红宝书,犀牛书,但每一次拿到书,都没有静的下心来学习。当代年轻人,静下心专心的完成一件事,真的很重要。)
• 对于一个技能, 假如实践需要用到的知识有20%, 那么认知需要覆盖80%。 - 面试官前辈语录

个人对前端面试,以及知识体系的一些看法

通过这一次面试吧,我觉得我的知识体系更多的是靠面试准备这段期间搭起来的，而不是平时的项目开发，或者当时在学习基础的时候。所以我目前的想法是,通过看JS的经典书籍，把自己的知识体系用自己看的书用思维导图搭建起来,而不是靠面经和面试之类的书籍，也许是知识点太浅吧，虽然面试的时候，很多问题都能回答，但是自己自身的硬件其实不算是太硬的。

正题

一面

知识点：原始类型,对象,闭包,原型,Event Loop,TCP,浏览器缓存机制,网络安全方面(XSS,CSRF),CSS，HTTP2，ES6等等

PS： 题目顺序可能记不住(题目可能有交叉),大概的题如下,自行思索。

1. 你知道JS有哪些类型吗？
2. ==和===的区别
3. 怎么判断对象是否为空
4. 闭包是什么,怎么理解? a(1)(2)怎么调用的, 如何用代码实现a(1)(2)(3)(4)...(n)的函数定义
5. 你知道new一个实例的时候发生了什么吗？类似写一个自己定义的new函数
6. 你知道call,apply,bind之类的函数吗? 如何自己实现原理？
7. 你知道ES6中的关于数组的哪些新方法或属性,说说arr.form()
8. 如何实现原型继承?
9. 两栏布局：左边宽度固定,右边自适应(笔者建议尽量用五种方法实现)
10. 你知道浏览器缓存吗？怎么实现？有哪些位置？
11. XSS和CSRF方别是什么？怎么防止？怎么实现攻击？
12. VUE响应式原理,哪个函数实现的? Proxy有什么用？
13. TCP: 1KB，14KB，15KB，30KB等大小的文件，哪个先加载完(网速固定,数字记不清了)
14. git,你知道除了那些简单的命令，你还知道什么,比如如何版本回退(我没答出来完整的，给我讲了两个回退方案不同的区别)

暂时能想起来的也就这么多,笔者自我感觉大概回答出80%--吧。因为这些很多知识点基本是靠面经或者面试相关的手册书籍堆砌起来的知识体系,所以自己评价算是很薄弱，但这一部分在实战项目中是很难遇到的。

二面

知识点： ES6，CSS3，浏览器相关, 算法

1. 用原生JS实现Promise.all方法
2. Flex实现如下图的布局：(不知道掘金怎么传图,只能用markdown表格画了), 外面dom未知宽高,内部四个角度各有一个dom

	如下图#号区域
###########		###########
###########		###########

3. 求[1,32,5,4,5,-1,3,4,-20]数组(任何一个数组)的子数组的最大和是多少[注意：不能改变数组顺序]
4. 深浅拷贝
5. cookie，localstroge等这四个存储有什么区别
6. restful API规范接口相关的。get,post有什么区别
7. 下面的记不住了...

其他题目暂时记不住了,前面有的挺凉的,感觉回答了60%吧。当然还交流了一些不关于技术的内容(一定是面试官哥哥让我缓解气氛,所以是题外话)

三面

实际手写代码的题,很凉

1. 实现以下函数未完成的部分(题目是我自己总结老师的话,然后写的题目代码)

function action(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (Math.random() <= 0.5) ? resolve(id) : reject(id)
    }, 300)
  })

}
function notify(id, state) {
  console.log('notify=> ', id, state)
}
let idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

/**2000
 * 
 * @param {Function} action 异步数据回调函数 - 接口
 * @param {Array} idList 异步获取数据回调所需要参数 - 传递的数组，需遍历
 * @param {Function} notify 异步回调通知回调函数
 * return 异步数据回调成功或失败的id结果 - 需返回Promise
 */
function getProList(action, idList, notify) { // 老师就给了这一行代码,其他的是语义补充
  // 补充完成函数
 
}
const res = getProList(action, idList, notify)
res.then((res) => { console.log(res) })


复制代码

回来之后在学校写的(今早花了30分钟左右完成的吧),遇到promise的嵌套，笔者懵了：

function action(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (Math.random() <= 0.5) ? resolve(id) : reject(id)
    }, 300)
  })

}
function notify(id, state) {
  console.log('notify=> ', id, state)
}
let idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

/**2000
 * 
 * @param {Function} action 异步数据回调函数 - 接口
 * @param {Array} idList 异步获取数据回调所需要参数 - 传递的数组，需遍历
 * @param {Function} notify 异步回调通知回调函数
 * return 异步数据回调成功或失败的id结果 - 需返回Promise
 */
function getProList(action, idList, notify) {
  // 补充完成函数
  return new Promise((resolve, reject) => {
    let res = {
      success: [],
      fail: []
    }
    for (const id of idList) {
      let promise = action(id)
      promise.then(() => {
        res.success.push(id)
        notify(id, 'success')
        return Promise.resolve(res.success.length + res.fail.length)
      }, () => {
        res.fail.push(id)
        notify(id, 'fail')
        return Promise.resolve(res.success.length + res.fail.length)
      }).then((length) => {
        if (length === idList.length) {
          resolve(res)
        }
      })
    }
  })
}
const res = getProList(action, idList, notify)
res.then((res) => { console.log(res) })


复制代码

2. 原型链实现继承（哈哈哈哈,本身没难度的题,换个套路,我就不会做了）

// 实现child继承parent
function extends(parent, child){
    
}
复制代码

我的答案: child.prototype = Object.create(parent.prototype,{})

我原本准备好的套路：

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}

function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true
复制代码

结语

哈哈,因为这个文章主要是想给团队的另外两个成员看下题目的,也想给自己的学弟学妹们一些指引,所以写的有点迷,将就将就吧。然后我想学学弟学妹们说的是： 静下心学习，不管将来要考研还是搞技术，个人觉得： 考研的，在大三下学期之前，一定要学习一些技术，不然考完研，你会很迷，或者之后工作，可能偏市场方向去了，而不是技术。对于不考研的，这段话给我自己说：静下心，继续准备，别想着不努力，将来有好工作，别想着临时抱佛脚，别想着我爸是雷J。关于学校课程：我现在回去重新学数据结构和算法相关的，还有网络相关的(TCP之类的 - 目前的课)。

还有,我不知道发面试题算不算侵权，如果是的话，你们跟我说一下，我把题目删了。

---

刚研究掘金的草稿缓存怎么做的,调试输出的。原来他是网络缓存，不放本地，这点很好。 https://post-storage-api-ms.juejin.im/v1/updateDraft

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高