关于javascript:前端常考手写面试题汇总

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

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); // -> null
getType(undefined); // -> undefined
getType({}); // -> object
getType([]); // -> array
getType(123); // -> number
getType(true); // -> boolean
getType('123'); // -> string
getType(/123/); // -> regexp
getType(new Date()); // -> date

字符串查找

请应用最根本的遍从来实现判断字符串 a 是否被蕴含在字符串 b 中，并返回第一次呈现的地位（找不到返回 -1）。

a='34';b='1234567'; // 返回 2
a='35';b='1234567'; // 返回 -1
a='355';b='12354355'; // 返回 5
isContain(a,b);

function isContain(a, b) {for (let i in b) {if (a[0] === b[i]) {
      let tmp = true;
      for (let j in a) {if (a[j] !== b[~~i + ~~j]) {tmp = false;}
      }
      if (tmp) {return i;}
    }
  }
  return -1;
}

实现千位分隔符

// 保留三位小数
parseToMoney(1234.56); // return '1,234.56'
parseToMoney(123456789); // return '123,456,789'
parseToMoney(1087654.321); // return '1,087,654.321'

function parseToMoney(num) {num = parseFloat(num.toFixed(3));
  let [integer, decimal] = String.prototype.split.call(num, '.');
  integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,');
  return integer + '.' + (decimal ? decimal : '');
}

实现 (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;
};

实现 add(1)(2) =3

// 题意的答案
const add = (num1) => (num2)=> num2 + num1;

// 整了一个加强版 能够有限链式调用 add(1)(2)(3)(4)(5)....
function add(x) {
  // 存储和
  let sum = x;

  // 函数调用会相加，而后每次都会返回这个函数自身
  let tmp = function (y) {
    sum = sum + y;
    return tmp;
  };

  // 对象的 toString 必须是一个办法 在办法中返回了这个和
  tmp.toString = () => sum
  return tmp;
}

alert(add(1)(2)(3)(4)(5))

有限链式调用实现的关键在于 对象的 toString 办法 : 每个对象都有一个 toString() 办法，当该对象被示意为一个文本值时，或者一个对象以预期的字符串形式援用时主动调用。

也就是我在调用很屡次后，他们的后果会存在 add 函数中的 sum 变量上，当我 alert 的时候 add会主动调用 toString办法 打印出 sum, 也就是最终的后果

验证是否是邮箱

function isEmail(email) {var regx = /^([a-zA-Z0-9_\-])[email protected]([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
    return regx.test(email);
}

创立 10 个标签，点击的时候弹出来对应的序号

var a
for(let i=0;i<10;i++){a=document.createElement('a')
 a.innerHTML=i+'<br>'
 a.addEventListener('click',function(e){console.log(this)  //this 为以后点击的 <a>
     e.preventDefault()  // 如果调用这个办法，默认事件行为将不再触发。// 例如，在执行这个办法后，如果点击一个链接（a 标签），浏览器不会跳转到新的 URL 去了。咱们能够用 event.isDefaultPrevented() 来确定这个办法是否 (在那个事件对象上) 被调用过了。alert(i)
 })
 const d=document.querySelector('div')
 d.appendChild(a)  //append 向一个已存在的元素追加该元素。}

查找数组公共前缀（美团）

题目形容

编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 ""。示例 1：输出：strs = ["flower","flow","flight"]
输入："fl"

示例 2：输出：strs = ["dog","racecar","car"]
输入：""
解释：输出不存在公共前缀。

答案

const longestCommonPrefix = function (strs) {const str = strs[0];
  let index = 0;
  while (index < str.length) {const strCur = str.slice(0, index + 1);
    for (let i = 0; i < strs.length; i++) {if (!strs[i] || !strs[i].startsWith(strCur)) {return str.slice(0, index);
      }
    }
    index++;
  }
  return str;
};

参考：前端手写面试题具体解答

手写常见排序

冒泡排序

冒泡排序的原理如下，从第一个元素开始，把以后元素和下一个索引元素进行比拟。如果以后元素大，那么就替换地位，反复操作直到比拟到最初一个元素，那么此时最初一个元素就是该数组中最大的数。下一轮反复以上操作，然而此时最初一个元素曾经是最大数了，所以不须要再比拟最初一个元素，只须要比拟到 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]));

递归反转链表

// node 节点
class Node {constructor(element,next) {
    this.element = element
    this.next = next
  } 
}

