算法||程序 汇总

1. 节流防抖

//防抖
dom.addEventListener("click", debounce(fn, 500));
function debounce(fun, wait){
    var timeId;
    return function(){
        var args = arguments;
        var context = this;
        if(timeId) clearTimeout(timeId);
        timeId = setTimeout(()=>{fn.apply(context, args)}, wait);
    }
}

//节流
scroll = throttle(fn, 300);
function throttle(fn, wait){
    var pre = 0;
    return function(){
        var args = arguments;
        var context = this;
        var now = Date.now();
        if(now-pre > wait){
            fn.apply(context, args);
            pre = now;
        }
    }
}

2.数组中第k大的数字

//寻找数组的第k大数
function findKLongest(arr, k){
    var left = 0,right = arr.length-1;
    var index = partition(arr, left, right);
    while(index !== k-1){
        if(index < k-1){
            left = index+1;
            index = partition(arr, left, right);
        }else{
            right = index -1;
            index = partition(arr, left, right);
        }
    }
    return arr[k-1];
}
function partition(arr, left, right){
    var target = arr[right];
    while(left < right){
        while(left<right && arr[left]>target){
            left++;
        }
        arr[right] = arr[left];
        while(left<right&&arr[right]<target){
            right--;
        }
        arr[left]= arr[right];
    }
    arr[right] = target;
    return left;
}
findKLongest([1,2,3,4,2,4,2,4], 4); //3

3.二叉树转链表

//二叉树转化为链表（层序）
function tree2list(tree){
    var quene = [];
    quene.push(tree);
    while(quene.length>0){
        var node = quene.shift();
        if(node.left && node.left!={}) quene.push(node.left);
        if(node.right) quene.push(node.right);
        node.next = quene[0] ? quene[0]:null;
    }
    return node;
}

4.寄生组合继承

//寄生组合式继承
function Super(name){
    this.name = name;
}
Super.prototype.getName = function(){
    return this.name;
}
function Sub(name, age){
    this.age = age;
    Super.call(this, name);
}
Sub.prototype = inherit(Sub, Super);
Sub.prototype.getAge = funtion(){
    return this.age;
}
function inherit(sub, super){
    var fun = Object.create(super.prototype);
    fun.constructor = sub;
    return fun;
}

5.事件的发布订阅机制

//事件发布订阅机制
class EventEmitter {
  /* 功能实现 */
constructor(){
this.handlers = {}
}
on(eventName,handle){
   if(!(eventName in this.handlers)){
      this.handlers[eventName] = [];
   }
  this.handlers[eventName].push(handle);
}
emit(eventName){
  let arr = [...arguments];
  arr.shift();
  for(let i = 0;i<this.handlers[eventName].length;i++){
      this.handlers[eventName][i](...arr);
  }  
}
}
const event = new EventEmitter();
event.on('someEvent', (...args) => { 
console.log('some_event triggered', ...args);
}); 
event.emit('someEvent', 'abc', '123'); 

6.原生ajax

//原生ajax
var form = document.getElementById("form");
var data = new FormData(form);//传输表单数据
var xhr = new XMLHttpRequest();
    xhr.onreadyStateChange = function(){
        if(xhr.readyState == 4){    //响应全部收到
            try{
                if((xhr.status >= 200 && xhr.status<300) || (xhr.status == 304)){   //状态成功，304表示可以使用缓存
                    alert(xhr.responseText);
                }else{
                    alert(xhr.status);
                }
            }catch{

            }        
        }
    }
xhr.open("post", "https://www.wechatvr.org/jsconfig", false);   //第三位参数表示是否是异步
    xhr.timeout = 1000;                                          //请求超时处理
    xhr.ontimeout = function(){
        alert("超时");
    }
    xhr.setRequestHeader("myKey", "myValue");                 //自定义请求头部
    xhr.overrideMimeType("text/xml");                         //重写mime类型，表示处理服务器返回的数据的处理方式
xhr.send(data);                         //如果是get方法，那么则为null

7.reduce转map

