前端面试的笔试题

README.md

前端面试笔试题说明

出题的意义

• 初步筛选出面试者，不用来一遍公司才发现不合适，节省面试者的时间。
• 现场作答，由于面试者没带电脑，不方便作答，没法体现自己的能力。
• 通过回答了的题目，提前判断出面试者的水平，节省面试的时间。
• 让面试者充分准备。

做题规则

• 使用 markdown 格式来进行作答。
• 可以随意查阅资料作答，面试面谈的时候回根据回答深入询问，切勿生搬乱套。
• 答题时候注意代码规范问题，而且代码遵从 蝴蝶书 来写。
• 按照自己的技能水平选一套题目来做。例如是中高级水平，就做中高级题目。
• 作答时，无需回答对应自己级别之下的题目，但是可以回答自己级别之上的题目。
• 作答完毕，希望不要把答案公布在网上。

其他说明

• 鉴于我厂的主要技术栈是 react 。如果不希望转成 react 的话，就可以终止作答和面试了。
• 这份题目涉及主要是 前端基础、算法、接到任务的整个开发+沟通+思考的流程。
• 如果最后没有被录取或者不愿意来，都希望做题者能够从中学习到很多东西。

中高级.md

中级必答

用原型链方式写一个 Animal 类及其两个不同实例。

条件一：定义属性方法 say ，实现 animalA.say !== animalB.say 及 animalA.__proto__.say === animalB.__proto__.say （注意审题，非方法的调用） 条件二：实现 die 方法，标记该实例为死亡。
条件三：实现 Animal.all() ，返回所有已创建但是未标记为死亡的实例。

以下是部分代码：

function Animal(props) {
  this.name = props.name;
}

var animalA = new Animal({ name: '小白鼠A' });
var animalB = new Animal({ name: '小白鼠B' });

上一题，改成 class 写法。

以下是部分代码：

class Animal {
  constructor(props) {
  }
}
var animalA = new Animal({ name: '小白鼠A' });
var animalB = new Animal({ name: '小白鼠B' });

匹配一个合法的 url 字符串中 pathname 的正则。

如 http://www.baidu.com/a/b/c/d?dsd=1&f=4#h=1&u=5 的 pathname 为 /a/b/c/d

附上一条能展示个人 html / css 能力的 url 。（历史项目经验，如一个登录页面，业务相关的页面最好）

多层的 Promise 嵌套依次串调用。如果中途某个 Promise 的 then/catch 结果不符合预期，应该怎么处理。

[业务问题] 目前有一个登录业务（如果未注册账号，登录之后自动注册账号），直接手机号和短信验证码登录。

提示：需要考虑短信验证码发送的，假设需要校验图形验证码才能发送短信。
问题一： 后端需要开发哪些接口来发送手机验证码？   问题二： 如何确保验证码（短信验证码，图形验证码）的有效性？

react 中说说受控组件是啥，写个受控组件例子。（不必非代码表达）

（如果熟悉 vue ，请回答）定义 vue 组件时候（如 https://cn.vuejs.org/v2/examples/ ）， methods 或者 computed 中的属性用了箭头函数来定义，会怎样？为什么？（可不回答，面试时候会问到。）

说说对微信小程序踩过的坑，有什么项目经验。（语言表达）

修饰器是什么东西，做了什么东西。

中级必答 end

中级高级必答 end

[js基础深入+算法] 将某个数组进行特定的前后条件分段排序，并且说明时间复杂度。

四个数组：a，b, c，d。 a 为原始数组；b,c 为排序条件数组，长度未知；d 为排序后输出的数组。
条件一：a 中属于 b 的元素，则按照 b 中元素的先后顺序排在 d 中元素的最前面。
条件二：a 中属于 c 的元素，则按照 c 中元素的先后顺序排在 d 中元素的最后面。
条件三：其他元素按照升序，排在中间。

如 a = [1,2,3] ，b = [3], c = [2]
输入abc：([1,2,3], [3], [2])
输出d：[3,1,2]

如 a = [6,5,4,3,2,1,7,8,3,5,4,6,8,2,12,545,745,323,7] ，b = [7,4,5], c = [3,1,323]
输入abc：([6,5,4,3,2,1,7,8,3,5,4,6,8,2,12,545,745,323,7], [7,4,5], [3, 1,323])
输出d：[7,7,4,4,5,5,2,2,6,6,8,8,12,545,745,3,3,1,323]

