Mar 18, 2021

前端面试-真题汇总1

写在前面的话

由于疫情的影响，公司整体的运营情况不太理想，加之领导的一些“莫名其妙”的行为，就有了离职的想法了。

一些心得和总结

1、由于疫情影响，基本都是视频面试了。百分之95都不用去现场，通几轮技术面到HR面都是网上进行的。使用的软件也是五花八门，瞩目，牛客网，微信视频，腾讯会议，或者各公司自己研发的视频软件。（伴鱼当时就邀请去现场面试，后来一想，路上太远，来回2小时，有这时间都能面两个了，所以就拒了；然后京东1、2面过了以后3，4面邀请去的现场，除此以外就没有让去现场面试的了）

2、面试真的很随机，完全看整个部门，尤其是面试官本身

3、大厂好多都会问算法题，不过一般就是leetcode的简单题目

4、手写题也很常见，比如bind，promise，promise all，防抖节流，深拷贝，发布订阅-EventEmitter，快排等（手写题可参考项目utils.js文件）

5、每一轮面试都要好好准备，三四面也可能会被刷掉

美团：

1、this作用域

var scope = 123;
var obj = {
  scope: 456,
  getScope: function () {
    var scope = 789;
    console.log(scope);
    console.log(this.scope);
    var f = function() {
    	console.log(scope);
      console.log(this.scope);
    }
    f();
  },
};

obj.getScope();
// 1、说一下打印结果
// 2、getScope改成箭头函数的打印结果

2、原型和原型链

function A() {}

var a = new A()

A.prototype
A.__proto__

a.__proto__
a.prototype

3、实现一个myReduce方法，使得与reduce方法作用一致

4、拓展题

请实现 reverseObject(obj, startIndex, endIndex) 方法。
扩展题：如何做到算法复杂度最小

示例：reverseObject(obj, 2, 5)

const obj = {
  value: 12,
  next: {
    value: 13,
    next: {
      value: 14,
      next: {
        value: 15,
        next: { 
          value: 16 
        }
      }
    }
  }
}
变成：
{
  value: 12,
  next: {
    value: 16,
    next: {
      value: 15,
      next: {
        value: 14,
        next: { 
          value: 13 
        }
      }
    }
  }
}

快手：

一面

1、this 作用域

var name = 'x'
var people = {
  name: 'y',
  setName: function(name) {
    this.name = name
    return () => {
      return this.name
    }
  }
}

var getName = people.setName(name)
console.log(people.name)
console.log(getName())
// 1、打印结果
// 2、setName改成箭头函数打印结果

2、事件循环

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function () {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function () {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function () {
  console.log('promise3')
})
console.log('end')

3、论述题

  1. ES2016-2020新特性。async/await，import(‘./module’)，obj?.prop，BigInt
  2. 为什么JS中0.1+0.2 !== 0.3？如何解决？
  3. vue的scoped css是如何实现样式隔离的？css modules呢？
  4. 移动端css布局单位了解哪些？rem对比vw？1px边框问题？
  5. 了解哪些跨域方式？
  6. 前端性能优化做过哪些工作？

4、手写防抖函数

function debounce(fn, time) {}

5、算法题

给定一个只包括 '('，')'，'{'，'}' 的字符串，判断字符串是否有效。
有效字符串需满足：
左括号必须用相同类型的右括号闭合。
左括号必须以正确的顺序闭合。 
/**
 * @param {String} str
 * @returns {Boolean}
 */
function isValid(str) {}
({)} false
({}) (){} true

二面

1、原型链

var A = function(){
  this.arr = 1
}
var B = function(){}
B.prototype = new A()

var a1 = new B()
var a2 = new B()

a1.arr=2
console.log(a2.arr)
new A()

2、css相关

2.1、权重问题 2.2、左右，上下margin 2.3、BFC 2.4、

body {
  font-size: 12px;
  text-indent: 3em; 
}

h1 { font-size: 15px }

3、手写promise All

4、算法题

用两个栈实现一个队列

function Stack(){
    this.arr = []
    this.pop =function(){
        return  this.arr.pop()
    }
    this.push = function(item){
        this.arr.push(item)
    }
    this.isEmpty = function(){
         return this.arr.length<=0    
    } 
}

var stack1 = new Stack()
var stack2 = new Stack()

其他（promise相关的题目）

// 1、axios请求失败的时候再重试一遍
function axiosAutoTry(data) {
  return new Promise((resolve, reject) => {
    axios(data)
      .then((data) => {
        resolve(data);
      })
      .catch((error) => {
        // 有重试次数
        if (typeof data.__try_count == "number" && data.__try_count > 0) {
          console.error("重试请求", error.message, data);
          data.__try_count--;
          return resolve(axiosAutoTry(data));
        }
        reject(error);
      });
  });
}

// 2、实现一个红绿灯
// 要求实现：红灯亮(打印)3s后，绿灯亮(打印)2s后，黄灯亮(打印)1s后循环
function log(num) {
  let map = ["", "yellow", "green", "red"];
  return new Promise((resolve, reject) => {
    console.log(map[num], num);
    setTimeout(() => {
      if (num <= 1) num = 4;
      resolve(num);
    }, num * 1000);
  });
}
function light(num) {
  num--;
  return new Promise((resolve, reject) => {
    log(num).then((data) => {
      light(data);
    });
  });
}
light(4);


// 3、已知fetch 是新的请求接口方法. 如: 获取user我们可以像下面这样调用:
fetch('/user').then(user => {})
// 请将fetch封装为一个函数xFetch, 让fetch 支持超时后返回,超时异常。调用方法如下所示
xFetch('/user', {timeout: 3000}).catch(err => {
  if(err.code == -1) {
    console.log('请求超时')
  }
});

function xFetch(path, params) {
  return new Promise((resolve, reject)=>{
    fetch(path).then(data=>{
      setTimeout(()=>{
        if(data) {
          resolve(data)
        }
        else {
          reject({code: -1})
        }
      }, params.timeout)
    })
  })
}