//reduce写map
function myMap(arr, fn, _this=null){
    var res = [];
    arr.reduce((total, cur, curIndex, arr)=>{
        res.push(fn.call(_this, cur, curIndex, arr));
    }, null);
    return res;
}

8.最大子序列的和 动态规划

//最大子序列的和  动态规划
function func(arr){
    var sum = arr[0];
    var cur = 0;
    for(var i=0;i<arr.length;i++){
        if(cur < 0) cur = arr[i];
        else { cur += arr[i]; }
        sum = Math.max(cur, sum);
    }
    return sum;
}

9.最长连续子序列 双指针法

//最长连续子序列
function s(str){
  var start = 0;
  var len = 0;
  var index = 0;
  while(index<str.length){
    var t = index;
    while(t+1<str.length && str.charCodeAt(t+1)-==1){

    }
  }
}

10.手写promise

//手写promise
  // 判断变量否为function
  const isFunction = variable => typeof variable === 'function'
  // 定义Promise的三种状态常量
  const PENDING = 'PENDING'
  const FULFILLED = 'FULFILLED'
  const REJECTED = 'REJECTED'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加状态
      this._status = PENDING
      // 添加状态
      this._value = undefined
      // 添加成功回调函数队列
      this._fulfilledQueues = []
      // 添加失败回调函数队列
      this._rejectedQueues = []
      // 执行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle时执行的函数
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        this._status = FULFILLED
        // 依次执行成功队列中的函数，并清空队列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次执行失败队列中的函数，并清空队列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
          当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            runFulfilled(value)
          }, err => {
            this._value = err
            runRejected(err)
          })
        } else {
          this._value = val
          runFulfilled(val)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加reject时执行的函数
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次执行失败队列中的函数，并清空队列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封装一个成功时执行的函数
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        // 封装一个失败时执行的函数
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 当状态为pending时，将then方法回调函数加入执行队列等待执行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 当状态已经改变时，立即执行对应的回调函数
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例，直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }

11.diff算法

//diff源码
zzvar _ = require('./util')
var patch = require('./patch')
var listDiff = require('list-diff2')
 
function diff (oldTree, newTree) {
  var index = 0
  var patches = {}
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}
 
function dfsWalk (oldNode, newNode, index, patches) {
  var currentPatch = []
 
  // 节点被移除Node is removed.
  if (newNode === null) {
  // Real DOM node will be removed when perform reordering, 
  // so has no needs to do anthings in here
  
  //节点为文本 内容改变TextNode content replacing
  } else if (_.isString(oldNode) && _.isString(newNode)) {
    if (newNode !== oldNode) {
      currentPatch.push({ type: patch.TEXT, content: newNode })
    }
 
  //节点类型相同 遍历属性和孩子
  // Nodes are the same, diff old node's props and children
  } else if (
      oldNode.tagName === newNode.tagName &&
      oldNode.key === newNode.key
    ) {
 
    // Diff props 遍历属性
    var propsPatches = diffProps(oldNode, newNode)
    if (propsPatches) {
      currentPatch.push({ type: patch.PROPS, props: propsPatches })
    }
 
    // Diff children. If the node has a `ignore` property, do not diff children
    // 遍历孩子
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }
 
  // 节点类型不同 新节点直接替换旧节点Nodes are not the same, replace the old node with new node
  } else {
    currentPatch.push({ type: patch.REPLACE, node: newNode })
  }
 
  //index是每个节点都有的一个索引 每个！
  if (currentPatch.length) {
    patches[index] = currentPatch
  }
}
 