中级高级必答 end

高级必答，初中级选答

上面的 [js基础+算法] 将某个数组进行特定的前后条件分段排序，并且说明时间复杂度。

解答 + 举例使用场景。

（如果熟悉 redux ，请回答） connect 做了什么事情。

大概表述下答案即可。

使用账号密码进行登录的时候，假设前端发送 username 、 password 到后端 api ，那后端的 api 是怎么校验这个账号及密码有效性的。

背景：后端的账号表是使用盐加密后的 hash 来存储密码字段，避免明文存储。
大概表述下答案即可。

[算法问题] 有一个不重复的序列数组，经过N次轮转之后，找出最小值。（不知道N为多少，只知道最后的数组）

如 [4, 6, 8, 10, 13, 16, 21, 55] , 轮转之后变成 [10, 13, 16, 21, 55, 4, 6, 8]
找出最小值，为 4 。
解答方法很多种。
解答方法很多种。
解答方法很多种。
讲出能想到的所有的答案，答案以时间复杂度排序。并且标明时间复杂度。
答题原则不是写出例如冒泡排序的算法代码，而是文字表达，如果文字表达不清楚，可用伪代码。

高级必答 end

初中级.md

[基础] 实现一个简单的闭包。

[基础] 实现获取斐波那契数列某个值方法。（注意优化）

function fibonacci(x) {
  var result = 0;
  // do staff begin

  // do staff end
  return result;
}

[基础] 实现某个阶乘阶乘函数方法。（注意优化）

function factorial(x) {
  var result = 0;
  // do staff begin

  // do staff end
  return result;
}

[基础] 最新的 css 版本中， position ，几个值，以及其定位的时候相对参考坐标在哪里。

[基础] css 中 z-index 问题。说下 z-index 的规律。

[基础] 下面绑定事件方式

// 方式1
jQuery('body').on('click', '.btn', (e) => {
  console.log(e);
});

// 方式2
jQuery('body .btn').on('click', (e) => {
  console.log(e);
});

问题一： 两个方式的事件原理是什么？
问题二： 哪个方式性能好？
问题三： 有什么不同？对应使用场景举例。

css 中 box-sizing 不同值及其作用。

css 怎么计算选择器权重。

回答 中高级.md 中的原型链以及改成 class 形式写法的题目。

中高级.md 中的题目，进行选答。

部分业务问题.md

校验数据的区间合理性

目前我存在四个环境变量文件， env.base.js env.demo1.js env.demo2.js env.demo3.js 。 （如果后期还有 env.demo4.js ，那后期再使用 hard code 方式解决添加更多的问题）

每个文件里面都是一个一维的 object 。如

export default {
  title: '管理后台'，
}

为了避免代码出现在部署不同环境时候出现 bug ，必须把几个配置环境严格同步，有以下规则：

• env.base.js 中存在的字段，不一定出现在另外几个 demo 的配置文件里面
• 某个 demo 配置文件里面，如果存在一个字段，是不存在于 env.base.js 里面，
  • 其他的 demo 配置文件里面也存在这个字段，数据正确
  • 其他的 demo 配置文件中，有一个或者以上的文件，不存在该字段，数据错误。

如何实现这个数据校验。能使用任何外部库来实现。

实现数据移除拉黑机制

假设两个数组， A 为待处理输出，结构为一个对象的一维打平。 B 为数据前缀限定移除条件。需要将 A 中的数据，排除掉 B 的前缀限定的数据。 能用任何库。稳定性不进行要求（注意这算是一个提示）。 例如，输入 A , B , 输出 C 。

A = [
  'a',
  // 'bb' 不可能存在。这是约定。
  // 类似这种，如果存在 XX.YY ，数据中就肯定不会存在 XX 。
  'bb.id',
  'bb.name',
  'b.id',
  'c',
  'cc.id',
  'cc.name'
  'cc_id',
]

B = [
  'cc.id',
  'bb',
]

C = [
  'a',
  'b.id',
  'c',
  'cc.name',
  'cc_id',
]

markdown拼错了

markdown拼错了

眼尖 👍 。