BFE

柯里化

问题

描述

const join = (a, b, c) => {
  return `${a}_${b}_${c}`;
};
const curriedJoin = curry(join);
curriedJoin(1, 2, 3); // '1_2_3'
curriedJoin(1)(2, 3); // '1_2_3'
curriedJoin(1, 2)(3); // '1_2_3'

实现

function curry(fn) {
  return function curryInner(...args) {
    if (args.length >= fn.length) return fn(...args);
    return (...args2) => curryInner(...args, ...args2);
  };
}

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args)
    } else {
      return curried.bind(this, ...args);
    }
  }
}

实现支持placeholder的curry()

问题

描述

const join = (a, b, c) => {
   return `${a}_${b}_${c}`
}

const curriedJoin = curry(join)
const _ = curry.placeholder

curriedJoin(1, 2, 3) // '1_2_3'

curriedJoin(_, 2)(1, 3) // '1_2_3'

curriedJoin(_, _, _)(1)(_, 3)(2) // '1_2_3'

实现

function curry(fn) {
  return function curried(...args) {
    const validArgs = args.slice(0, fn.length).filter(i => i !== curry.placeholder);
    if (validArgs.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        const processArgs = args.map(arg => arg === curry.placeholder && nextArgs.length ? nextArgs.shift() : arg)
        return curried(...processArgs, ...nextArgs);
      }
    }
  }
}
curry.placeholder = Symbol()

实现Array.prototype.flat()

问题

描述

const arr = [1, [2], [3, [4]]];

flat(arr)
// [1, 2, 3, [4]]

flat(arr, 1)
// [1, 2, 3, [4]]

flat(arr, 2)
// [1, 2, 3, 4]

实现

function flat(arr, depth = 1) {
  return arr.reduce((acc, item) => {
    if (Array.isArray(item) && depth > 0) {
      acc.push(...flat(item, depth - 1))
    } else {
      acc.push(item)
    }
    return acc
  }, [])
}

function flat(arr, depth = 1) {
  while (depth-- > 0 && arr.some(Array.isArray))
    arr = [].concat(...arr)
  return arr
}

手写throttle()

问题

描述

实现

/**
 * @param {(...args:any[]) => any} func
 * @param {number} wait
 * @returns {(...args:any[]) => any}
 */
function throttle(func, wait) {
  let timer = 0;
  let lastArgs;
  return function throttled(...args) {
    if (timer) {
      lastArgs = args;
    } else {
      func.apply(this, args)
      timer = setTimeout(() => {
        if (lastArgs) {
          func.apply(this, lastArgs)
        }
        timer = null;
      }, wait)
    }
  }
}

手写debounce()

问题

描述

实现

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

shuffle()随机打乱一个数组

问题

描述

const arr = [1, 2, 3, 4]

[1, 2, 3, 4]
[1, 2, 4, 3]
[1, 3, 2, 4]
[1, 3, 4, 2]
[1, 4, 2, 3]
[1, 4, 3, 2]
[2, 1, 3, 4]
[2, 1, 4, 3]
[2, 3, 1, 4]
[2, 3, 4, 1]
[2, 4, 1, 3]
[2, 4, 3, 1]
[3, 1, 2, 4]
[3, 1, 4, 2]
[3, 2, 1, 4]
[3, 2, 4, 1]
[3, 4, 1, 2]
[3, 4, 2, 1]
[4, 1, 2, 3]
[4, 1, 3, 2]
[4, 2, 1, 3]
[4, 2, 3, 1]
[4, 3, 1, 2]
[4, 3, 2, 1]

实现

function getRandomIndexWithInMax(n) {
  return Math.floor(Math.random() * n);
}

function shuffle(arr) {
  // modify the arr inline to change the order randomly
  const op = [...arr];
  do {
    const random = getRandomIndexWithInMax(op.length);
    const item = op[random];
    op.splice(random, 1);
    arr[op.length - 1] = item;
  } while(op.length);
}

实现pipe()

问题

描述

const times = (y) =>  (x) => x * y
const plus = (y) => (x) => x + y
const subtract = (y) => (x) => x - y
const divide = (y) => (x) => x / y

pipe([
  times(2),
  times(3)
])
// x * 2 * 3

