滴滴前端一面常考手写面试题合集

// 模拟 call bar.mycall(null);//实现一个call方法：// 原理：利用 context.xxx = self obj.xx = func-->obj.xx()Function.prototype.myCall = function(context = window, ...args) {  if (typeof this !== "function") {    throw new Error('type error')  }  // this-->func  context--> obj  args--> 传递过来的参数
  // 在context上加一个唯一值不影响context上的属性  let key = Symbol('key')  context[key] = this; // context为调用的上下文,this此处为函数，将这个函数作为context的方法  // let args = [...arguments].slice(1)   //第一个参数为obj所以删除,伪数组转为数组
  // 绑定参数 并执行函数  let result = context[key](...args);  // 清除定义的this 不删除会导致context属性越来越多  delete context[key];
  // 返回结果   return result;};

//用法：f.call(obj,arg1)function f(a,b){ console.log(a+b) console.log(this.name)}let obj={ name:1}f.myCall(obj,1,2) //否则this指向window

Array.prototype.slice.call(arrayLike);

Array.prototype.splice.call(arrayLike, 0);

Array.prototype.concat.apply([], arrayLike);

Array.from(arrayLike);

let arr = [];Array.prototype.push = function() {    for( let i = 0 ; i < arguments.length ; i++){        this[this.length] = arguments[i] ;    }    return this.length;}

const jsonp = ({ url, params, callbackName }) => {  const generateUrl = () => {    let dataSrc = '';    for (let key in params) {      if (Object.prototype.hasOwnProperty.call(params, key)) {        dataSrc += `${key}=${params[key]}&`;      }    }    dataSrc += `callback=${callbackName}`;    return `${url}?${dataSrc}`;  }  return new Promise((resolve, reject) => {    const scriptEle = document.createElement('script');    scriptEle.src = generateUrl();    document.body.appendChild(scriptEle);    window[callbackName] = data => {      resolve(data);      document.removeChild(scriptEle);    }  })}

let obj1 = {  a: 0,              b: {                 c: 0                 }            };let obj2 = JSON.parse(JSON.stringify(obj1));obj1.a = 1;obj1.b.c = 1;console.log(obj1); // {a: 1, b: {c: 1}}console.log(obj2); // {a: 0, b: {c: 0}}

var _ = require('lodash');var obj1 = {    a: 1,    b: { f: { g: 1 } },    c: [1, 2, 3]};var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);// false

// 深拷贝的实现function deepCopy(object) {  if (!object || typeof object !== "object") return;
  let newObject = Array.isArray(object) ? [] : {};
  for (let key in object) {    if (object.hasOwnProperty(key)) {      newObject[key] =        typeof object[key] === "object" ? deepCopy(object[key]) : object[key];    }  }
  return newObject;}

