简单面试题

1、如何用js实现sleep

  function sleep(time) { 
    let startTime = new Date()
    while (new Date() - startTime < time) {}
    console.log('1s over')
  }
  console.log(123);
  sleep(1000)
  console.log(456);

注：会出现死循环情况

function newSleep(nTime) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, nTime)
  })
}
console.log(123);
newSleep(1000)
  .then(() => {
    console.log(456);
  })

2、如何不用setInterval实现每秒打印一个数字

  let arr = [1, 2, 3];
  for (let i = 0; i < arr.length; i++) {
    setTimeout(() => {
      console.log(arr[i]);
    }, (i + 1) * 1000)
  }

3、截流函数与防抖函数

• 实现方法很多种，setTimeout或者时间戳控制都可以

4、冒泡排序与快速排序

  冒泡
  function bubble(arr = []) {
    for(let i = 0;i < arr.length;i++){
      for(let j = 0;j < arr.length - 1 - i;j++){
        if(arr[j] < arr[j + 1]){
          let num = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = num;
        }
      }
    }
    return arr;
  }

 快排
 function quickSort(arr) {
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot],quickSort(right));
};

5、vue route有几种模式，区别是什么

• 模式：两种三种都可以，hash，history，abstract（可以不提）
• 区别：hash 模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
  history 用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
• 一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。

6、vue router实现原理

• 一般使用 vue 都是 spa 并有且只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的内容，而只更新某个指定的容器中内容，我们的 router其实只是一个大对象，根据不同的渲染需求加载不同的内容就可以。

7、手写一个trim的实现方法

• 其实只是考正则表达式，可以多熟练一下

8、简单说一下call、apply、bind 的区别，简单说下用js实现call的思路

• 区别：call 和 apply 改变了函数的this上下文后便执行该函数，除了第二个参数数据类型不同，并没有什么不同， bind 则是返回改变了上下文后的一个函数。

• 实现思路：https://github.com/mqyqingfeng/Blog/issues/11

9、promise 的三种状态，简单说下实现思路

• 三种状态：resolve reject pending
• 实现思路：https://juejin.im/post/5a30193051882503dc53af3c

10、说一下继承的方法有哪些，简单写一下

• 继承方法：extends Object.create call apply

11、简单介绍一下高阶函数

• https://www.liaoxuefeng.com/wiki/1022910821149312/1023021271742944

12、vue 或者 小程序 中优化体验的方案

• 例如：首屏减少看不到区域的请求、字段优化、dom层级优化、减少重绘等等

13、如何实现一个自定义事件

• 思路：可以通过两个方面： window.prototype 上可以挂载自定义方法，修改 addEventListener 也可以实现

14、简单说下js的原型链

• 这个就不多介绍了

15、实现一个 $on 、$emit（vue中的）

• 单例模式

16、什么伪数组，如何变成真正的数组

• Array.prototype.slice.call()

17、浏览器和Node的事件循环是否一样，不一样的话区别在哪

• https://juejin.im/post/5aa5dcabf265da239c7afe1e

18、css是否会阻塞js的加载

• https://juejin.im/post/59c60691518825396f4f71a1

19、简单说一下回流和重绘，

• https://juejin.im/post/5a9923e9518825558251c96a

20、vue 的双向数据绑定原理

• 这个不多做介绍了

参考资料

• https://juejin.im/post/5a30193051882503dc53af3c
• https://juejin.im/post/5a9923e9518825558251c96a
• https://juejin.im/post/59c60691518825396f4f71a1
• https://juejin.im/post/5aa5dcabf265da239c7afe1e
• https://www.liaoxuefeng.com/wiki/1022910821149312/1023021271742944
• https://github.com/mqyqingfeng/Blog/issues/11