pipe([
  times(2),
  plus(3),
  times(4)
])
// (x * 2 + 3) * 4

pipe([
  times(2),
  subtract(3),
  divide(4)
])

实现

const pipe = (fns) => (x) => fns.reduce((y, fn) => fn(y), x)

利用栈(Stack)创建队列(Queue)

问题

class Stack {
  push(element) { /* 添加元素到stack */ }
  peek() { /* 获取top 元素 */ }
  pop() { /* 弹出top 元素 */}
  size() { /* 获取元素数量 */}
}

class Queue {
  enqueue(element) { /* 添加元素到Queue，类似于Array.prototype.push */ }
  peek() { /* 获取头元素*/ }
  dequeue() { /* 弹出头元素，类似于Array.prototype.pop */ }
  size() { /* 获取元素数量 */ }
}

实现

/* you can use this Class which is bundled together with your code

class Stack {
  push(element) { // add element to stack }
  peek() { // get the top element }
  pop() { // remove the top element}
  size() { // count of element }
}
*/

/* Array is disabled in your code */

// you need to complete the following Class
class Queue {
  constructor() {
    this.inStack = new Stack();
    this.outStack = new Stack();
  }
  enqueue(element) {
    this.inStack.push(element);
  }
  peek() {
    const temp = this.dequeue();
    this.outStack.push(temp);
    return temp;
  }
  size() {
    return this.outStack.size() + this.inStack.size();
  }
  dequeue() {
    if (!this.outStack.size()) {
      while(this.inStack.size()) {
        this.outStack.push(this.inStack.pop())
      }
    }
    return this.outStack.pop();
  }
}

实现一个Event Emitter

问题

const emitter = new Emitter()

const sub1  = emitter.subscribe('event1', callback1)
const sub2 = emitter.subscribe('event2', callback2)

// 同一个callback可以重复订阅同一个事件
const sub3 = emitter.subscribe('event1', callback1)

emitter.emit('event1', 1, 2);
// callback1 会被调用两次

sub1.release()
sub3.release()
// 现在即使'event1'被触发,
// callback1 也不会被调用

实现

class EventEmitter {
  constructor() {
    this.eventStore = {}
  }
  subscribe(eventName, callback) {
    if (!this.eventStore[eventName]) {
      this.eventStore[eventName] = []
    }
    this.eventStore[eventName].push(callback);
    return {
      release: () => {
        const index = this.eventStore[eventName].indexOf(callback);
        this.eventStore[eventName].splice(index, 1);
      }
    };
  }
  emit(eventName, ...args) {
    this.eventStore[eventName].forEach(fn => fn(...args))
  }
}

实现一个DOM element store

问题

const map = new Map()
map.set(domNode, somedata)

class NodeStore {

  set(node, value) {

  }

  get(node) {

  }

  has(node) {

  }
}

实现

function processingKey(key) {
    if (key === undefined) {
        return 'undefined'
    } else if (key === null) {
        return 'null'
    } else {
        return key.toString()
    }
}
obj[processingKey(key)] = value

class NodeStore {
  /**
  * @param {Node} node
  * @param {any} value
  */
 constructor() {
   this.nodes = {};
 }
 set(node, value) {
  node.__nodeStoreKey__ = Symbol();  // to store same elements multiple times with uniqueness (as different nodes can have different data)
  this.nodes[node.__nodeStoreKey__] = value;
 }
 /**
  * @param {Node} node
  * @return {any}
  */
 get(node) {
  return this.nodes[node.__nodeStoreKey__];
 }
 
 /**
  * @param {Node} node
  * @return {Boolean}
  */
 has(node) {
  return !!this.nodes[node.__nodeStoreKey__];
 }
}

检测 data type

问题

detectType(1) // 'number'
detectType(new Map()) // 'map'
detectType([]) // 'array'
detectType(null) // 'null'

// judge的时候会有更多

实现

function detectType(data) {
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

手写JSON.stringify()

描述

• 转换值如果有toJSON() 方法，该方法定义什么值将被序列化。

• 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。

• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

• undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).

• 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

• 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

• Date 日期调用了 toJSON() 将其转换为了 string 字符串（同 Date.toISOString()），因此会被当做字符串处理。

