JS Insts

工具函数

防抖与节流

/**
 * 防抖：仅执行一次
 */
const debounce = <F extends (...args: any[]) => any>(func: F, delay = 300) => {
  let timer: number | null = null;
  const ret = (...args: any) => {
  if (timer) {
    window.clearTimeout(timer);
  }
  timer = window.setTimeout(() => {
    func(...args);
    timer = null;
  }, delay);
  };
  return ret as (...args: Parameters<F>) => void;
};
element.onclick = debounce(myFunc);

/**
 * 节流：限制最小执行间隔
 */
const throttle = <F extends (...args: any[]) => any>(func: F, delay = 300) => {
  let timer: number | null = null;
  const ret = (...args: any) => {
  if (!timer) {
    timer = window.setTimeout(() => {
    func(...args);
    timer = null;
    }, delay);
  }
  };
  return ret as (...args: Parameters<F>) => void;
};
window.onresize = throttle(myFunc);

柯里化

将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)：

/**
 * @param {Function} func
 * @return {Function}
 */
function curry(func) {
  return function curried(...args) {
  if (args.length >= func.length) {
    return func.apply(this, args);
  } else {
    return function (...args2) {
    return curried.apply(this, [...args, ...args2]);
    };
  }
  };
}

扁平化

数组

// 标准递归
function flatten(arr) {
  return arr.reduce((pre, cur) => {
  return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, []);
}

// 字符串分割
function flatten(arr) {
  return Array.prototype.toString
  .call(arr)
  .split(',')
  .map((val) => Number(val));
}

// 重复扩展直至扁平
function flatten(arr) {
  while (arr.some((val) => Array.isArray(val))) {
  arr = [...arr];
  }
  return arr;
}

对象

输入：

{
  a: 1,
  b: [1, 2, { c: true }, [3]],
  d: { e: 2, f: 3 },
  g: null,
}

/**
 * @param {Array} input
 * @param {string} name
 * @param {Object} res
 */
function _flatten(input, name, res) {
  for (let key of Object.keys(input)) {
  let baseName = name;
  const val = input[key];
  if (val === null || val === undefined) {
    continue;
  }
  if (/^[0-9]/.exec(`${key}`)) {
    baseName += `[${key}]`;
  } else if (baseName === '') {
    baseName += `${key}`;
  } else {
    baseName += `.${key}`;
  }
  if (typeof val === 'object') {
    _flatten(val, baseName, res);
  } else {
    res[baseName] = val;
  }
  }
}
/**
 * @param {Array} input
 * @return {Object}
 */
function flatten(input) {
  const res = {};
  _flatten(input, '', res);
  return res;
}

去重

Array.prototype.unique = function () {
  const arr = this;
  return arr.filter((val, idx) => arr.indexOf(val) === idx);
};

深拷贝

// 可以通过 WeakMap 解决循环引用问题，同时保证内存被回收
const map = new WeakMap();
function cloneDeep(src) {
  if (src && typeof src === 'object') {
  if (map.has(src)) {
    return map.get(src);
  } else {
    map.set(src, src);
  }
  const ret = Array.isArray(src) ? [] : {};
  for (let key of Object.keys(src)) {
    ret[key] = cloneDeep(src[key]);
  }
  return ret;
  } else {
  return src;
  }
}

Promise

Promise 构造函数

Promises/A+ 标准中仅指定了 Promise 对象的 then 方法的行为，其它一切我们常见的方法、函数都并没有指定。

class Promise {
  constructor(func) {
  // 初始化状态
  const self = this;
  this.status = 'pending';
  this.data = undefined;
  this.onResolvedCallbacks = [];
  this.onRejectedCallbacks = [];

  // API 函数
  function resolve(value) {
    if (self.status === 'pending') {
    self.status = 'resolved';
    self.data = value;
    self.onResolvedCallbacks.forEach((func) => {
      func();
    });
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
    self.status = 'rejected';
    self.data = reason;
    self.onRejectedCallbacks.forEach((func) => {
      func();
    });
    }
  }

  // 执行同步构造器
  try {
    func(resolve, reject);
  } catch (e) {
    reject(e);
  }
  }

  then(onResolved, onRejected) {
  // 检查参数
  if (typeof onResolved !== 'function') {
    onResolved = function () {};
  }
  if (typeof onRejected !== 'function') {
    onRejected = function () {};
  }

  // resolve 或 reject 则执行对应回调
  if (this.status === 'resolved') {
    return new Promise((resolve, reject) => {
    try {
      resolve(onResolved(this.data));
    } catch (e) {
      reject(e);
    }
    });
  }
  if (this.status === 'rejected') {
    return new Promise((resolve, reject) => {
    try {
      resolve(onRejected(this.data));
    } catch (e) {
      reject(e);
    }
    });
  }

  // pending 状态则等待 pending 完成
  if (this.status === 'pending') {
    return new Promise((resolve, reject) => {
    this.onResolvedCallbacks.push(() => {
      try {
      resolve(onResolved(this.data));
      } catch (e) {
      reject(e);
      }
    });
    this.onRejectedCallbacks.push(() => {
      try {
      resolve(onRejected(this.data));
      } catch (e) {
      reject(e);
      }
    });
    });
  }
  }
}

Polyfill `Promise.all()`

/**
 * @param {Array} arr
 * @return {Promise<any[]>}
 */
function promiseAll(arr) {
  return new Promise((resolve, reject) => {
  let pending = arr.length;
  const results = new Array(arr.length);

  arr.forEach((p, idx) => {
    p.then(
    (res) => {
      results[idx] = res;
      if (--pending === 0) {
      resolve(results);
      }
    },
    (e) => reject(e)
    );
  });
  });
}

Promise 并发限制

/**
 * @param {number} limit
 * @param {Array} arr
 * @param {Function} fetch
 * @return {Promise<any[]>}
 */
async function asyncPool(limit, arr, fetch) {
  const pending = [];
  const results = [];
  let index = 0; // 入池用下标

  // 入池一个
  async function push() {
  // 若已经全部进入池子则等待全部完成
  if (index >= arr.length) {
    return;
  }

  // 获得一个 Promise
  const p = fetch(arr[index]);
  pending.push(p);
  results.push(p);
  // Promise 完成后在 pending 中删除
  p.then(() => pending.splice(pending.indexOf(p), 1));

  if (pending.length >= limit) {
    await Promise.race(pending);
  }
  index++;
  await push();
  }

  await push();
  return await Promise.all(results);
}

原生 API

`bind()`

Function.prototype.bind = function (...args) {
  const func = this; // 需要绑定的函数
  const ctx = args[0]; // 绑定的 this
  const params = args.slice(1); // bind 时传入的参数
  return (...args) => func.apply(ctx, [...params, ...args]);
};

`instanceof`

function instanceOf(inst, func) {
  let proto = Object.getPrototypeOf(inst);
  while (true) {
  if (!proto) {
    return false;
  }
  if (proto === func.prototype) {
    return true;
  }
  proto = Object.getPrototypeOf(proto);
  }
}

`new`

JavaScript - 模拟实现 new

`reduce()` 实现 `map()`

Array.prototype.mapPolyfill = function (func, thisValue) {
  const self = thisValue || this;
  const ret = [];
  this.reduce((pre, cur, idx, arr) => {
  return ret.push(func.call(self, cur, idx, arr));
  }, ret);
  return ret;
};

语言特性

Iterable 对象

const object = {
  a: 1,
  b: 2,
  c: 3,
  // 本质是一个 Generator 函数
  *[Symbol.iterator]() {
  for (const key of Object.keys(this)) {
    yield this[key];
  }
  },
};
console.log(...object); // 1 2 3
object.d = 4;
console.log(...object); // 1 2 3 4

LazyMan (事件循环)

new LazyMan('Tony')
  .eat('lunch')
  .eat('dinner')
  .sleepFirst(5)
  .sleep(10)
  .eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

class LazyMan {
  constructor(name) {
  this.taskList = [];
  console.log(`Hi I am ${name}`);
  // 等待第一次事件循环
  // 即 tasklist 初始化完成
  setTimeout(() => {
    this.next();
  }, 0);
  }

  next() {
  const func = this.taskList.shift();
  func && func();
  }

  eat(food) {
  const func = () => {
    console.log(`I am eating ${food}`);
    this.next();
  };
  this.taskList.push(func);
  return this;
  }

  sleepFirst(time) {
  const func = () => {
    setTimeout(() => {
    console.log(`等待了${time}秒...`);
    this.next();
    }, time * 1000);
  };
  this.taskList.unshift(func);
  return this;
  }

  sleep(time) {
  const func = () => {
    setTimeout(() => {
    console.log(`等待了${time}秒...`);
    this.next();
    }, time * 1000);
  };
  this.taskList.push(func);
  return this;
  }
}

工具函数

防抖与节流

柯里化

扁平化

数组

对象

去重

深拷贝

Promise

Promise 构造函数

Polyfill Promise.all()

Promise 并发限制

原生 API

bind()

instanceof

new

reduce() 实现 map()

语言特性

Iterable 对象

LazyMan (事件循环)

Polyfill `Promise.all()`

`bind()`

`instanceof`

`new`

`reduce()` 实现 `map()`