class LinkedList {constructor() {
   this.head = null // 默认应该指向第一个节点
   this.size = 0 // 通过这个长度能够遍历这个链表
 }
 // 减少 O(n)
 add(index,element) {if(arguments.length === 1) {
     // 向开端增加
     element = index // 以后元素等于传递的第一项
     index = this.size // 索引指向最初一个元素
   }
  if(index < 0 || index > this.size) {throw new Error('增加的索引不失常')
  }
  if(index === 0) {
    // 间接找到头部 把头部改掉 性能更好
    let head = this.head
    this.head = new Node(element,head)
  } else {
    // 获取以后头指针
    let current = this.head
    // 不停遍历 直到找到最初一项 增加的索引是 1 就找到第 0 个的 next 赋值
    for (let i = 0; i < index-1; i++) { // 找到它的前一个
      current = current.next
    }
    // 让创立的元素指向上一个元素的下一个
    // 看图了解 next 层级 ![](http://img-repo.poetries.top/images/20210522115056.png)
    current.next = new Node(element,current.next) // 让以后元素指向下一个元素的 next
  }

  this.size++;
 }
 // 删除 O(n)
 remove(index) {if(index < 0 || index >= this.size) {throw new Error('删除的索引不失常')
  }
  this.size--
  if(index === 0) {
    let head = this.head
    this.head = this.head.next // 挪动指针地位

    return head // 返回删除的元素
  }else {
    let current = this.head
    for (let i = 0; i < index-1; i++) { // index- 1 找到它的前一个
      current = current.next
    }
    let returnVal = current.next // 返回删除的元素
    // 找到待删除的指针的上一个 current.next.next 
    // 如删除 200，100=>200=>300 找到 200 的上一个 100 的 next 的 next 为 300，把 300 赋值给 100 的 next 即可
    current.next = current.next.next 

    return returnVal
  }
 }
 // 查找 O(n)
 get(index) {if(index < 0 || index >= this.size) {throw new Error('查找的索引不失常')
  }
  let current = this.head
  for (let i = 0; i < index; i++) {current = current.next}
  return current
 }
 reverse() {
  const reverse = head=>{if(head == null || head.next == null) {return head}
    let newHead = reverse(head.next)
    // 从这个链表的最初一个开始反转，让以后下一个元素的 next 指向本人，本人指向 null
    // ![](http://img-repo.poetries.top/images/20210522161710.png)
    // 刚开始反转的是最初两个
    head.next.next = head
    head.next = null

    return newHead
  }
  return reverse(this.head)
 }
}

let ll = new LinkedList()

ll.add(1)
ll.add(2)
ll.add(3)
ll.add(4)

// console.dir(ll,{depth: 1000})

console.log(ll.reverse())

替换 a,b 的值，不能用长期变量

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

a = a + b
b = a - b
a = a - b

实现 instanceOf

// 模仿 instanceof
function 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__;
  }
}

手写 Promise.then

then 办法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，咱们应用一个 callbacks 数组先把传给 then 的函数暂存起来，等状态扭转时再调用。

那么，怎么保障后一个 **then** 里的办法在前一个 **then**（可能是异步）完结之后再执行呢？ 咱们能够将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的成果：

• 承前：以后一个 promise 实现后，调用其 resolve 变更状态，在这个 resolve 里会顺次调用 callbacks 里的回调，这样就执行了 then 里的办法了
• 启后：上一步中，当 then 里的办法执行实现后，返回一个后果，如果这个后果是个简略的值，就间接调用新 promise 的 resolve，让其状态变更，这又会顺次调用新 promise 的 callbacks 数组里的办法，周而复始。。如果返回的后果是个 promise，则须要等它实现之后再触发新 promise 的 resolve，所以能够在其后果的 then 里调用新 promise 的 resolve

then(onFulfilled, onReject){
    // 保留前一个 promise 的 this
    const self = this; 
    return new MyPromise((resolve, reject) => {
      // 封装前一个 promise 胜利时执行的函数
      let fulfilled = () => {
        try{const result = onFulfilled(self.value); // 承前
          return result instanceof MyPromise? result.then(resolve, reject) : resolve(result); // 启后
        }catch(err){reject(err)
        }
      }
      // 封装前一个 promise 失败时执行的函数
      let rejected = () => {
        try{const result = onReject(self.reason);
          return result instanceof MyPromise? result.then(resolve, reject) : reject(result);
        }catch(err){reject(err)
        }
      }
      switch(self.status){
        case PENDING: 
          self.onFulfilledCallbacks.push(fulfilled);
          self.onRejectedCallbacks.push(rejected);
          break;
        case FULFILLED:
          fulfilled();
          break;
        case REJECT:
          rejected();
          break;
      }
    })
   }

