前端 js 手写面试题看这篇就够了

2022-11-10
浙江
本文字数：13952 字
阅读完需：约 46 分钟

实现一个 JSON.stringify

JSON.stringify(value[, replacer [, space]])：

复制代码

Boolean | Number| String类型会自动转换成对应的原始值。
undefined、任意函数以及symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。
不可枚举的属性会被忽略如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略
如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略

function jsonStringify(obj) {    let type = typeof obj;    if (type !== "object") {        if (/string|undefined|function/.test(type)) {            obj = '"' + obj + '"';        }        return String(obj);    } else {        let json = []        let arr = Array.isArray(obj)        for (let k in obj) {            let v = obj[k];            let type = typeof v;            if (/string|undefined|function/.test(type)) {                v = '"' + v + '"';            } else if (type === "object") {                v = jsonStringify(v);            }            json.push((arr ? "" : '"' + k + '":') + String(v));        }        return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")    }}jsonStringify({x : 5}) // "{"x":5}"jsonStringify([1, "false", false]) // "[1,"false",false]"jsonStringify({b: undefined}) // "{"b":"undefined"}"

复制代码

手写 Promise

const PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected";
function MyPromise(fn) {  // 保存初始化状态  var self = this;
  // 初始化状态  this.state = PENDING;
  // 用于保存 resolve 或者 rejected 传入的值  this.value = null;
  // 用于保存 resolve 的回调函数  this.resolvedCallbacks = [];
  // 用于保存 reject 的回调函数  this.rejectedCallbacks = [];
  // 状态转变为 resolved 方法  function resolve(value) {    // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变    if (value instanceof MyPromise) {      return value.then(resolve, reject);    }
    // 保证代码的执行顺序为本轮事件循环的末尾    setTimeout(() => {      // 只有状态为 pending 时才能转变，      if (self.state === PENDING) {        // 修改状态        self.state = RESOLVED;
        // 设置传入的值        self.value = value;
        // 执行回调函数        self.resolvedCallbacks.forEach(callback => {          callback(value);        });      }    }, 0);  }
  // 状态转变为 rejected 方法  function reject(value) {    // 保证代码的执行顺序为本轮事件循环的末尾    setTimeout(() => {      // 只有状态为 pending 时才能转变      if (self.state === PENDING) {        // 修改状态        self.state = REJECTED;
        // 设置传入的值        self.value = value;
        // 执行回调函数        self.rejectedCallbacks.forEach(callback => {          callback(value);        });      }    }, 0);  }
  // 将两个方法传入函数执行  try {    fn(resolve, reject);  } catch (e) {    // 遇到错误时，捕获错误，执行 reject 函数    reject(e);  }}
MyPromise.prototype.then = function(onResolved, onRejected) {  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数  onResolved =    typeof onResolved === "function"      ? onResolved      : function(value) {          return value;        };
  onRejected =    typeof onRejected === "function"      ? onRejected      : function(error) {          throw error;        };
  // 如果是等待状态，则将函数加入对应列表中  if (this.state === PENDING) {    this.resolvedCallbacks.push(onResolved);    this.rejectedCallbacks.push(onRejected);  }
  // 如果状态已经凝固，则直接执行对应状态的函数
  if (this.state === RESOLVED) {    onResolved(this.value);  }
  if (this.state === REJECTED) {    onRejected(this.value);  }};

复制代码

实现 Promise

var PromisePolyfill = (function () {  // 和reject不同的是resolve需要尝试展开thenable对象  function tryToResolve (value) {    if (this === value) {    // 主要是防止下面这种情况    // let y = new Promise(res => setTimeout(res(y)))      throw TypeError('Chaining cycle detected for promise!')    }
    // 根据规范2.32以及2.33 对对象或者函数尝试展开    // 保证S6之前的 polyfill 也能和ES6的原生promise混用    if (value !== null &&      (typeof value === 'object' || typeof value === 'function')) {      try {      // 这里记录这次then的值同时要被try包裹      // 主要原因是 then 可能是一个getter, 也也就是说      //   1. value.then可能报错      //   2. value.then可能产生副作用(例如多次执行可能结果不同)        var then = value.then
        // 另一方面, 由于无法保证 then 确实会像预期的那样只调用一个onFullfilled / onRejected        // 所以增加了一个flag来防止resolveOrReject被多次调用        var thenAlreadyCalledOrThrow = false        if (typeof then === 'function') {        // 是thenable 那么尝试展开        // 并且在该thenable状态改变之前this对象的状态不变          then.bind(value)(          // onFullfilled            function (value2) {              if (thenAlreadyCalledOrThrow) return              thenAlreadyCalledOrThrow = true              tryToResolve.bind(this, value2)()            }.bind(this),
            // onRejected            function (reason2) {              if (thenAlreadyCalledOrThrow) return              thenAlreadyCalledOrThrow = true              resolveOrReject.bind(this, 'rejected', reason2)()            }.bind(this)          )        } else {        // 拥有then 但是then不是一个函数 所以也不是thenable          resolveOrReject.bind(this, 'resolved', value)()        }      } catch (e) {        if (thenAlreadyCalledOrThrow) return        thenAlreadyCalledOrThrow = true        resolveOrReject.bind(this, 'rejected', e)()      }    } else {    // 基本类型 直接返回      resolveOrReject.bind(this, 'resolved', value)()    }  }
  function resolveOrReject (status, data) {    if (this.status !== 'pending') return    this.status = status    this.data = data    if (status === 'resolved') {      for (var i = 0; i < this.resolveList.length; ++i) {        this.resolveList[i]()      }    } else {      for (i = 0; i < this.rejectList.length; ++i) {        this.rejectList[i]()      }    }  }
  function Promise (executor) {    if (!(this instanceof Promise)) {      throw Error('Promise can not be called without new !')    }
    if (typeof executor !== 'function') {    // 非标准 但与Chrome谷歌保持一致      throw TypeError('Promise resolver ' + executor + ' is not a function')    }
    this.status = 'pending'    this.resolveList = []    this.rejectList = []
    try {      executor(tryToResolve.bind(this), resolveOrReject.bind(this, 'rejected'))    } catch (e) {      resolveOrReject.bind(this, 'rejected', e)()    }  }
  Promise.prototype.then = function (onFullfilled, onRejected) {  // 返回值穿透以及错误穿透, 注意错误穿透用的是throw而不是return，否则的话  // 这个then返回的promise状态将变成resolved即接下来的then中的onFullfilled  // 会被调用, 然而我们想要调用的是onRejected    if (typeof onFullfilled !== 'function') {      onFullfilled = function (data) {        return data      }    }    if (typeof onRejected !== 'function') {      onRejected = function (reason) {        throw reason      }    }
    var executor = function (resolve, reject) {      setTimeout(function () {        try {        // 拿到对应的handle函数处理this.data        // 并以此为依据解析这个新的Promise          var value = this.status === 'resolved'            ? onFullfilled(this.data)            : onRejected(this.data)          resolve(value)        } catch (e) {          reject(e)        }      }.bind(this))    }
    // then 接受两个函数返回一个新的Promise    // then 自身的执行永远异步与onFullfilled/onRejected的执行    if (this.status !== 'pending') {      return new Promise(executor.bind(this))    } else {    // pending      return new Promise(function (resolve, reject) {        this.resolveList.push(executor.bind(this, resolve, reject))        this.rejectList.push(executor.bind(this, resolve, reject))      }.bind(this))    }  }
  // for prmise A+ test  Promise.deferred = Promise.defer = function () {    var dfd = {}    dfd.promise = new Promise(function (resolve, reject) {      dfd.resolve = resolve      dfd.reject = reject    })    return dfd  }
  // for prmise A+ test  if (typeof module !== 'undefined') {    module.exports = Promise  }
  return Promise})()
PromisePolyfill.all = function (promises) {  return new Promise((resolve, reject) => {    const result = []    let cnt = 0    for (let i = 0; i < promises.length; ++i) {      promises[i].then(value => {        cnt++        result[i] = value        if (cnt === promises.length) resolve(result)      }, reject)    }  })}
PromisePolyfill.race = function (promises) {  return new Promise((resolve, reject) => {    for (let i = 0; i < promises.length; ++i) {      promises[i].then(resolve, reject)    }  })}

复制代码

函数柯里化的实现

函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

function curry(fn, args) {  // 获取函数需要的参数长度  let length = fn.length;
  args = args || [];
  return function() {    let subArgs = args.slice(0);
    // 拼接得到现有的所有参数    for (let i = 0; i < arguments.length; i++) {      subArgs.push(arguments[i]);    }
    // 判断参数的长度是否已经满足函数所需参数的长度    if (subArgs.length >= length) {      // 如果满足，执行函数      return fn.apply(this, subArgs);    } else {      // 如果不满足，递归返回科里化的函数，等待参数的传入      return curry.call(this, fn, subArgs);    }  };}
// es6 实现function curry(fn, ...args) {  return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);}

复制代码

参考：前端手写面试题详细解答

字符串出现的不重复最长长度

用一个滑动窗口装没有重复的字符，枚举字符记录最大值即可。用 map 维护字符的索引，遇到相同的字符，把左边界移动过去即可。挪动的过程中记录最大长度：

var lengthOfLongestSubstring = function (s) {    let map = new Map();    let i = -1    let res = 0    let n = s.length    for (let j = 0; j < n; j++) {        if (map.has(s[j])) {            i = Math.max(i, map.get(s[j]))        }        res = Math.max(res, j - i)        map.set(s[j], j)    }    return res};

复制代码

实现 add(1)(2)(3)

函数柯里化概念：柯里化（Currying）是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。

1）粗暴版

function add (a) {return function (b) {     return function (c) {      return a + b + c;     }}}console.log(add(1)(2)(3)); // 6

复制代码

2）柯里化解决方案

参数长度固定

var add = function (m) {  var temp = function (n) {    return add(m + n);  }  temp.toString = function () {    return m;  }  return temp;};console.log(add(3)(4)(5)); // 12console.log(add(3)(6)(9)(25)); // 43

复制代码

对于 add(3)(4)(5)，其执行过程如下：

先执行 add(3)，此时 m=3，并且返回 temp 函数；
执行 temp(4)，这个函数内执行 add(m+n)，n 是此次传进来的数值 4，m 值还是上一步中的 3，所以 add(m+n)=add(3+4)=add(7)，此时 m=7，并且返回 temp 函数
执行 temp(5)，这个函数内执行 add(m+n)，n 是此次传进来的数值 5，m 值还是上一步中的 7，所以 add(m+n)=add(7+5)=add(12)，此时 m=12，并且返回 temp 函数
由于后面没有传入参数，等于返回的 temp 函数不被执行而是打印，了解 JS 的朋友都知道对象的 toString 是修改对象转换字符串的方法，因此代码中 temp 函数的 toString 函数 return m 值，而 m 值是最后一步执行函数时的值 m=12，所以返回值是 12。

参数长度不固定

function add (...args) {    //求和    return args.reduce((a, b) => a + b)}function currying (fn) {    let args = []    return function temp (...newArgs) {        if (newArgs.length) {            args = [                ...args,                ...newArgs            ]            return temp        } else {            let val = fn.apply(this, args)            args = [] //保证再次调用时清空            return val        }    }}let addCurry = currying(add)console.log(addCurry(1)(2)(3)(4, 5)())  //15console.log(addCurry(1)(2)(3, 4, 5)())  //15console.log(addCurry(1)(2, 3, 4, 5)())  //15

复制代码

Object.is

Object.is解决的主要是这两个问题：

+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;  }}

复制代码

使用 setTimeout 实现 setInterval

setInterval 的作用是每隔一段指定时间执行一个函数，但是这个执行不是真的到了时间立即执行，它真正的作用是每隔一段时间将事件加入事件队列中去，只有当当前的执行栈为空的时候，才能去从事件队列中取出事件执行。所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能到间隔一段时间执行的效果。

针对 setInterval 的这个缺点，我们可以使用 setTimeout 递归调用来模拟 setInterval，这样我们就确保了只有一个事件结束了，我们才会触发下一个定时器事件，这样解决了 setInterval 的问题。

实现思路是使用递归函数，不断地去执行 setTimeout 从而达到 setInterval 的效果

function mySetInterval(fn, timeout) {  // 控制器，控制定时器是否继续执行  var timer = {    flag: true  };  // 设置递归函数，模拟定时器执行。  function interval() {    if (timer.flag) {      fn();      setTimeout(interval, timeout);    }  }  // 启动定时器  setTimeout(interval, timeout);  // 返回控制器  return timer;}

复制代码

图片懒加载

可以给 img 标签统一自定义属性data-src='default.png'，当检测到图片出现在窗口之后再补充 src 属性，此时才会进行图片资源加载。

function lazyload() {  const imgs = document.getElementsByTagName('img');  const len = imgs.length;  // 视口的高度  const viewHeight = document.documentElement.clientHeight;  // 滚动条高度  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;  for (let i = 0; i < len; i++) {    const offsetHeight = imgs[i].offsetTop;    if (offsetHeight < viewHeight + scrollHeight) {      const src = imgs[i].dataset.src;      imgs[i].src = src;    }  }}
// 可以使用节流优化一下window.addEventListener('scroll', lazyload);

复制代码

AJAX

const getJSON = function(url) {  return new Promise((resolve, reject) => {    const xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Mscrosoft.XMLHttp');    xhr.open('GET', url, false);    xhr.setRequestHeader('Accept', 'application/json');    xhr.onreadystatechange = function() {      if (xhr.readyState !== 4) return;      if (xhr.status === 200 || xhr.status === 304) {        resolve(xhr.responseText);      } else {        reject(new Error(xhr.responseText));      }    }    xhr.send();  })}

复制代码

交换 a,b 的值，不能用临时变量

巧妙的利用两个数的和、差：

a = a + bb = a - ba = a - b

复制代码

小孩报数问题

有 30 个小孩儿，编号从 1-30，围成一圈依此报数，1、2、3 数到 3 的小孩儿退出这个圈，然后下一个小孩重新报数 1、2、3，问最后剩下的那个小孩儿的编号是多少?

function childNum(num, count){    let allplayer = [];        for(let i = 0; i < num; i++){        allplayer[i] = i + 1;    }
    let exitCount = 0;    // 离开人数    let counter = 0;      // 记录报数    let curIndex = 0;     // 当前下标
    while(exitCount < num - 1){        if(allplayer[curIndex] !== 0) counter++;    
        if(counter == count){            allplayer[curIndex] = 0;                             counter = 0;            exitCount++;          }        curIndex++;        if(curIndex == num){            curIndex = 0                       };               }        for(i = 0; i < num; i++){        if(allplayer[i] !== 0){            return allplayer[i]        }          }}childNum(30, 3)

复制代码

实现一个 add 方法完成两个大数相加

// 题目let a = "9007199254740991";let b = "1234567899999999999";
function add(a ,b){   //...}

复制代码

实现代码如下:

function add(a ,b){   //取两个数字的最大长度   let maxLength = Math.max(a.length, b.length);   //用0去补齐长度   a = a.padStart(maxLength , 0);//"0009007199254740991"   b = b.padStart(maxLength , 0);//"1234567899999999999"   //定义加法过程中需要用到的变量   let t = 0;   let f = 0;   //"进位"   let sum = "";   for(let i=maxLength-1 ; i>=0 ; i--){      t = parseInt(a[i]) + parseInt(b[i]) + f;      f = Math.floor(t/10);      sum = t%10 + sum;   }   if(f!==0){      sum = '' + f + sum;   }   return sum;}

复制代码

设计一个方法提取对象中所有 value 大于 2 的键值对并返回最新的对象

实现：

var obj = { a: 1, b: 3, c: 4 }foo(obj) // { b: 3, c: 4 }

复制代码

方法有很多种，这里提供一种比较简洁的写法，用到了ES10的Object.fromEntries()：

var obj = { a: 1, b: 3, c: 4 }function foo (obj) {  return Object.fromEntries(    Object.entries(obj).filter(([key, value]) => value > 2)  )}var obj2 = foo(obj) // { b: 3, c: 4 }console.log(obj2)

复制代码

// ES8中 Object.entries()的作用：var obj = { a: 1, b: 2 }var entries = Object.entries(obj); // [['a', 1], ['b', 2]]// ES10中 Object.fromEntries()的作用：Object.fromEntries(entries); // { a: 1, b: 2 }

复制代码

手写常见排序

冒泡排序

冒泡排序的原理如下，从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操作，但是此时最后一个元素已经是最大数了，所以不需要再比较最后一个元素，只需要比较到 length - 1 的位置。

function bubbleSort(list) {  var n = list.length;  if (!n) return [];
  for (var i = 0; i < n; i++) {    // 注意这里需要 n - i - 1    for (var j = 0; j < n - i - 1; j++) {      if (list[j] > list[j + 1]) {        var temp = list[j + 1];        list[j + 1] = list[j];        list[j] = temp;      }    }  }  return list;}

复制代码

快速排序

快排的原理如下。随机选取一个数组中的值作为基准值，从左至右取值与基准值对比大小。比基准值小的放数组左边，大的放右边，对比完成后将基准值和第一个比基准值大的值交换位置。然后将数组以基准值的位置分为两部分，继续递归以上操作

ffunction quickSort(arr) {  if (arr.length<=1){    return arr;  }  var baseIndex = Math.floor(arr.length/2);//向下取整，选取基准点  var base = arr.splice(baseIndex,1)[0];//取出基准点的值，  // splice 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。  // slice方法返回一个新的数组对象,不会更改原数组  //这里不能直接base=arr[baseIndex],因为base代表的每次都删除的那个数  var left=[];  var right=[];  for (var i = 0; i<arr.length; i++){    // 这里的length是变化的，因为splice会改变原数组。    if (arr[i] < base){      left.push(arr[i]);//比基准点小的放在左边数组，    }  }else{    right.push(arr[i]);//比基准点大的放在右边数组，  }  return quickSort(left).concat([base],quickSort(right));}

复制代码

选择排序

function selectSort(arr) {  // 缓存数组长度  const len = arr.length;  // 定义 minIndex，缓存当前区间最小值的索引，注意是索引  let minIndex;  // i 是当前排序区间的起点  for (let i = 0; i < len - 1; i++) {    // 初始化 minIndex 为当前区间第一个元素    minIndex = i;    // i、j分别定义当前区间的上下界，i是左边界，j是右边界    for (let j = i; j < len; j++) {      // 若 j 处的数据项比当前最小值还要小，则更新最小值索引为 j      if (arr[j] < arr[minIndex]) {        minIndex = j;      }    }    // 如果 minIndex 对应元素不是目前的头部元素，则交换两者    if (minIndex !== i) {      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];    }  }  return arr;}// console.log(selectSort([3, 6, 2, 4, 1]));

复制代码

插入排序

function insertSort(arr) {  for (let i = 1; i < arr.length; i++) {    let j = i;    let target = arr[j];    while (j > 0 && arr[j - 1] > target) {      arr[j] = arr[j - 1];      j--;    }    arr[j] = target;  }  return arr;}// console.log(insertSort([3, 6, 2, 4, 1]));

复制代码

实现深拷贝

浅拷贝： 浅拷贝指的是将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型的引用。浅拷贝可以使用 Object.assign 和展开运算符来实现。
深拷贝： 深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。深拷贝对于一些对象可以使用 JSON 的两个函数来实现，但是由于 JSON 的对象格式比 js 的对象格式更加严格，所以如果属性值里边出现函数或者 Symbol 类型的值时，会转换失败

（1）JSON.stringify()

JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一，它的原理就是利用JSON.stringify 将js对象序列化（JSON 字符串），再使用JSON.parse来反序列化(还原)js对象。
这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过JSON.stringify()进行处理之后，都会消失。

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}}

复制代码

（2）函数库 lodash 的_.cloneDeep 方法

该函数库也有提供_.cloneDeep 用来做 Deep Copy

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

复制代码

（3）手写实现深拷贝函数

// 深拷贝的实现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;}

复制代码

Object.assign

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（请注意这个操作是浅拷贝）

Object.defineProperty(Object, 'assign', {  value: function(target, ...args) {    if (target == null) {      return new TypeError('Cannot convert undefined or null to object');    }
    // 目标对象需要统一是引用数据类型，若不是会自动转换    const to = Object(target);
    for (let i = 0; i < args.length; i++) {      // 每一个源对象      const nextSource = args[i];      if (nextSource !== null) {        // 使用for...in和hasOwnProperty双重判断，确保只拿到本身的属性、方法（不包含继承的）        for (const nextKey in nextSource) {          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {            to[nextKey] = nextSource[nextKey];          }        }      }    }    return to;  },  // 不可枚举  enumerable: false,  writable: true,  configurable: true,})

复制代码

实现一个简易的 MVVM

实现一个简易的MVVM我会分为这么几步来：

首先我会定义一个类Vue，这个类接收的是一个options，那么其中可能有需要挂载的根元素的id，也就是el属性；然后应该还有一个data属性，表示需要双向绑定的数据
其次我会定义一个Dep类，这个类产生的实例对象中会定义一个subs数组用来存放所依赖这个属性的依赖，已经添加依赖的方法addSub，删除方法removeSub，还有一个notify方法用来遍历更新它subs中的所有依赖，同时 Dep 类有一个静态属性target它用来表示当前的观察者，当后续进行依赖收集的时候可以将它添加到dep.subs中。
然后设计一个observe方法，这个方法接收的是传进来的data，也就是options.data，里面会遍历data中的每一个属性，并使用Object.defineProperty()来重写它的get和set，那么这里面呢可以使用new Dep()实例化一个dep对象，在get的时候调用其addSub方法添加当前的观察者Dep.target完成依赖收集，并且在set的时候调用dep.notify方法来通知每一个依赖它的观察者进行更新
完成这些之后，我们还需要一个compile方法来将 HTML 模版和数据结合起来。在这个方法中首先传入的是一个node节点，然后遍历它的所有子级，判断是否有firstElmentChild，有的话则进行递归调用 compile 方法，没有firstElementChild的话且该child.innderHTML用正则匹配满足有/\{\{(.*)\}\}/项的话则表示有需要双向绑定的数据，那么就将用正则new Reg('\\{\\{\\s*' + key + '\\s*\\}\\}', 'gm')替换掉是其为msg变量。
完成变量替换的同时，还需要将Dep.target指向当前的这个child，且调用一下this.opt.data[key]，也就是为了触发这个数据的get来对当前的child进行依赖收集，这样下次数据变化的时候就能通知child进行视图更新了，不过在最后要记得将Dep.target指为null哦(其实在Vue中是有一个targetStack栈用来存放target的指向的)
那么最后我们只需要监听document的DOMContentLoaded然后在回调函数中实例化这个Vue对象就可以了

coding :

需要注意的点：

childNodes会获取到所有的子节点以及文本节点(包括元素标签中的空白节点)
firstElementChild表示获取元素的第一个字元素节点，以此来区分是不是元素节点，如果是的话则调用compile进行递归调用，否则用正则匹配
这里面的正则真的不难，大家可以看一下

完整代码如下：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>MVVM</title>  </head>  <body>    <div id="app">      <h3>姓名</h3>      <p>{{name}}</p>      <h3>年龄</h3>      <p>{{age}}</p>    </div>  </body></html><script>  document.addEventListener(    "DOMContentLoaded",    function () {      let opt = { el: "#app", data: { name: "等待修改...", age: 20 } };      let vm = new Vue(opt);      setTimeout(() => {        opt.data.name = "jing";      }, 2000);    },    false  );  class Vue {    constructor(opt) {      this.opt = opt;      this.observer(opt.data);      let root = document.querySelector(opt.el);      this.compile(root);    }    observer(data) {      Object.keys(data).forEach((key) => {        let obv = new Dep();        data["_" + key] = data[key];
        Object.defineProperty(data, key, {          get() {            Dep.target && obv.addSubNode(Dep.target);            return data["_" + key];          },          set(newVal) {            obv.update(newVal);            data["_" + key] = newVal;          },        });      });    }    compile(node) {      [].forEach.call(node.childNodes, (child) => {        if (!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)) {          let key = RegExp.$1.trim();          child.innerHTML = child.innerHTML.replace(            new RegExp("\\{\\{\\s*" + key + "\\s*\\}\\}", "gm"),            this.opt.data[key]          );          Dep.target = child;          this.opt.data[key];          Dep.target = null;        } else if (child.firstElementChild) this.compile(child);      });    }  }
  class Dep {    constructor() {      this.subNode = [];    }    addSubNode(node) {      this.subNode.push(node);    }    update(newVal) {      this.subNode.forEach((node) => {        node.innerHTML = newVal;      });    }  }</script>

复制代码

简化版 2

function update(){  console.log('数据变化~~~ mock update view')}let obj = [1,2,3]// 变异方法 push shift unshfit reverse sort splice pop// Object.definePropertylet oldProto = Array.prototype;let proto = Object.create(oldProto); // 克隆了一分['push','shift'].forEach(item=>{  proto[item] = function(){    update();    oldProto[item].apply(this,arguments);  }})function observer(value){ // proxy reflect  if(Array.isArray(value)){    // AOP    return value.__proto__ = proto;    // 重写 这个数组里的push shift unshfit reverse sort splice pop  }  if(typeof value !== 'object'){    return value;  }  for(let key in value){    defineReactive(value,key,value[key]);  }}function defineReactive(obj,key,value){  observer(value); // 如果是对象 继续增加getter和setter  Object.defineProperty(obj,key,{    get(){        return value;    },    set(newValue){        if(newValue !== value){            observer(newValue);            value = newValue;            update();        }    }  })}observer(obj); // AOP// obj.name = {n:200}; // 数据变了 需要更新视图 深度监控// obj.name.n = 100;obj.push(123);obj.push(456);console.log(obj);

复制代码

实现一个函数判断数据类型

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

复制代码

Promise.all

Promise.all是支持链式调用的，本质上就是返回了一个 Promise 实例，通过resolve和reject来改变实例状态。

Promise.myAll = function(promiseArr) {  return new Promise((resolve, reject) => {    const ans = [];    let index = 0;    for (let i = 0; i < promiseArr.length; i++) {      promiseArr[i]      .then(res => {        ans[i] = res;        index++;        if (index === promiseArr.length) {          resolve(ans);        }      })      .catch(err => reject(err));    }  })}

复制代码

发布于: 刚刚阅读数: 2

helloworld1024fd

关注

还未添加个人签名 2022-07-31 加入

还未添加个人简介

发布

暂无评论

创作场景

前端 js 手写面试题看这篇就够了

实现一个 JSON.stringify

手写 Promise

实现 Promise

函数柯里化的实现

字符串出现的不重复最长长度

实现 add(1)(2)(3)

Object.is

使用 setTimeout 实现 setInterval

图片懒加载

AJAX

交换 a,b 的值，不能用临时变量

小孩报数问题

实现一个 add 方法完成两个大数相加

设计一个方法提取对象中所有 value 大于 2 的键值对并返回最新的对象

手写常见排序

冒泡排序

快速排序

选择排序

插入排序

实现深拷贝

（1）JSON.stringify()

（2）函数库 lodash 的_.cloneDeep 方法

（3）手写实现深拷贝函数

Object.assign

实现一个简易的 MVVM

实现一个函数判断数据类型

Promise.all

helloworld1024fd

评论