前端常见手写 JS 题（巩固你的前端基础）

数组扁平化

const arr = [1, [2, [3, [4, 5]]], 6]; // => [1, 2, 3, 4, 5, 6]
function flatten(arr) { 
  let result = [];
  for (let i = 0; i < arr.length; i++) { 
    if (Array.isArray(arr[i])) { 
      result = result.concat(flatten(arr[i]));
    } else { 
      result = result.concat(arr[i]);
    }
  }
  return result;
}

flat()

const res1 = arr.flat(Infinity)

正则

const res2 = JSON.stringify(arr).replace(/[\[|\]]/g, '').split(',').map(e => parseInt(e))

正则改良版本

const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/[\[|\]]/g, '') + ']')

reduce

const flatten = arr => { 
  return arr.reduce((pre, cur) => { 
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}
const res4 = flatten(arr)

函数递归

const res5 = []
const fn = arr => { 
  for (let i = 0; i < arr.length; i++) { 
    if (Array.isArray(arr[i])) { 
      fn(arr[i])
    } else { 
      res5.push(arr[i])
    }
  }
}
fn(arr)

数组去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', { }, { }];

Set

const res1 = Array.from(new Set(arr));

两层for循环+splice

const unique1 = arr => { 
  let len = arr.length;
  for (let i = 0; i < len; i++) { 
    for (let j = i + 1; j < len; j++) { 
      if (arr[i] === arr[j]) { 
        arr.splice(j, 1);
        // 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能
        len--;
        j--;
      }
    }
  }
  return arr;
}

indexOf

const unique2 = arr => { 
  const res = [];
  for (let i = 0; i < arr.length; i++) { 
    if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
  }
  return res;
}

include

const unique3 = arr => { 
  const res = [];
  for (let i = 0; i < arr.length; i++) { 
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}

filter

const unique4 = arr => { 
  return arr.filter((item, index) => { 
    return arr.indexOf(item) === index;
  });
}

Map

const unique5 = arr => { 
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) { 
    if (!map.has(arr[i])) { 
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}

初始化二维数组

function initializeArr(row, column) { 
  let arr = [];
  for (let i = 0; i < row; i++) { 
    arr[i] = [];
    for (let j = 0; j < column; j++) { 
      arr[i][j] = 0;
    }
  }
  return arr
}
const arr = new Array(row).fill(0).map(v => new Array(column).fill(0));

类数组转化为数组

Array.from

Array.from(document.querySelectorAll('div'))

Array.prototype.slice.call()

Array.prototype.slice.call(document.querySelectorAll('div'))

扩展运算符

[...document.querySelectorAll('div')]

concat

Array.prototype.concat.apply([], document.querySelectorAll('div'));

求数组最大值

Math.max(...arr)
Math.max.apply(null, arr)
Math.max.call(null, ...arr)
let arr1 = arr.reduce(function (prev, next) { 
  return Math.max(prev, next)
})

String.prototype.indexOf()

String.prototype.myIndexOf = function (str) { 
  let sourceArr = this.split('');
  let num = -1;
  for (let i in sourceArr) { 
    if (sourceArr[i] === str.slice(0, 1)) { 
      if (str === this.slice(i, Number(i) + str.length)) { 
        num = i
      }
    }
  }
  return num
}

Array.prototype.filter()

Array.prototype.filter = function(callbackFn, thisArg) { 
  console.log('this is my filter function')
  // 处理数组类型异常
  if (this === null || this === undefined) { 
    throw new TypeError("Cannot read property 'filter' of null or undefined")
  }
  // 处理回调类型异常
  if (Object.prototype.toString.call(callbackFn) !== '[object Function]') { 
    throw new TypeError(callbackFn + 'is not a function')
  }
  let O = Object(this)
  let len = O.length >>> 0
  let resLen = 0
  let res = []
  for (let i = 0; i < len; i++) { 
    if (i in O) { 
      let element = O[i]
      // 是否满足回调函数，如果满足，则放入数组中
      if (callbackFn.call(thisArg, O[i], i, O)) { 
        res[resLen++] = element
      }
    }
  }
  return res
}
const tempArr = [10, 23, 443, 23, 8, 6, 34, 67]
let res = tempArr.filter((e) => { 
  if (e > 100) { 
    return e
  }
})
console.log(res)

Array.prototype.map()

Array.prototype.map = function(callbackFn, thisArg) { 
  // 处理数组类型异常
  if (this === null || this === undefined) { 
    throw new TypeError("Cannot read property 'map' of null or undefined");
  }
  // 处理回调类型异常
  if (Object.prototype.toString.call(callbackFn) != "[object Function]") { 
    throw new TypeError(callbackFn + ' is not a function')
  }
  let O = Object(this);
  let T = thisArg;
  let len = O.length >>> 0;
  let A = new Array(len);
  for(let k = 0; k < len; k++) { 
    // 如果用 hasOwnProperty 是有问题的，它只能找私有属性
    if (k in O) { 
      let kValue = O[k];
      // 依次传入this, 当前项，当前索引，整个数组
      let mappedValue = callbackFn.call(T, kValue, k, O);
      A[k] = mappedValue;
    }
  }
  return A;
}
const tempArr = [10, 23, 443, 23, 8, 6, 34, 67]
let res = tempArr.map((e) => e * 2)
console.log(res)

处理数组类型异常，先转换为对象，获取参数的长度，声明数组。对生成的 O 对象进行遍历，获取每一个 key 对应的值 O[key]，传入到当前的回调函数中，进行计算，将值重新放入对应 key 的位置。

Array.prototype.forEach()

Array.prototype.forEach = function(callback, thisArg) { 
  console.log('this is my filter')
  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 o = Object(this)
  const len = o.length >>> 0
  for (let i = 0; i < len; i++) { 
    if (i in o) { 
      callback.call(thisArg, o[i], i)
    }
  }
}

Array.prototype.reduce()

Array.prototype.reduce  = function(callbackfn, initialValue) { 
  // 处理数组类型异常
  if (this === null || this === undefined) { 
    throw new TypeError("Cannot read property 'reduce' of null or undefined");
  }
  // 处理回调类型异常
  if (Object.prototype.toString.call(callbackfn) != "[object Function]") { 
    throw new TypeError(callbackfn + ' is not a function')
  }
  let O = Object(this);
  // console.log(this)
  // O = (4) [1, 2, 3, 4]
  let len = O.length >>> 0;
  let k = 0;
  let accumulator = initialValue;
  if (accumulator === undefined) { 
    for(; k < len ; k++) { 
      // 查找原型链
      if (k in O) { 
        accumulator = O[k];
        k++;
        break;
      }
    }
  }
  // 表示数组全为空
  if(k === len && accumulator === undefined) 
    throw new Error('Each element of the array is empty');
  for(;k < len; k++) { 
    if (k in O) { 
      // 注意，核心！
      accumulator = callbackfn.call(undefined, accumulator, O[k], k, O);
    }
  }
  return accumulator;
}
let tempArr = [1, 2, 3, 4]
let res = tempArr.reduce((a, b) => a - b)
console.log(res)

处理数组类型异常，处理回调类型异常，获取传入参数列表的长度，如果初始值为 undefined，则取参数列表的第一个数做为初始值，将前一个数字和后一个数字传入回调函数中，进行计算。把两个计算出来的值，重新赋值给前一个。

Array.prototype.push()

Array.prototype.push = function(...items) { 
  let O = Object(this);
  let len = this.length >>> 0;
  let argCount = items.length >>> 0;
  // 2 ** 53 - 1 为JS能表示的最大正整数
  if (len + argCount > 2 ** 53 - 1) { 
    throw new TypeError("The number of array is over the max value restricted!")
  }
  for(let i = 0; i < argCount; i++) { 
    O[len + i] = items[i];
  }
  let newLength = len + argCount;
  O.length = newLength;
  return newLength;
}

Array.prototype.pop()

Array.prototype.pop = function () { 
  console.log('this is my pop function')
  let O = Object(this)
  let len = this.length >>> 0
  if (len === 0) { 
    O.length = 0
    return undefined
  }
  len--
  let value = O[len]
  delete O[len]
  O.length = len
  return value
}

Function.prototype.call()

Function.prototype.call = function(context) { 
  console.log('this is my call function')
  if (typeof this !== 'function') { 
    throw new Error('Error')
  }
  context = context || window
  context.fn = this
  const args = Array.from(arguments).slice(1)
  const result = context.fn(...args)
  delete context.fn
  return result
}
function print(age) { 
  console.log(this.name + ' ' +age)
}
let obj = { 
  name: '奶油桃子'
}
print.call(obj, 1, 2, 3)

Function.prototype.apply()

Function.prototype.myApply = function(context) { 
  console.log('this is my apply')
  if (typeof this !== 'function') { 
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  let result;
  if (arguments[1]) { 
    result = context.fn(...arguments[1])
  } else { 
    result = context.fn()
  }
  delete context.fn
  return result
}
function print(age, age2, age3) { 
  console.log(`${ this.name} ${ age} ${ age2} ${ age3}`)
}
let obj = { 
  name: '奶油桃子'
}
print.myApply(obj, [1, 2, 3])

Function.prototype.bind()

Function.prototype.myBind = function(context) { 
  console.log('this is my bind')
  if (typeof this !== 'function') { 
    throw new Error('Error')
  }
  let self = this
  let args = [].slice.call(arguments, 1)
  let bound = function() { 
    let boundArgs = [].slice.call(arguments)
    return self.apply(context, args.concat(boundArgs))
  }
  return bound
}
function print(age) { 
  console.log(`${ this.name} ${ age}`)
}
let obj = { 
  name: '奶油桃子'
}
let bound = print.myBind(obj, 1)
bound()

debounce（防抖）

function debounce(fn, delay) { 
  let timer = null
  return function (...args) { 
    let context = this
    if (timer) clearTimeout(timer)
    timer = setTimeout(function () { 
      fn.apply(context, args)
    }, delay)
  }
}

throttle（节流）

function throttle(fn, delay) { 
  let flag = true,
    timer = null
  return function (...args) { 
    let context = this
    if (!flag) return
    flag = false
    clearTimeout(timer)
    timer = setTimeout(function () { 
      fn.apply(context, args)
      flag = true
    }, delay)
  }
}

函数柯里化

function add() { 
  // 第一次执行时，定义一个数组专门用来存储所有的参数
  let _args = Array.prototype.slice.call(arguments)
  // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
  let _adder = function () { 
    _args.push(...arguments)
    return _adder
  };
  // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
  _adder.toString = function () { 
    return _args.reduce(function (a, b) { 
      return a + b
    });
  }
  return _adder
}
alert(add(1)(2)(3))                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9

compose

function compose() { 
  let fns = [].slice.call(arguments)
  return function(initalArg) { 
    let res = initalArg
    for (let i = fns.length - 1; i > -1; i--) { 
      res = fns[i](res)
    }
    return res
  }
}
let greet = function (name) {  return 'hi:' + name }
let exclaim = function (statement) {  return statement.toUpperCase() + '!' }
let transform = function (str) {  return str.replace(/[dD]/, 'DDDDD') }
let result = compose(greet, exclaim, transform)
console.log(result('dot'))

实现 new

function create(Con, ...args) { 
  let obj = { }
  obj.__proto__ = Con.prototype
  let result = Con.apply(obj, args)
  return result instanceof Object ? result : obj
}

instanceof

function Foo() { }
var f1 = new Foo()
// 根据 instanceof 原理
function myInstanceof(left, right) { 
  let proto = Object.getPrototypeOf(left)
  while(true) { 
    if (proto === null) return false
    if (proto === right.prototype) return true
    proto = Object.getPrototypeOf(proto)
  }
}
console.log(myInstanceof(f1, Foo))

ES5 继承

function Father() { }
function Son() { 
  Father.call(this)
}
Son.prototype = Object.create(Father.prototype)
Son.prototype.constructor = Son

Object.is

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

+0 === -0  // true
NaN === NaN // false
const is = (x, y) => { 
  if (x === y) { 
    return x !== 0 || y !== 0 || 1/x === 1/y
  } else { 
    return x !== x && y !== y
  }
}

模拟Object.create

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

function create(proto) { 
  // 新声明一个函数
  function F() { }
  // 将函数的原型指向obj
  F.prototype = proto
  // 返回这个函数的实例化对象
  return new F()
}

Object.assign

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

Object.assign2 = function (target, ...source) { 
  if (target == null) { 
    throw new TypeError('Cannot convert undefined or null to object')
  }
  let ret = Object(target)
  source.forEach(function (obj) { 
    if (obj != null) { 
      for (let key in obj) { 
        if (obj.hasOwnProperty(key)) { 
          ret[key] = obj[key]
        }
      }
    }
  })
  return ret
}
let a = { 
  b11: 1
}
let b = Object.assign2({ }, a)
a.b11 = 111111
console.log(a, b)

深拷贝

function isObject(x) { 
  return Object.prototype.toString.call(x) === '[object Object]';
}
function cloneDeep(obj, hash = new Map()) { 
  // 非对象返回自身
  if (!isObject(obj)) return obj;
  // 循环检测 —— 如果已存在，直接返回该值
  if (hash.has(obj)) return hash.get(obj);
  // 判断数组和是对象
  var target = Array.isArray(obj) ? [] : { };
  // 每次都添加未有的对象
  hash.set(obj, target);
  // 开始循环遍历拷贝
  for (let key in obj) { 
    if (obj.hasOwnProperty(key)) { 
      if (isObject(obj[key])) { 
        target[key] = cloneDeep(obj[key], hash); // 新增代码，传入哈希表
      } else { 
        target[key] = obj[key];
      }
    }
  }
  return target;
}

JSON.stringify()

function stringfy(value) { 
  // 获取数据类型
  let type = typeof value
  function getValues(value) { 
    if (type === 'undefined' || type === 'symbol' || type === 'function') { 
      return undefined
    }
    if (type === 'number' || type === 'boolean') { 
      return `${ value}`
    }
    if (type === 'string') { 
      return `"${ value}"`
    }
  }
  if (type === 'object') { 
    if (!value) { 
      return `${ value}`
    }
    if (value instanceof Date) { 
      return `"${ new Date(value).toISOString()}"`
    }
    // 数据类型
    if (value instanceof Array) { 
      return `[${ value.map(stringfy)}]`
    } else { 
      // 对象类型
      return (
        '{' + Object.keys(value).map(key => { 
          let result = stringfy(value[key])
          if (result === undefined) { 
            return undefined
          }
          return `"${ key}":${ result}`
        }).filter(item => item !== undefined) + '}'
      )
    }
  }
  return getValues(value)
}

JSON.parse()

function parse(value) { 
  return eval('(' + value + ')')
}
function parse(value) { 
  return new Function('return' + value)()
}

JSONP

const jsonp = function (url, data) { 
  return new Promise((resolve, reject) => { 
    // 初始化url
    let dataString = url.indexOf('?') === -1 ? '?' : ''
    let callbackName = `jsonpCB_${ Date.now()}`
    url += `${ dataString}callback=${ callbackName}`
    if (data) { 
      // 有请求参数，依次添加到url
      for (let k in data) { 
        url += `${ k}=${ data[k]}`
      }
    }
    let jsNode = document.createElement('script')
    jsNode.src = url
    // 触发callback，触发后删除js标签和绑定在window上的callback
    window[callbackName] = result => { 
      delete window[callbackName]
      document.body.removeChild(jsNode)
      if (result) { 
        resolve(result)
      } else { 
        reject('没有返回数据')
      }
    }
    // js加载异常的情况
    jsNode.addEventListener('error', () => { 
      delete window[callbackName]
      document.body.removeChild(jsNode)
      reject('JavaScript资源加载失败')
    }, false)
    // 添加js节点到document上时，开始请求
    document.body.appendChild(jsNode)
  })
}
jsonp('http://139.224.66.67:3000/comment/music?id=186016&limit=1').then(result => { 
  console.log(result)
}).catch(err => { 
  console.error(err)
})

AJAX

function ajax(method, url) { 
  return new Promise((resolve, reject) => { 
    const request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => { 
      if (request.readyState === 4) { 
        if (request.status === 200 || request.status === 304) { 
          resolve(request.response);
        } else { 
          reject(request);
        }
      }
    };
    request.send();
  });
}
ajax("get", "http://139.224.66.67:3000/comment/music?id=186016&limit=1").then(res => { 
  console.log(res);
});

字符串模板

function render(template, data) { 
  const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
  if (reg.test(template)) {  // 判断模板里是否有模板字符串
    const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
    template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
    return render(template, data); // 递归的渲染并返回渲染后的结构
  }
  return template; // 如果模板没有模板字符串直接返回
}
let template = '我是{ {name}}，年龄{ {age}}，性别{ {sex}}';
let person = { 
  name: '淘淘',
  age: 12
}
console.log(render(template, person))

解析 URL 参数为对象

function parseParam(url) { 
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  let paramsObj = { };
  // 将 params 存到对象中
  paramsArr.forEach(param => { 
    if (/=/.test(param)) {  // 处理有 value 的参数
      let [key, val] = param.split('='); // 分割 key 和 value
      val = decodeURIComponent(val); // 解码
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
      if (paramsObj.hasOwnProperty(key)) {  // 如果对象有 key，则添加一个值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else {  // 如果对象没有这个 key，创建 key 并设置值
        paramsObj[key] = val;
      }
    } else {  // 处理没有 value 的参数
      paramsObj[param] = true;
    }
  })
  return paramsObj;
}

用正则实现 trim()

String.prototype.trim = function() { 
  return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
String.prototype.trim = function(){ 
  return this.replace(/^\s+|\s+$/g, '')
}
function trim(string){ 
  return string.replace(/^\s+|\s+$/g, '')
}

手写观察者模式

class Subject { 
  constructor(name) { 
    this.name = name
    this.observers = []
    this.state = ''
  }
  // 被观察者要提供一个接受观察者的方式
  attach(observer) { 
    this.observers.push(observer)
  }
  // 改变被观察者的状态
  setState(newState) { 
    this.state = newState
    this.observers.forEach(o => { 
      o.update(newState)
    })
  }
}
class Observer { 
  constructor(name) { 
    this.name = name
  }
  update(newState) { 
    console.log(`${ this.name} say: ${ newState}`)
  }
}
// 被观察者 灯
let sub = new Subject('灯')
let mm = new Observer('小明')
let jj = new Observer('小健')
// 订阅 观察者
sub.attach(mm)
sub.attach(jj)
sub.setState('灯亮了来电了')

转化为驼峰命名

let f = function(s) { 
  return s.replace(/-\w/g, function(x) { 
    return x.slice(1).toUpperCase()
  })
}

实现千位分隔符

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 : '')
}

repeat

function repeat(func, times, wait) { 
  return function() { 
    let args = arguments
    let handle = function(i) { 
      setTimeout(() => { 
        func.apply(null, args)
      }, wait * i)
    }
    for (let i = 0; i < times; i++) { 
      handle(i)
    }
  }
}
const repeatFunc = repeat(console.log, 4, 1000)
repeatFunc('hello world')

sleep

function sleep(fn, time) { 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(fn)
    }, time)
  })
}
let saySomrthing = (name) => console.log(`hello, ${ name}`)
async function autoPlay() { 
  let demo = await sleep(saySomrthing('lily'), 1000)
  let demo1 = await sleep(saySomrthing('mike'), 2000)
}
autoPlay()