//为什么这里要把子节点的递归单独写出来 而不直接写在dfswalk函数里面呢？
//我认为其实非要写也是可以写进dfswalk里面的，但是为了功能分离、解耦所以单独提出来写
function diffChildren (oldChildren, newChildren, index, patches, currentPatch) {
  //该key就指的是循环绑定上的key值
  var diffs = listDiff(oldChildren, newChildren, 'key')
  newChildren = diffs.children
 
  if (diffs.moves.length) {
    var reorderPatch = { type: patch.REORDER, moves: diffs.moves }
    currentPatch.push(reorderPatch)
  }
 
  var leftNode = null
  var currentNodeIndex = index
  _.each(oldChildren, function (child, i) {
    var newChild = newChildren[i]
    currentNodeIndex = (leftNode && leftNode.count)
    //index当前的节点的标志。因为在深度优先遍历的过程中，每个节点都有一个index
    //count为子节点个数
    //为什么这里是+leftNode.count, 因为每次diffChildren是遍历该节点的子节点按照顺序来
    //自己的第一个子节点是自己的index再加上和左边节点的子节点数也就是leftNode.index
    //第一次进diffchildren函数肯定是第一个节点，不存在有左边的节点，所以...
      ? currentNodeIndex + leftNode.count + 1
    //
      : currentNodeIndex + 1
    dfsWalk(child, newChild, currentNodeIndex, patches)
    leftNode = child
  })
}
 
function diffProps (oldNode, newNode) {
  var count = 0
  var oldProps = oldNode.props
  var newProps = newNode.props
 
  var key, value
  var propsPatches = {}
 
  // Find out different properties
  for (key in oldProps) {
    value = oldProps[key]
    if (newProps[key] !== value) {
      count++
      propsPatches[key] = newProps[key]
    }
  }
 
  // Find out new property
  for (key in newProps) {
    value = newProps[key]
    if (!oldProps.hasOwnProperty(key)) {
      count++
      propsPatches[key] = newProps[key]
    }
  }
  // If properties all are identical
  if (count === 0) {
    return null
  }
  return propsPatches
}
 
 
 
function isIgnoreChildren (node) {
  return (node.props && node.props.hasOwnProperty('ignore'))
}
 
module.exports = diff

/**
 * Diff two list in O(N).
 * @param {Array} oldList - Original List
 * @param {Array} newList - List After certain insertions, removes, or moves
 * @return {Object} - {moves: <Array>}
 *                  - moves is a list of actions that telling how to remove and insert
 */