• NaN 和 Infinity 格式的数值及 null 都会被当做 null。

• 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

实现

const isFunOrUndefinedOrSymbol = (e) => typeof e === 'function' || typeof e === 'undefined' || typeof e === 'symbol';

function stringify(data) {
  if ([NaN, null, Infinity].includes(data)) {
    return 'null';
  }
  if (isFunOrUndefinedOrSymbol(data)) {
    return undefined;
  }
  const type = typeof data;
  switch (type) {
    case 'bigint': throw Error('bigints are not supported');
    case 'string': return `"${data}"`;
    case 'object': {
      if (data.toJSON && typeof data.toJSON === 'function') {
         // 对象可能内置toJSON方法来自定义序列化对象
        return stringify(data.toJSON());
      }
      if (Array.isArray(data)) {
        return `[${data.map(e => isFunOrUndefinedOrSymbol(e) ? 'null' : stringify(e)).join()}]`;
      }
      return '{' + Object.keys(data).filter(key => !isFunOrUndefinedOrSymbol(data[key])).map(key => `"${key}":${stringify(data[key])}`).join() + '}';
    }
    default: return String(data);
  }
}

实现Object.assign()

Object.assign(target,  ...source)

var a = {};
Object.defineProperties(a, {
    one: {enumerable: true, value: 1},
    two: {enumerable: false, value: 2},
});
Object.keys(a); // ["one"]
Object.getOwnPropertyNames(a); // ["one", "two"]

实现

function objectAssign(target, ...sources) {

  if (target === undefined || target === null) {
    throw 'err'
  }

  target = Object(target)
  
  sources.forEach(source => {
    if (source === undefined || source === null) {
      return
    }
    Object.defineProperties(
      target,
      Object.getOwnPropertyDescriptors(source)
    )
  })
  
  return target
  
}

实现Promise.all()

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

实现

function all(promises) {
  let count = 0;
  const res = []
  const len = promises.length;
  if (!len) {
    return Promise.resolve([])
  }
  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise)
        .then((value) => {
          count++;
          res[i] = value;
          if (count === len) {
            resolve(res)
          }
        })
        .catch((reson) => {
          reject(reson)
        })
    })
  })
}

实现Promise.race()

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。source: MDN

实现

function race(promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise)
        .then((value) => {
          resolve(value)
        })
        .catch((reson) => {
          reject(reson)
        })
    })
  })
}

实现Promise.any()

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise 和AggregateError类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和Promise.all()是相反的。

• from MDN

new AggregateError(
  'No Promise in Promise.any was resolved',
  errors
)

实现

function any(promises) {
  let count = 0;
  const resons = []
  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise)
        .then((value) => {
          resolve(value)
        })
        .catch((reson) => {
          count++;
          resons[i] = reson;
          if (count === promises.length) {
            reject(new AggregateError('No Promise in Promise.any was resolved', resons))
          }
        })
    })
  })
}

实现Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

• from MDN

实现

/**
 * @param {Array<any>} promises - notice that input might contains non-promises
 * @return {Promise<Array<{status: 'fulfilled', value: any} | {status: 'rejected', reason: any}>>}
 */
function allSettled(promises) {
  let count = 0;
  const result = []
  const len = promises.length;
  if (!len) {
    return Promise.resolve([])
  }
  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      Promise.resolve(promise)
        .then((value) => {
          result[i] = {
            status: 'fulfilled',
            value,
          };
        })
        .catch((reason) => {
          result[i] = {
            status: 'rejected',
            reason,
          };
        })
        .finally(() => {
          count++;
          if (count === len) {
            resolve(result)
          }
        })
    })
  })
}

实现async helper - parallel()

type Callback = (error: Error, data: any) => void

type AsyncFunc = (
   callback: Callback,
   data: any
) => void

const async1 = (callback) => {
   callback(undefined, 1)
}

const async2 = (callback) => {
   callback(undefined, 2)
}

const async3 = (callback) => {
   callback(undefined, 3)
}

const all = parallel(
  [
    async1,
    async2,
    async3
  ]
)

all((error, data) => {
   console.log(data) // [1, 2, 3]
}, 1)

1. 对于每个异步操作，新建一个Promise对象，并将resolve和reject方法作为参数传给异步操作函数