将VirtualDom转化为真实DOM结构

function render(vnode, container) { 
  container.appendChild(_render(vnode));
}
function _render(vnode) { 
  // 如果是数字类型转化为字符串
  if (typeof vnode === 'number') { 
    vnode = String(vnode);
  }
  // 字符串类型直接就是文本节点
  if (typeof vnode === 'string') { 
    return document.createTextNode(vnode);
  }
  // 普通DOM
  const dom = document.createElement(vnode.tag);
  if (vnode.attrs) { 
    // 遍历属性
    Object.keys(vnode.attrs).forEach(key => { 
      const value = vnode.attrs[key];
      dom.setAttribute(key, value);
    })
  }
  // 子数组进行递归操作
  vnode.children.forEach(child => render(child, dom));
  return dom;
}

图片懒加载

可以给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);

渲染几万条数据不卡住页面

渲染大数据时，合理使用createDocumentFragment和requestAnimationFrame，将操作切分为一小段一小段执行。

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)

EventEmitter 实现

// 手写发布订阅模式 EventEmitter
class EventEmitter { 
  constructor() { 
    this.events = { };
  }
  // 实现订阅
  on(type, callBack) { 
    if (!this.events) this.events = Object.create(null);
    if (!this.events[type]) { 
      this.events[type] = [callBack];
    } else { 
      this.events[type].push(callBack);
    }
  }
  // 删除订阅
  off(type, callBack) { 
    if (!this.events[type]) return;
    this.events[type] = this.events[type].filter(item => { 
      return item !== callBack;
    });
  }
  // 只执行一次订阅事件
  once(type, callBack) { 
    function fn() { 
      callBack();
      this.off(type, fn);
    }
    this.on(type, fn);
  }
  // 触发事件
  emit(type, ...rest) { 
    this.events[type] &&
      this.events[type].forEach(fn => fn.apply(this, rest));
  }
}
// 使用如下
const event = new EventEmitter();
const handle = (...rest) => { 
  console.log(rest);
};
event.on("click", handle);
event.emit("click", 1, 2, 3, 4);
event.off("click", handle);
event.emit("click", 1, 2);
event.once("dbClick", () => { 
  console.log(123456);
});
event.emit("dbClick");
event.emit("dbClick");