function diff (oldList, newList, key) {
    var oldMap = makeKeyIndexAndFree(oldList, key)
    var newMap = makeKeyIndexAndFree(newList, key)
   
    var newFree = newMap.free
   
    //oldKeyIndex和newKeyIndex是以节点为key，index为值的一个对象
    var oldKeyIndex = oldMap.keyIndex
    var newKeyIndex = newMap.keyIndex
   
    var moves = []
   
    // a simulate list to manipulate
    var children = []   
    var i = 0
    var item
    var itemKey
    var freeIndex = 0
   
    // first pass to check item in old list: if it's removed or not
    while (i < oldList.length) {
      item = oldList[i]
      itemKey = getItemKey(item, key)
      if (itemKey) {
        //如果该旧节点的key值 在新节点中不存在 push null
        if (!newKeyIndex.hasOwnProperty(itemKey)) {
          children.push(null)
        //如果存在，则把该节点push进children数组
        } else {
          var newItemIndex = newKeyIndex[itemKey]
          children.push(newList[newItemIndex])
        }
      //如果旧节点本身不存在，判断新节点中是不是也不存在？
      } else {
        var freeItem = newFree[freeIndex++]
        children.push(freeItem || null)
      }
      i++
    }
   
    //simulateList里面是旧树和新树里面都存在的节点，新树单独有的新节点并不在里面
    var simulateList = children.slice(0)
   
    //移除不存在的节点
    // remove items no longer exist
    i = 0
    while (i < simulateList.length) {
      if (simulateList[i] === null) {
        remove(i)
        removeSimulate(i)
      } else {
        i++
      }
    }
   
    // i is cursor pointing to a item in new list
    // j is cursor pointing to a item in simulateList
    var j = i = 0
    while (i < newList.length) {
      item = newList[i]
      itemKey = getItemKey(item, key)
   
      var simulateItem = simulateList[j]
      var simulateItemKey = getItemKey(simulateItem, key)
   
      if (simulateItem) {
        //新树中的此节点不为新增节点(依据：同一位置的key是否相同，即simulateItemKey和itemkey是否一致)
        //两者key相同，说明该节点位置没有改动
        if (itemKey === simulateItemKey) {
          j++
   
        //此位置节点的key与同位置的simulateList中的节点的key不一致
        //判断是新增节点(依据：旧树中是否有此节点)还是只是移位了
        } 
        else {
          //情况1：旧树中没有此节点，为新增节点，直接插入一个新节点
          // new item, just inesrt it
          if (!oldKeyIndex.hasOwnProperty(itemKey)) {
            insert(i, item)
          } 
   
          //情况2：旧树中有此节点，说明只是节点移动了位置
          else {
            //if remove current simulateItem make item in right place
            //then just remove it
            //情况2.1当前节点移动被移动
            //simulateList[1,2,3,4,5] newList[2,3,4,5,1]
            var nextItemKey = getItemKey(simulateList[j + 1], key)
            if (nextItemKey === itemKey) {
              remove(i)
              removeSimulate(j)
              j++ // after removing, current j is right, just jump to next one
            } 
          
            else {
              // else insert item
              // 情况2.2当前及之后的多个节点被移动 or 后面的节点移动到了前面
              // simulateList[1,2,3,4,5] newList[3,4,5,1,2]
              // or simulateList[1,2,3,4,5] newList[5,1,2,3,4]
              insert(i, item)
            }
          }
        }
      } 
      //已经遍历完simulateList了(j>=simulateList.length)，如果i还未遍历完newList
      //只能说明在新树末尾增加了一个新节点 直接insert
      else {
        insert(i, item)
      }
   
      i++
    }
   
    //if j is not remove to the end, remove all the rest item
    //如果j没有遍历完simulateList，遍历删除剩下的item
    var k = simulateList.length - j
    while (j++ < simulateList.length) {
      k--
      remove(k + i)
    }
   
   
    function remove (index) {
      var move = {index: index, type: 0}
      moves.push(move)
    }
   
    function insert (index, item) {
      var move = {index: index, item: item, type: 1}
      moves.push(move)
    }
   
    function removeSimulate (index) {
      simulateList.splice(index, 1)
    }
   
    return {
      moves: moves,
      children: children
    }
  }
   
  /**
   * Convert list to key-item keyIndex object.
   * @param {Array} list
   * @param {String|Function} key
   */
  function makeKeyIndexAndFree (list, key) {
    var keyIndex = {}
    var free = []
    for (var i = 0, len = list.length; i < len; i++) {
      var item = list[i]
      var itemKey = getItemKey(item, key)
      if (itemKey) {
        keyIndex[itemKey] = i
      } else {
        free.push(item)
      }
    }
    return {
      keyIndex: keyIndex,
      free: free
    }
  }
   
  //获取节点的key值
  function getItemKey (item, key) {
    //void 666 = undefined 666纯属开玩笑
    if (!item || !key) return void 666
    return typeof key === 'string'
      ? item[key]
      : key(item)
  }
   
  exports.makeKeyIndexAndFree = makeKeyIndexAndFree // exports for test
  exports.diff = diff


  var index= 0;
  var id = function(){
    return index++;
  }
  this.state.list.forEach((item)=>{
    if(!item.key){
      item.key = id();
    }
    return (
      item
    )
  });

12.JSONP封装

//JSONP封装
function jsonp(url, data, callback){
  if(typeof data == "string"){
    callback = data;
    data = {};
  }
  var hasParams = (url.indexOf("?")==-1);
  url += (hasParams ? "?" : "&") + "callback=" + callback;
  for(let key in data){
    url += "&" + key + "=" + data[key];
  }
  var script = document.createElement("script");
  script.src = url;
  document.querySelector("head").appendChild(script);
}

jsonp("https://www.baidu.com", {id:12,name: "lyn"}, "myCallback");
jsonp("https://weixin.wechatvr.org?activityId=1", "myCallback");

//handle callback
let myCallback = (res) => {
  for(let key in res){
    console.log(key + ":" + res[key]);
  }
}