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

时间 2019-12-10

原文原文链接

题外话

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

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

见识到的东西：

工做环境: 和学校咱们本身的场地相比, 高大上不少倍, 办公环境由玻璃挡片桌子构成,每一个桌子上基本有苹果笔记本一台,外加横竖显示器各一台。
福利: 我所知道的是我花了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等等git

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

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

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

二面

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

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

	以下图#号区域
###########		###########


###########		###########

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

其余题目暂时记不住了,前面有的挺凉的,感受回答了60%吧。固然还交流了一些不关于技术的内容(必定是面试官哥哥让我缓解气氛,因此是题外话)编程

三面

实际手写代码的题,很凉后端

实现如下函数未完成的部分(题目是我本身总结老师的话,而后写的题目代码)

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的嵌套，笔者懵了：api

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) })


复制代码

原型链实现继承（哈哈哈哈,自己没难度的题,换个套路,我就不会作了）

// 实现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

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