留神：

• 间断多个 then 里的回调办法是同步注册的，但注册到了不同的 callbacks 数组中，因为每次 then 都返回新的 promise 实例（参考下面的例子和图）
• 注册实现后开始执行构造函数中的异步事件，异步实现之后顺次调用 callbacks 数组中提前注册的回调

实现 Event(event bus)

event bus 既是 node 中各个模块的基石，又是前端组件通信的依赖伎俩之一，同时波及了订阅 - 公布设计模式，是十分重要的根底。

简略版：

class EventEmeitter {constructor() {this._events = this._events || new Map(); // 贮存事件 / 回调键值对
    this._maxListeners = this._maxListeners || 10; // 设立监听下限
  }
}


// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler;
  // 从贮存事件键值对的 this._events 中获取对应事件回调函数
  handler = this._events.get(type);
  if (args.length > 0) {handler.apply(this, args);
  } else {handler.call(this);
  }
  return true;
};

// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {
  // 将 type 事件以及对应的 fn 函数放入 this._events 中贮存
  if (!this._events.get(type)) {this._events.set(type, fn);
  }
};

面试版：

class EventEmeitter {constructor() {this._events = this._events || new Map(); // 贮存事件 / 回调键值对
    this._maxListeners = this._maxListeners || 10; // 设立监听下限
  }
}

// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler;
  // 从贮存事件键值对的 this._events 中获取对应事件回调函数
  handler = this._events.get(type);
  if (args.length > 0) {handler.apply(this, args);
  } else {handler.call(this);
  }
  return true;
};

// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {
  // 将 type 事件以及对应的 fn 函数放入 this._events 中贮存
  if (!this._events.get(type)) {this._events.set(type, fn);
  }
};

// 触发名为 type 的事件
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler;
  handler = this._events.get(type);
  if (Array.isArray(handler)) {
    // 如果是一个数组阐明有多个监听者, 须要顺次此触发外面的函数
    for (let i = 0; i < handler.length; i++) {if (args.length > 0) {handler[i].apply(this, args);
      } else {handler[i].call(this);
      }
    }
  } else {
    // 单个函数的状况咱们间接触发即可
    if (args.length > 0) {handler.apply(this, args);
    } else {handler.call(this);
    }
  }

  return true;
};

// 监听名为 type 的事件
EventEmeitter.prototype.addListener = function(type, fn) {const handler = this._events.get(type); // 获取对应事件名称的函数清单
  if (!handler) {this._events.set(type, fn);
  } else if (handler && typeof handler === "function") {
    // 如果 handler 是函数阐明只有一个监听者
    this._events.set(type, [handler, fn]); // 多个监听者咱们须要用数组贮存
  } else {handler.push(fn); // 曾经有多个监听者, 那么间接往数组里 push 函数即可
  }
};

EventEmeitter.prototype.removeListener = function(type, fn) {const handler = this._events.get(type); // 获取对应事件名称的函数清单

  // 如果是函数, 阐明只被监听了一次
  if (handler && typeof handler === "function") {this._events.delete(type, fn);
  } else {
    let postion;
    // 如果 handler 是数组, 阐明被监听屡次要找到对应的函数
    for (let i = 0; i < handler.length; i++) {if (handler[i] === fn) {postion = i;} else {postion = -1;}
    }
    // 如果找到匹配的函数, 从数组中革除
    if (postion !== -1) {
      // 找到数组对应的地位, 间接革除此回调
      handler.splice(postion, 1);
      // 如果革除后只有一个函数, 那么勾销数组, 以函数模式保留
      if (handler.length === 1) {this._events.set(type, handler[0]);
      }
    } else {return this;}
  }
};

实现具体过程和思路见实现 event

手写深度比拟 isEqual

思路：深度比拟两个对象，就是要深度比拟对象的每一个元素。=> 递归

• 递归退出条件：

  • 被比拟的是两个值类型变量，间接用“===”判断
  • 被比拟的两个变量之一为null，直接判断另一个元素是否也为null

• 提前结束递推：

  • 两个变量 keys 数量不同
  • 传入的两个参数是同一个变量
