50道前端面试题

1.写React / Vue项目时为什么要在列表组件中写key，其作用是什么?

2.`['1".'2"."3].map(parselnt)` what & why?

3.什么是防抖和节流?有什么区别?如何实现?

4.介绍下Set、 Map. WeakSet和 WeakMap的区别?

5.介绍下深度优先遍历和广度优先遍历，如何实现?

6.请分别用深度优先思想和广度优先思想实现一个拷贝函数?

7.ES5/ES6的继承除了写法以外还有什么区别?

8.setTimeout、Promise、Async/Await的区别?

9.Async/Await如何通过同步的方式实现异步?

10.异步笔试题请写出下面代码的运行结果


async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
 
async function async2() {
  console.log('async2')
}
 
console.log('script start')
 
setTimeout(function() {
 console.log('setTimeout')
},0)
 
async1()
 
new Promise(function(resolve) {
  console.log('promise1')
  resolve()
})
  .then(function() {
    console.log('promise2')
  })
 
console.log('script end')
 
//输出
//script start
//async1 start 
//async2 
//promise1
//script end
//async1 end 
//promise2
//setTimeout

11.算法手写题

已知如下数组，编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组


var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

使用 Set 方法去重，flat(Infinity)扁平化

Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

12.JS 异步解决方案的发展历程以及优缺点。

13.Promise构造函数是同步执行还是异步执行，那么then方法呢?

14.如何实现一个new

15.简单讲解一下http2的多路复用

16.谈谈你对TCP三次握手和四次挥手的理解

17.A、B机器正常连接后，B机器突然重启，问A此时处于TCP什么状态

如果 A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）

因为 B 会在重启之后进入 tcp 状态机的 listen 状态，只要当 a 重新发送一个数据包（无论是 syn 包或者是应用数据），b 端应该会主动发送一个带 rst 位的重置包来进行连接重置，所以 a 应该在 syn_sent 状态

18.React 中setState什么时候是同步的，什么时候是异步的?

1、由 React 控制的事件处理程序，以及生命周期函数调用 setState 不会同步更新 state 。

2、React 控制之外的事件中调用 setState 是同步更新的。比如原生 js 绑定的事件，setTimeout/setInterval 等。

19.React setState笔试题，下面的代码输出什么?


class Example extends React.Component {
  constructor() {
    super()
    this.state = {
      val: 0
    }
  }
  componentDidMount() {
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    // 第 1 次 log
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    // 第 2 次 log
    setTimeout(() => {
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第 3 次 log
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第 4 次 log
      }, 0)
  }
  render() {
    return null
  }
}
 
// 答：
// 0, 0, 2, 3

20.介绍下npm模块安装机制，为什么输入npm install就可以自动安装对应的

21.说出3个判断数组的方法，请分别介绍它们之间的区别和优劣

22.介绍下重绘和回流(Repaint & Reflow)，以及如何进行优化

23.介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景

24.聊聊Redux和Vuex的设计思想

25.说说浏览器和Node事件循环的区别

26.介绍模块化发展历程

27.全局作用域中，用const和 let声明的变量不在window 上，那到底在哪

28.cookie和token都存放在header 中，为什么不会劫持token?

29.聊聊Vue的双向数据绑定，Model如何改变View, view又是如何改变

30.两个数组合并成一个数组

31.改造下面的代码，使之输出0 -9，写出你能想到的所有解法。


for (var i = 0; i < 10; i++>) {
  setTimeout(() => {
    console.log(i);
  }, 1000)
}

解法一


for (let i = 0; i < 10; i++>) {
  setTimeout(() => {
    console.log(i);
  }, 1000)
}

解法二


for (var i = 0; i < 10; i++>) {
  ((i) => {
    setTimeout(() => {
      console.log(i);
    }, 1000)
  })(i)
}

32.virtual DOM真的比操作原生DOM快吗?谈谈你的想法。

33.下面的代码打印什么内容，为什么?


var b = 10;
(function b(){
  b = 20;
  console.log(b);
})();

34.简单改造下面的代码，使之分别打印10和20.


var b = 10;
(function b() {
  b = 20;
  console.log(b);
})();

解


var b = 10;
(function () {
  b = 20;
  console.log(b);
})();


var b = 10;
(function () {
  console.log(b);
  b = 20;
})

35.浏览器缓存读取规则

36.使用迭代的方式实现flatten 函数。

37.为什么Vuex的mutation和 Redux的reducer中不能做异步

38.下面代码中a在什么情况下会打印1?


var a = ?;
if (a == 1 && a == 2 && a == 4) {
  console.log(1);
}

解法一


var a = {
  i: 1,
  toString () {
    return a.i++;
  }
}
 
if (a == 1 && a == 2 && a == 4) {
  console.log(1);
}

解法二


let a = [1, 2, 3];
a.toString = a.shift;
if (a == 1 && a == 2 && a == 4) {
  console.log(1);
}

39.介绍下BFC及其应用。

40.在Vue中，子组件为何不可以修改父组件传递的Prop

41.下面代码输出什么


var a = 10;
 
(function () {
  console.log(a);
  a = 5;
  console.log(window.a);
  var a = 20;
  console.log(a)
})()

42.实现一个 sleep函数

比如 sleep(1000) 意味着等待 1000 毫秒，可从 Promise、Generator、Async/Await等角度实现


const sleep = (time) => {
  return new Promise(resolve => setTimeout(resolve, time))
}

43.使用`sort()`对数组`[3,15,8,29,102,22]`进行排序，

44.介绍HTTPS握手过程

45.HTTPS 握手过程中，客户端如何验证证书的合法性

46.输出以下代码执行的结果并解释为什么


// TODO

47.双向绑定和vuex是否冲突

48.call和apply的区别是什么，哪个性能更好一些

49.为什么通常在发送数据埋点请求的时候使用的是1x1像素的透明gif图片?

没有跨域问题，一般这种上报数据，代码要写通用的；（排除 ajax）
不会阻塞页面加载，影响用户的体验，只要 new Image 对象就好了；（排除 JS/CSS 文件资源方式上报）
在所有图片中，体积最小；（比较 PNG/JPG）

50.实现(5).add(3).minus(2)功能

例： 5 + 3 - 2，结果为 6


Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
 
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};