滴滴前端一面必会面试题汇总

    实现一个LazyMan，可以按照以下方式调用:
    LazyMan(“Hank”)输出:
    Hi! This is Hank!
    
    LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
    Hi! This is Hank!
    //等待10秒..
    Wake up after 10
    Eat dinner~
    
    LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
    Hi This is Hank!
    Eat dinner~
    Eat supper~
    
    LazyMan(“Hank”).eat(“supper”).sleepFirst(5)输出
    //等待5秒
    Wake up after 5
    Hi This is Hank!
    Eat supper

    class _LazyMan {
      constructor(name) {
    this.tasks = [];
    const task = () => {
      console.log(`Hi! This is ${name}`);
      this.next();
    };
    this.tasks.push(task);
    setTimeout(() => {
      // 把 this.next() 放到调用栈清空之后执行
      this.next();
    }, 0);
      }
      next() {
    const task = this.tasks.shift(); // 取第一个任务执行
    task && task();
      }
      sleep(time) {
    this._sleepWrapper(time, false);
    return this; // 链式调用
      }
      sleepFirst(time) {
    this._sleepWrapper(time, true);
    return this;
      }
      _sleepWrapper(time, first) {
    const task = () => {
      setTimeout(() => {
        console.log(`Wake up after ${time}`);
        this.next();
      }, time * 1000);
    };
    if (first) {
      this.tasks.unshift(task); // 放到任务队列顶部
    } else {
      this.tasks.push(task); // 放到任务队列尾部
    }
      }
      eat(name) {
    const task = () => {
      console.log(`Eat ${name}`);
      this.next();
    };
    this.tasks.push(task);
    return this;
      }
    }
    function LazyMan(name) {
      return new _LazyMan(name);
    }

    let ul = document.getElementById("container");
    // 插入十万条数据
    let total = 100000;
    // 一次插入 20 条
    let once = 20;
    //总页数
    let page = total / once;
    //每条记录的索引
    let index = 0;
    //循环加载数据
    function loop(curTotal, curIndex) {
      if (curTotal <= 0) {
    return false;
      }
      //每页多少条
      let pageCount = Math.min(curTotal, once);
      window.requestAnimationFrame(function () {
    for (let i = 0; i < pageCount; i++) {
      let li = document.createElement("li");
      li.innerText = curIndex + i + " : " + ~~(Math.random() * total);
      ul.appendChild(li);
    }
    loop(curTotal - pageCount, curIndex + pageCount);
      });
    }
    loop(total, index);

    class Store {
      constructor() {
    let store = localStorage.getItem('cache')
    if (!store) {
      store = {
        maxSize: 1024 * 1024,
        size: 0
      }
      this.store = store
    } else {
      this.store = JSON.parse(store)
    }
      }
      set(key, value, expire) {
    this.store[key] = {
      date: Date.now(),
      expire,
      value
    }
    let size = this.sizeOf(JSON.stringify(this.store[key]))
    if (this.store.maxSize < size + this.store.size) {
      console.log('超了-----------');
      var keys = Object.keys(this.store);
      // 时间排序
      keys = keys.sort((a, b) => {
        let item1 = this.store[a], item2 = this.store[b];
        return item2.date - item1.date;
      });
      while (size + this.store.size > this.store.maxSize) {
        let index = keys[keys.length - 1]
        this.store.size -= this.sizeOf(JSON.stringify(this.store[index]))
        delete this.store[index]
      }
    }
    this.store.size += size
    
    localStorage.setItem('cache', JSON.stringify(this.store))
      }
      get(key) {
    let d = this.store[key]
    if (!d) {
      console.log('找不到该属性');
      return
    }
    if (d.expire > Date.now) {
      console.log('过期删除');
      delete this.store[key]
      localStorage.setItem('cache', JSON.stringify(this.store))
    } else {
      return d.value
    }
      }
      sizeOf(str, charset) {
    var total = 0,
      charCode,
      i,
      len;
    charset = charset ? charset.toLowerCase() : '';
    if (charset === 'utf-16' || charset === 'utf16') {
      for (i = 0, len = str.length; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode <= 0xffff) {
          total += 2;
        } else {
          total += 4;
        }
      }
    } else {
      for (i = 0, len = str.length; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode <= 0x007f) {
          total += 1;
        } else if (charCode <= 0x07ff) {
          total += 2;
        } else if (charCode <= 0xffff) {
          total += 3;
        } else {
          total += 4;
        }
      }
    }
    return total;
      }
    }

    var a = 10
    var obj = {
      a: 20,
      say: () => {
    console.log(this.a)
      }
    }
    obj.say() 
    
    var anotherObj = { a: 30 } 
    obj.say.apply(anotherObj)

    var a = 10  
    var obj = {  
      a: 20,  
      say(){
    console.log(this.a)  
      }  
    }  
    obj.say()   
    var anotherObj={a:30}   
    obj.say.apply(anotherObj)

    function Foo(name) {
      this.name = name;
    }
    
    Foo.prototype.myName = function () {
      return this.name;
    }
    
    // 继承属性，通过借用构造函数调用
    function Bar(name, label) {
      Foo.call(this, name);
      this.label = label;
    }
    
    // 继承方法，创建备份
    Bar.prototype = Object.create(Foo.prototype);
    
    // 必须设置回正确的构造函数，要不然在会发生判断类型出错
    Bar.prototype.constructor = Bar;
    
     // 必须在上一步之后
    Bar.prototype.myLabel = function () {
      return this.label;
    }
    
    var a = new Bar("a", "obj a");
    
    a.myName(); // "a"
    a.myLabel(); // "obj a"

    export function set (target: Array<any> | Object, key: any, val: any): any {
      // target 为数组  
      if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
      }
      // key 已经存在，直接修改属性值  
      if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
      }
      const ob = (target: any).__ob__
      // target 本身就不是响应式数据, 直接赋值
      if (!ob) {
    target[key] = val
    return val
      }
      // 对属性进行响应式处理
      defineReactive(ob.value, key, val)
      ob.dep.notify()
      return val
    }

    Promise.reject = function(reason) {
    return new Promise((resolve, reject) => reject(reason));
    }

    console.log('script start');
    
    setTimeout(function() {
      console.log('setTimeout');
    }, 0);
    
    console.log('script end');

    console.log('script start');
    
    setTimeout(function() {
      console.log('setTimeout');
    }, 0);
    
    new Promise((resolve) => {
    console.log('Promise')
    resolve()
    }).then(function() {
      console.log('promise1');
    }).then(function() {
      console.log('promise2');
    });
    
    console.log('script end');
    // script start => Promise => script end => promise1 => promise2 => setTimeout

    ┌───────────────────────┐
    ┌─>│        timers         │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    │  │     I/O callbacks     │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    │  │     idle, prepare     │
    │  └──────────┬────────────┘      ┌───────────────┐
    │  ┌──────────┴────────────┐      │   incoming:   │
    │  │         poll          │<──connections───     │
    │  └──────────┬────────────┘      │   data, etc.  │
    │  ┌──────────┴────────────┐      └───────────────┘
    │  │        check          │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    └──┤    close callbacks    │
       └───────────────────────┘

    setTimeout(() => {
    console.log('setTimeout');
    }, 0);
    setImmediate(() => {
    console.log('setImmediate');
    })
    // 这里可能会输出 setTimeout，setImmediate
    // 可能也会相反的输出，这取决于性能
    // 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate
    // 否则会执行 setTimeout

    var fs = require('fs')
    
    fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0);
    setImmediate(() => {
        console.log('immediate');
    });
    });
    // 因为 readFile 的回调在 poll 中执行
    // 发现有 setImmediate ，所以会立即跳到 check 阶段执行回调
    // 再去 timer 阶段执行 setTimeout
    // 所以以上输出一定是 setImmediate，setTimeout

    setTimeout(()=>{
    console.log('timer1')
    
    Promise.resolve().then(function() {
        console.log('promise1')
    })
    }, 0)
    
    setTimeout(()=>{
    console.log('timer2')
    
    Promise.resolve().then(function() {
        console.log('promise2')
    })
    }, 0)
    
    // 以上代码在浏览器和 node 中打印情况是不同的
    // 浏览器中打印 timer1, promise1, timer2, promise2
    // node 中打印 timer1, timer2, promise1, promise2

    setTimeout(() => {
      console.log("timer1");
    
      Promise.resolve().then(function() {
    console.log("promise1");
      });
    }, 0);
    
    process.nextTick(() => {
      console.log("nextTick");
    });
    // nextTick, timer1, promise1

    当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。
    闭包作用：
    局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。