• 递推工作：深度比拟每一个key

function isEqual(obj1, obj2){
    // 其中一个为值类型或 null
    if(!isObject(obj1) || !isObject(obj2)){return obj1 === obj2;}

    // 判断是否两个参数是同一个变量
    if(obj1 === obj2){return true;}

    // 判断 keys 数是否相等
    const obj1Keys = Object.keys(obj1);
    const obj2Keys = Object.keys(obj2);
    if(obj1Keys.length !== obj2Keys.length){return false;}

    // 深度比拟每一个 key
    for(let key in obj1){if(!isEqual(obj1[key], obj2[key])){return false;}
    }

    return true;
}

实现字符串的 repeat 办法

输出字符串 s，以及其反复的次数，输入反复的后果，例如输出 abc，2，输入 abcabc。

function repeat(s, n) {return (new Array(n + 1)).join(s);
}

递归：

function repeat(s, n) {return (n > 0) ? s.concat(repeat(s, --n)) : "";
}

深克隆（deepclone）

简略版：

const newObj = JSON.parse(JSON.stringify(oldObj));

局限性：

1. 他无奈实现对函数、RegExp 等非凡对象的克隆
2. 会摈弃对象的 constructor, 所有的构造函数会指向 Object
3. 对象有循环援用, 会报错

面试版:

/**
 * deep clone
 * @param  {[type]} parent object 须要进行克隆的对象
 * @return {[type]}        深克隆后的对象
 */
const clone = parent => {
  // 判断类型
  const isType = (obj, type) => {if (typeof obj !== "object") return false;
    const typeString = Object.prototype.toString.call(obj);
    let flag;
    switch (type) {
      case "Array":
        flag = typeString === "[object Array]";
        break;
      case "Date":
        flag = typeString === "[object Date]";
        break;
      case "RegExp":
        flag = typeString === "[object RegExp]";
        break;
      default:
        flag = false;
    }
    return flag;
  };

  // 解决正则
  const getRegExp = re => {
    var flags = "";
    if (re.global) flags += "g";
    if (re.ignoreCase) flags += "i";
    if (re.multiline) flags += "m";
    return flags;
  };
  // 保护两个贮存循环援用的数组
  const parents = [];
  const children = [];

  const _clone = parent => {if (parent === null) return null;
    if (typeof parent !== "object") return parent;

    let child, proto;

    if (isType(parent, "Array")) {
      // 对数组做非凡解决
      child = [];} else if (isType(parent, "RegExp")) {
      // 对正则对象做非凡解决
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, "Date")) {
      // 对 Date 对象做非凡解决
      child = new Date(parent.getTime());
    } else {
      // 解决对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用 Object.create 切断原型链
      child = Object.create(proto);
    }

    // 解决循环援用
    const index = parents.indexOf(parent);

    if (index != -1) {
      // 如果父数组存在本对象, 阐明之前曾经被援用过, 间接返回此对象
      return children[index];
    }
    parents.push(parent);
    children.push(child);

    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }

    return child;
  };
  return _clone(parent);
};

局限性:

1. 一些非凡状况没有解决: 例如 Buffer 对象、Promise、Set、Map
2. 另外对于确保没有循环援用的对象，咱们能够省去对循环援用的非凡解决，因为这很耗费工夫

原理详解实现深克隆

类数组转化为数组的办法

const arrayLike=document.querySelectorAll('div')

// 1. 扩大运算符
[...arrayLike]
// 2.Array.from
Array.from(arrayLike)
// 3.Array.prototype.slice
Array.prototype.slice.call(arrayLike)
// 4.Array.apply
Array.apply(null, arrayLike)
// 5.Array.prototype.concat
Array.prototype.concat.apply([], arrayLike)

手写类型判断函数

function getType(value) {
  // 判断数据是 null 的状况
  if (value === null) {return value + "";}
  // 判断数据是援用类型的状况
  if (typeof value === "object") {let valueClass = Object.prototype.toString.call(value),
      type = valueClass.split("")[1].split("");
    type.pop();
    return type.join("").toLowerCase();} else {
    // 判断数据是根本数据类型的状况和函数的状况
    return typeof value;
  }
}

实现 Node 的 require 办法

require 基本原理

require 查找门路