class EventCenter{  // 1. 定义事件容器，用来装事件数组    let handlers = {}
  // 2. 添加事件方法，参数：事件名 事件方法  addEventListener(type, handler) {    // 创建新数组容器    if (!this.handlers[type]) {      this.handlers[type] = []    }    // 存入事件    this.handlers[type].push(handler)  }
  // 3. 触发事件，参数：事件名 事件参数  dispatchEvent(type, params) {    // 若没有注册该事件则抛出错误    if (!this.handlers[type]) {      return new Error('该事件未注册')    }    // 触发事件    this.handlers[type].forEach(handler => {      handler(...params)    })  }
  // 4. 事件移除，参数：事件名 要删除事件，若无第二个参数则删除该事件的订阅和发布  removeEventListener(type, handler) {    if (!this.handlers[type]) {      return new Error('事件无效')    }    if (!handler) {      // 移除事件      delete this.handlers[type]    } else {      const index = this.handlers[type].findIndex(el => el === handler)      if (index === -1) {        return new Error('无该绑定事件')      }      // 移除事件      this.handlers[type].splice(index, 1)      if (this.handlers[type].length === 0) {        delete this.handlers[type]      }    }  }}

function findMostWord(article) {  // 合法性判断  if (!article) return;  // 参数处理  article = article.trim().toLowerCase();  let wordList = article.match(/[a-z]+/g),    visited = [],    maxNum = 0,    maxWord = "";  article = " " + wordList.join("  ") + " ";  // 遍历判断单词出现次数  wordList.forEach(function(item) {    if (visited.indexOf(item) < 0) {      // 加入 visited       visited.push(item);      let word = new RegExp(" " + item + " ", "g"),        num = article.match(word).length;      if (num > maxNum) {        maxNum = num;        maxWord = item;      }    }  });  return maxWord + "  " + maxNum;}

+0 === -0  // trueNaN === NaN // false

const is= (x, y) => {  if (x === y) {    // +0和-0应该不相等    return x !== 0 || y !== 0 || 1/x === 1/y;  } else {    return x !== x && y !== y;  }}

// 模拟 instanceoffunction instance_of(L, R) {  //L 表示左表达式，R 表示右表达式  var O = R.prototype; // 取 R 的显示原型  L = L.__proto__; // 取 L 的隐式原型  while (true) {    if (L === null) return false;    if (O === L)      // 这里重点：当 O 严格等于 L 时，返回 true      return true;    L = L.__proto__;  }}

Array.prototype.filter = function(callback, thisArg) {  if (this == undefined) {    throw new TypeError('this is null or not undefined');  }  if (typeof callback !== 'function') {    throw new TypeError(callback + 'is not a function');  }  const res = [];  // 让O成为回调函数的对象传递（强制转换对象）  const O = Object(this);  // >>>0 保证len为number，且为正整数  const len = O.length >>> 0;  for (let i = 0; i < len; i++) {    // 检查i是否在O的属性（会检查原型链）    if (i in O) {      // 回调函数调用传参      if (callback.call(thisArg, O[i], i, O)) {        res.push(O[i]);      }    }  }  return res;}

setTimeout(() => {  // 插入十万条数据  const total = 100000;  // 一次插入的数据  const once = 20;  // 插入数据需要的次数  const loopCount = Math.ceil(total / once);  let countOfRender = 0;  const ul = document.querySelector('ul');  // 添加数据的方法  function add() {    const fragment = document.createDocumentFragment();    for(let i = 0; i < once; i++) {      const li = document.createElement('li');      li.innerText = Math.floor(Math.random() * total);      fragment.appendChild(li);    }    ul.appendChild(fragment);    countOfRender += 1;    loop();  }  function loop() {    if(countOfRender < loopCount) {      window.requestAnimationFrame(add);    }  }  loop();}, 0)

const SERVER_URL = "/server";let xhr = new XMLHttpRequest();// 创建 Http 请求xhr.open("GET", SERVER_URL, true);// 设置状态监听函数xhr.onreadystatechange = function() {  if (this.readyState !== 4) return;  // 当请求成功时  if (this.status === 200) {    handle(this.response);  } else {    console.error(this.statusText);  }};// 设置请求失败时的监听函数xhr.onerror = function() {  console.error(this.statusText);};// 设置请求头信息xhr.responseType = "json";xhr.setRequestHeader("Accept", "application/json");// 发送 Http 请求xhr.send(null);

// 函数节流的实现;function throttle(fn, delay) {  let curTime = Date.now();
  return function() {    let context = this,        args = arguments,        nowTime = Date.now();
    // 如果两次时间间隔超过了指定时间，则执行函数。    if (nowTime - curTime >= delay) {      curTime = Date.now();      return fn.apply(context, args);    }  };}

class Scheduler {  constructor() {    this.queue = [];    this.maxCount = 2;    this.runCounts = 0;  }  add(promiseCreator) {    this.queue.push(promiseCreator);  }  taskStart() {    for (let i = 0; i < this.maxCount; i++) {      this.request();    }  }  request() {    if (!this.queue || !this.queue.length || this.runCounts >= this.maxCount) {      return;    }    this.runCounts++;
    this.queue.shift()().then(() => {      this.runCounts--;      this.request();    });  }}
const timeout = time => new Promise(resolve => {  setTimeout(resolve, time);})
const scheduler = new Scheduler();
const addTask = (time,order) => {  scheduler.add(() => timeout(time).then(()=>console.log(order)))}

addTask(1000, '1');addTask(500, '2');addTask(300, '3');addTask(400, '4');scheduler.taskStart()// 2// 3// 1// 4

Array.prototype._map = function(fn) {   if (typeof fn !== "function") {        throw Error('参数必须是一个函数');    }    const res = [];    for (let i = 0, len = this.length; i < len; i++) {        res.push(fn(this[i]));    }    return res;}

// 二叉树深度遍历
class Node {  constructor(element, parent) {    this.parent = parent // 父节点     this.element = element // 当前存储内容    this.left = null // 左子树    this.right = null // 右子树  }}
class BST {  constructor(compare) {    this.root = null // 树根    this.size = 0 // 树中的节点个数
    this.compare = compare || this.compare  }  compare(a,b) {    return a - b  }  add(element) {    if(this.root === null) {      this.root = new Node(element, null)      this.size++      return    }    // 获取根节点 用当前添加的进行判断 放左边还是放右边    let currentNode = this.root     let compare    let parent = null     while (currentNode) {      compare = this.compare(element, currentNode.element)      parent = currentNode // 先将父亲保存起来      // currentNode要不停的变化      if(compare > 0) {        currentNode = currentNode.right      } else if(compare < 0) {        currentNode = currentNode.left      } else {        currentNode.element = element // 相等时 先覆盖后续处理      }    }
    let newNode = new Node(element, parent)    if(compare > 0) {      parent.right = newNode    } else if(compare < 0) {      parent.left = newNode    }
    this.size++  }  // 前序遍历  preorderTraversal(visitor) {    const traversal = node=>{      if(node === null) return       visitor.visit(node.element)      traversal(node.left)      traversal(node.right)    }    traversal(this.root)  }  // 中序遍历  inorderTraversal(visitor) {    const traversal = node=>{      if(node === null) return       traversal(node.left)      visitor.visit(node.element)      traversal(node.right)    }    traversal(this.root)  }  // 后序遍历  posterorderTraversal(visitor) {    const traversal = node=>{      if(node === null) return       traversal(node.left)      traversal(node.right)      visitor.visit(node.element)    }    traversal(this.root)  }  // 反转二叉树：无论先序、中序、后序、层级都可以反转  invertTree() {    const traversal = node=>{      if(node === null) return       let temp = node.left       node.left = node.right       node.right = temp      traversal(node.left)      traversal(node.right)    }    traversal(this.root)    return this.root  }}

// 测试var bst = new BST((a,b)=>a.age-b.age) // 模拟sort方法
bst.add({age: 10})bst.add({age: 8})bst.add({age:19})bst.add({age:6})bst.add({age: 15})bst.add({age: 22})bst.add({age: 20})
// 先序遍历// console.log(bst.preorderTraversal(),'先序遍历')// console.log(bst.inorderTraversal(),'中序遍历')// ![](http://img-repo.poetries.top/images/20210522214837.png)// console.log(bst.posterorderTraversal(),'后序遍历')

// 深度遍历：先序遍历、中序遍历、后续遍历// 广度遍历：层次遍历（同层级遍历）// 都可拿到树中的节点
// 使用访问者模式class Visitor {  constructor() {    this.visit = function (elem) {      elem.age = elem.age*2    }  }}
// bst.posterorderTraversal({//   visit(elem) {//     elem.age = elem.age*10//   }// })
// 不能通过索引操作 拿到节点去操作// bst.posterorderTraversal(new Visitor())
console.log(bst.invertTree(),'反转二叉树')

<style>  html, body {    margin: 0;    height: 100%;  }  #box {    width: 100px;    height: 100px;    background-color: red;    position: absolute;    top: 100px;    left: 100px;  }</style>

<div id="box"></div>

window.onload = function () {  var box = document.getElementById('box');  box.onmousedown = function (ev) {    var oEvent = ev || window.event; // 兼容火狐,火狐下没有window.event    var distanceX = oEvent.clientX - box.offsetLeft; // 鼠标到可视区左边的距离 - box到页面左边的距离    var distanceY = oEvent.clientY - box.offsetTop;    document.onmousemove = function (ev) {      var oEvent = ev || window.event;      var left = oEvent.clientX - distanceX;      var top = oEvent.clientY - distanceY;      if (left <= 0) {        left = 0;      } else if (left >= document.documentElement.clientWidth - box.offsetWidth) {        left = document.documentElement.clientWidth - box.offsetWidth;      }      if (top <= 0) {        top = 0;      } else if (top >= document.documentElement.clientHeight - box.offsetHeight) {        top = document.documentElement.clientHeight - box.offsetHeight;      }      box.style.left = left + 'px';      box.style.top = top + 'px';    }    box.onmouseup = function () {      document.onmousemove = null;      box.onmouseup = null;    }  }}

// 二叉搜索树
class Node {  constructor(element, parent) {    this.parent = parent // 父节点     this.element = element // 当前存储内容    this.left = null // 左子树    this.right = null // 右子树  }}
class BST {  constructor(compare) {    this.root = null // 树根    this.size = 0 // 树中的节点个数
    this.compare = compare || this.compare  }  compare(a,b) {    return a - b  }  add(element) {    if(this.root === null) {      this.root = new Node(element, null)      this.size++      return    }    // 获取根节点 用当前添加的进行判断 放左边还是放右边    let currentNode = this.root     let compare    let parent = null     while (currentNode) {      compare = this.compare(element, currentNode.element)      parent = currentNode // 先将父亲保存起来      // currentNode要不停的变化      if(compare > 0) {        currentNode = currentNode.right      } else if(compare < 0) {        currentNode = currentNode.left      } else {        currentNode.element = element // 相等时 先覆盖后续处理      }    }
    let newNode = new Node(element, parent)    if(compare > 0) {      parent.right = newNode    } else if(compare < 0) {      parent.left = newNode    }
    this.size++  }}

// 测试var bst = new BST((a,b)=>b.age-a.age) // 模拟sort方法
bst.add({age: 10})bst.add({age: 8})bst.add({age:19})bst.add({age:20})bst.add({age: 5})
console.log(bst)

function getType(obj) {   if (obj === null) return String(obj);   return typeof obj === 'object'    ? Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase()   : typeof obj;}
// 调用getType(null); // -> nullgetType(undefined); // -> undefinedgetType({}); // -> objectgetType([]); // -> arraygetType(123); // -> numbergetType(true); // -> booleangetType('123'); // -> stringgetType(/123/); // -> regexpgetType(new Date()); // -> date

// 模拟 call bar.mycall(null);//实现一个call方法：Function.prototype.myCall = function(context) {  //此处没有考虑context非object情况  context.fn = this;  let args = [];  for (let i = 1, len = arguments.length; i < len; i++) {    args.push(arguments[i]);  }  context.fn(...args);  let result = context.fn(...args);  delete context.fn;  return result;};