面试题目

2017-08-14

写在前面

今天是我工作以来，第一次以面试官的角色去面试别人，面试对象为：前端工程师，然后自己弄了些题目，当做是自己回忆总结也好，现在把题目整理下：

css

基础知识：

z-index：的使用事项：可以参考这边文章
float的影响,及怎么清除浮动，有哪些方法。
flex的使用示例

标准的盒子的大小及定位基准？？

.div {
  background: red;
  width: 100px;
  height: 100px;
  border: 20px solid #ccc;
  padding: 10px;
}
如果设置 border-sizing: border-box; 该红色区域大小？？?
不设置border-sizing: border-box的时候，该红色区域大小???

触发BFC条件：
- overflow：不为visible;
- position: absolute,fixed;
- float: 不为none
- display: inline-block table-cell;
- 哪些用途：例如: 属于不同的BFC时可以阻止margin重叠

布局实例：

<div style="height: 400px;">
  <span class="height"></span>
</div>
.height {
  display: inherit;
  height: 200px;
}
.height{
  display: inline-block;
  height: 200px; // height: 100%;, auto
}
.height {
  height: 200px;
}

实现一个类似天猫头部的中间布局(只用margin: 0 auto; position: absolute)
rem的用法

JS

const, let, var的使用注意项

块级作用域、

const a = 'java'
a = 'node'？
const a = ['java'];
a.push('e')?
// 数组的常用方法说几个，
// 那些函数会改变数组本身
// 答：pop, shift,concat,map, splice

快速去重数组中的元素的方法

1 2	const arr = [5, 1, 5, 7, 7, 5]; const unique = [...new Set(arr)]; // [ 5, 1, 7 ]

实现Promise 让你去实现.whole的方法，和all的效果有相同的效果怎么写：

Promise.whole = function(promises){
  var results = new Array(promises.length);
  var finished = 0;
  return new Promise(function(resolve, reject) {
    promises.forEach(function(promise, index) {
      promise.then(function(data){
        finished ++;
        results[index] = data;
        if(finished ==promises.length){
          resolve(results)}
        }).catch(function(err){
          reject(err)}
        )
    })
  })
}

nodejs模块

// cache.js
const Cache = function() {
  console.log('init here!!');
}
var cache = new Cache();
module.exports = {
  cache
}
// a.js
const cache = require('./cache') //会打印出 'init here!!'
// b.js
const cache = require('./cache') // 会打印吗？

javascript 中this的问题：

function A(a) {
    this.a = a;
}
A.prototype.b = function (arr) { // (A)
    'use strict';
    return arr.map(function (x) { // (B)
        return this.a + x; // (C)
    });
};
var t = 'outer'
var a = {
 t: 'java',
 m: function(){
    console.log(this.t);
 }
}
a.m();
var t = 'outer'
var a = {
 t: 'java',
 m: ()=>{
    console.log('this', this);
    console.log(this.t);
 }
}
a.m();

react知识

描述react生命周期函数
用过redux吗，若使用过，大概讲下其实现原理
简述Koa 和 Express 的中间件的使用

总结

上面的题目有些像背书一样，只要说出大概也是可以的；

今天面试一个女生，算上实习有三年的前端工作经验，Promise没用过，nodejs也没使用过，弄的自己突然没什么好问的了，我一直以为nodejs和react是一套必须的前端技能包，前端的css这块感觉也不是特别突出，感觉女生做技术这块还是有些弱势，虽然我不是大牛，但是我一直努力成长中，喜欢追根究底，有好奇心，愿踏实勤劳的技术人员们都有好的前程~~~