require 和 module.exports 干的事件并不简单，咱们先假如有一个全局对象{}，初始状况下是空的，当你 require 某个文件时，就将这个文件拿进去执行，如果这个文件外面存在module.exports，当运行到这行代码时将 module.exports 的值退出这个对象，键为对应的文件名，最终这个对象就长这样：

{
  "a.js": "hello world",
  "b.js": function add(){},
  "c.js": 2,
  "d.js": {num: 2}
}

当你再次 require 某个文件时，如果这个对象外面有对应的值，就间接返回给你，如果没有就反复后面的步骤，执行指标文件，而后将它的 module.exports 退出这个全局对象，并返回给调用者。这个全局对象其实就是咱们常常据说的缓存。所以 require 和 module.exports 并没有什么黑魔法，就只是运行并获取指标文件的值，而后退出缓存，用的时候拿进去用就行

手写实现一个 require

const path = require('path'); // 门路操作
const fs = require('fs'); // 文件读取
const vm = require('vm'); // 文件执行

// node 模块化的实现
// node 中是自带模块化机制的，每个文件就是一个独自的模块，并且它遵循的是 CommonJS 标准，也就是应用 require 的形式导入模块，通过 module.export 的形式导出模块。// node 模块的运行机制也很简略，其实就是在每一个模块外层包裹了一层函数，有了函数的包裹就能够实现代码间的作用域隔离

// require 加载模块
// require 依赖 node 中的 fs 模块来加载模块文件，fs.readFile 读取到的是一个字符串。// 在 javascrpt 中咱们能够通过 eval 或者 new Function 的形式来将一个字符串转换成 js 代码来运行。// eval
// const name = 'poetry';
// const str = 'const a = 123; console.log(name)';
// eval(str); // poetry;

// new Function
// new Function 接管的是一个要执行的字符串，返回的是一个新的函数，调用这个新的函数字符串就会执行了。如果这个函数须要传递参数，能够在 new Function 的时候顺次传入参数，最初传入的是要执行的字符串。比方这里传入参数 b，要执行的字符串 str
// const b = 3;
// const str = 'let a = 1; return a + b';
// const fun = new Function('b', str);
// console.log(fun(b, str)); // 4
// 能够看到 eval 和 Function 实例化都能够用来执行 javascript 字符串，仿佛他们都能够来实现 require 模块加载。不过在 node 中并没有选用他们来实现模块化，起因也很简略因为他们都有一个致命的问题，就是都容易被不属于他们的变量所影响。// 如下 str 字符串中并没有定义 a，然而确能够应用下面定义的 a 变量，这显然是不对的，在模块化机制中，str 字符串应该具备本身独立的运行空间，本身不存在的变量是不能够间接应用的
// const a = 1;
// const str = 'console.log(a)';
// eval(str);
// const func = new Function(str);
// func();

// node 存在一个 vm 虚拟环境的概念，用来运行额定的 js 文件，他能够保障 javascript 执行的独立性，不会被内部所影响
// vm 内置模块
// 尽管咱们在内部定义了 hello，然而 str 是一个独立的模块，并不在村 hello 变量，所以会间接报错。// 引入 vm 模块，不须要装置，node 自建模块
// const vm = require('vm');
// const hello = 'poetry';
// const str = 'console.log(hello)';
// wm.runInThisContext(str); // 报错
// 所以 node 执行 javascript 模块时能够采纳 vm 来实现。就能够保障模块的独立性了

// 剖析实现步骤
// 1. 导入相干模块，创立一个 Require 办法。// 2. 抽离通过 Module._load 办法，用于加载模块。// 3.Module.resolveFilename 依据相对路径，转换成绝对路径。// 4. 缓存模块 Module._cache，同一个模块不要反复加载，晋升性能。// 5. 创立模块 id: 保留的内容是 exports = {}相当于 this。// 6. 利用 tryModuleLoad(module, filename) 尝试加载模块。// 7.Module._extensions 应用读取文件。// 8.Module.wrap: 把读取到的 js 包裹一个函数。// 9. 将拿到的字符串应用 runInThisContext 运行字符串。// 10. 让字符串执行并将 this 改编成 exports

