手写实现系列

实现 new 方法

/*
*1.创建空对象
*2.链接到原型
*3.绑定this
*4.返回新对象
*/
function _new(fn, ...args) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  // let obj = Object.create(fn.prototype)  等价于前两步
  fn.apply(obj, args); // 等价于fn.call(obj, ...args)
  return typeof result === "object" ? result : obj;
}

Object.create 的实现原理

function _create(obj) {
  // __proto__在IE下已被禁用，兼容性不好，不建议使用
  // let emptyObj = {};
  // emptyObj .__proto__ = obj;
  // return emptyObj ;
  // 推荐方法
  // 使用空方法原型挂在目标对象，做实例化
  // 空方法实例化可以创建空对象
  // 方法的原型等价于实例化后的对象的原型链，即 (方法).prototype = (实例对象).__proto__ 
  function Fun() {};
  Fun.prototype = obj;
  return new Fun();
}

实现数据绑定

function dataBind() {
  let obj = {
    msg: '' // 绑定的值
  };
  let input = document.getElementById('input');
  let span = document.getElementById('span');
  // 数据劫持
  Object.defineProperty(obj, 'msg', {
    get() {
      // 获取数据
    },
    set(newVal) {
      // 修改数据
      input.value = newVal;
      span.innerHTML= newVal;
    }
  })
  input.addEventListener('keyup', function(e) {
    obj.msg = e.target.value; // 目标元素input的value值
  });
}

深拷贝

// JSON.parse(JSON.stringify())
function deepClone(obj) {
  if (typeof obj !== "object") return obj
    let clone = Object.assign({}, obj)
    Object.keys(clone).forEach((key) => {
      clone[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key]
    })
    if(Array.isArray(obj)) {
      clone.length = obj.length
      return Array.from(clone)
    }
  return clone
}

防抖函数

// 在规定时间内未触发第二次，则执行
function debounce(fn, delay) {
  // 清除前面的定时器，然后创建一个新的定时器
  let timer = null;
  // 利用闭包保存定时器
  return function() {
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

节流函数

// 在规定时间内只触发一次
function throttle(fn, delay) {
  // 上一次执行fn的时间,转换成时间戳，单位毫秒
  let prev = +new Date(); // Date.now()
  return function () {
    let now = Date.now();
    if (now - prev >= delay) {
      prev = Date.now();
      fn();
    }
  };
}

冒泡排序

function bubbleSort(arr) {
  if (arr instanceof Array && arr.length > 1) {
    let len = arr.length;
    // 外层循环，每次找到一个最大值，最后一项不需要处理
    for (let x = 0; x < len - 1; x++) {
    // 内层循环，控制比较的次数，并判断两个数的大小(每次外层循环会判断出一项，so内层需减去外层循环次数)
      for (let y = 0; y < len - 1 - x; y++) {
      // 如果前面数大，就放到后面（小至大的排序规则）
        if (arr[y] > arr[y + 1]) {
          let temp = arr[y];
          arr[y] = arr[y + 1];
          arr[y + 1] = temp;
        }
      }
    }
  }
  return arr;
}

快速排序

function quickSort(arr) {
  if (arr instanceof Array && arr.length > 1) {
    let left = []; // <  中间数存放数组
    let right = []; // >= 中间数存放数组
    let index = Math.floor(arr.length / 2);
    let val = arr.splice(index, 1)[0];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] < val) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }
    return arguments.callee(left).concat(...val, arguments.callee(right));
  } else {
    return arr;
  }
}