2. 将这些Promise对象放入数组中，使用Promise.all等待它们全部完成

3. 如果发生错误，直接reject

4. 如果全部完成，将结果数组作为resolve值返回

function parallel(asyncFuncs) {
  return function(callback, data) {
    const promises = asyncFuncs.map(func => {
      return new Promise((resolve, reject) => {
        func((error, result) => {
          if (error) {
            reject(error);
          } else {
            resolve(result);
          }
        }, data);
      });
    });
    Promise.all(promises)
      .then(results => {
        callback(undefined, results);
      })
      .catch(error => {
        callback(error, undefined);
      });
  };
}

实现call

Function.prototype.myCall = function (thisArg, ...args) {
  // 判断是否传递了thisArg，如果没有则默认为全局对象
  thisArg = thisArg || window

  // 将当前函数作为thisArg的方法调用
  thisArg.fn = this

  // 调用函数并传递参数
  const result = thisArg.fn(...args)

  // 删除该方法，避免污染thisArg
  delete thisArg.fn

  // 返回结果
  return result
}

实现bind

• 当作为构造函数时，this 指向实例，此时 this instanceof fn 结果为 true，可以让实例获得来自绑定函数的值。

• 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context

Function.prototype.myBind = function (context, ...args) {
  let that = this;
  let fn = function (...newArgs) {
		const theArgs = args.concat(newArgs)
    return that.apply(this instanceof fn ? this : context, theArgs);
  };
  return fn;
};

实现new

• myNew() 接受一个构造函数和任意数量的参数。

• 它首先创建一个空对象 obj，并将其原型链指向构造函数的原型对象。

• 然后它调用构造函数并传递给它所有的参数。

• 最后，它检查构造函数的返回值类型。如果它是一个对象，则返回该对象；否则返回创建的新对象 obj。

const myNew = (constructor, ...args) => {
  // 创建一个新对象
  const obj = {};
  // 将新对象的原型设置为构造函数的原型
  Object.setPrototypeOf(obj, constructor.prototype);
  // 调用构造函数并传入参数
  const result = constructor.apply(obj, args);
  // 如果构造函数返回一个对象，则返回该对象，否则返回新对象
  return (typeof result === 'object' && result !== null) ? result : obj;
}

function myInstanceOf(obj, constructor) {
  if(obj === null || typeof obj !== 'object') return false;
  while(obj){
    if(obj.__proto__ === constructor.prototype) return true;
    obj = obj.__proto__;
  }
  return false;
}

深拷贝

function cloneDeep(data, map = new WeakMap()) {
  if (data === null || typeof data !== "object") {
    return data;
  }

  //使用map解决循环引用带来的无限递归
  //以要克隆的data作为键 clone作为值
  //在递归过程中若遇到重复的data(引用值)
  //则为循环引用,返回之前在map中储存的clone
  if (map.has(data)) {
    return map.get(data);
  }
  const res = Array.isArray(data) ? [] : {};
  map.set(data, res);
  // const keys = [...Object.keys(data), ...Object.getOwnPropertySymbols(data)];
  const keys = Reflect.ownKeys(data);
  for (let key of keys) {
    res[key] = cloneDeep(data[key], map);
  }
  return res;
}

Map

Array.prototype.myMap = function(fn, thisArg) {
  // your code here
  const results = new Array(this.length)
  const length = this.length

  for (let i = 0; i < length; i++) {
    if (Object.hasOwn(this, i)) {
      results[i] = fn.call(thisArg, this[i], i, this)
    }
  }

  return results
}

Reduce

Array.prototype.myReduce = function (callback, initialValue) {
  // your code here
  // 参数callback initialValue 
  // 1、如果传递了initialValue  第一次调用为 (initialValue, array[0])
  // 2、如果未传递initialValue  第一次调用为 (array[0], array[1])
  const argsLen = arguments.length;
  const index = argsLen > 1 ? 0 : 1;
  let result = argsLen > 1 ? initialValue : this[0]
  const len = this.length;
  if (len === 0 && argsLen < 2) {
    throw Error('')
  }
  for (let i = index; i < len; i++) {
    result = callback(result, this[i], i, this);
  }
  return result;
}