// 定义导入类，参数为模块门路
function Require(modulePath) {
    // 获取以后要加载的绝对路径
    let absPathname = path.resolve(__dirname, modulePath);

    // 主动给模块增加后缀名，实现省略后缀名加载模块，其实也就是如果文件没有后缀名的时候遍历一下所有的后缀名看一下文件是否存在
    // 获取所有后缀名
    const extNames = Object.keys(Module._extensions);
    let index = 0;
    // 存储原始文件门路
    const oldPath = absPathname;
    function findExt(absPathname) {if (index === extNames.length) {throw new Error('文件不存在');
        }
        try {fs.accessSync(absPathname);
            return absPathname;
        } catch(e) {const ext = extNames[index++];
            findExt(oldPath + ext);
        }
    }
    // 递归追加后缀名，判断文件是否存在
    absPathname = findExt(absPathname);

    // 从缓存中读取，如果存在，间接返回后果
    if (Module._cache[absPathname]) {return Module._cache[absPathname].exports;
    }

    // 创立模块，新建 Module 实例
    const module = new Module(absPathname);

    // 增加缓存
    Module._cache[absPathname] = module;

    // 加载以后模块
    tryModuleLoad(module);

    // 返回 exports 对象
    return module.exports;
}

// Module 的实现很简略，就是给模块创立一个 exports 对象，tryModuleLoad 执行的时候将内容退出到 exports 中，id 就是模块的绝对路径
// 定义模块, 增加文件 id 标识和 exports 属性
function Module(id) {
    this.id = id;
    // 读取到的文件内容会放在 exports 中
    this.exports = {};}

Module._cache = {};

// 咱们给 Module 挂载动态属性 wrapper，外面定义一下这个函数的字符串，wrapper 是一个数组，数组的第一个元素就是函数的参数局部，其中有 exports，module. Require，__dirname, __filename, 都是咱们模块中罕用的全局变量。留神这里传入的 Require 参数是咱们本人定义的 Require
// 第二个参数就是函数的完结局部。两局部都是字符串，应用的时候咱们将他们包裹在模块的字符串内部就能够了
Module.wrapper = ["(function(exports, module, Require, __dirname, __filename) {",
    "})"
]

// _extensions 用于针对不同的模块扩展名应用不同的加载形式，比方 JSON 和 javascript 加载形式必定是不同的。JSON 应用 JSON.parse 来运行。// javascript 应用 vm.runInThisContext 来运行，能够看到 fs.readFileSync 传入的是 module.id 也就是咱们 Module 定义时候 id 存储的是模块的绝对路径，读取到的 content 是一个字符串，咱们应用 Module.wrapper 来包裹一下就相当于在这个模块内部又包裹了一个函数，也就实现了公有作用域。// 应用 call 来执行 fn 函数，第一个参数扭转运行的 this 咱们传入 module.exports，前面的参数就是函数里面包裹参数 exports, module, Require, __dirname, __filename
Module._extensions = {'.js'(module) {const content = fs.readFileSync(module.id, 'utf8');
        const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
        const fn = vm.runInThisContext(fnStr);
        fn.call(module.exports, module.exports, module, Require,__filename,__dirname);
    },
    '.json'(module) {const json = fs.readFileSync(module.id, 'utf8');
        module.exports = JSON.parse(json); // 把文件的后果放在 exports 属性上
    }
}

// tryModuleLoad 函数接管的是模块对象，通过 path.extname 来获取模块的后缀名，而后应用 Module._extensions 来加载模块
// 定义模块加载办法
function tryModuleLoad(module) {
    // 获取扩展名
    const extension = path.extname(module.id);
    // 通过后缀加载以后模块
    Module._extensions[extension](module);
}

// 至此 Require 加载机制咱们根本就写完了，咱们来从新看一下。Require 加载模块的时候传入模块名称，在 Require 办法中应用 path.resolve(__dirname, modulePath)获取到文件的绝对路径。而后通过 new Module 实例化的形式创立 module 对象，将模块的绝对路径存储在 module 的 id 属性中，在 module 中创立 exports 属性为一个 json 对象
// 应用 tryModuleLoad 办法去加载模块，tryModuleLoad 中应用 path.extname 获取到文件的扩展名，而后依据扩展名来执行对应的模块加载机制
// 最终将加载到的模块挂载 module.exports 中。tryModuleLoad 执行结束之后 module.exports 曾经存在了，间接返回就能够了


// 给模块增加缓存
// 增加缓存也比较简单，就是文件加载的时候将文件放入缓存中，再去加载模块时先看缓存中是否存在，如果存在间接应用，如果不存在再去从新，加载之后再放入缓存

// 测试
let json = Require('./test.json');
let test2 = Require('./test2.js');
console.log(json);
console.log(test2);

实现数组的 map 办法

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