damomhd/handwritten-source

整理/手写各种函数

Thank You-🙏🏼

⭐️ From DamomHd

handwritten-source's Issues

实现数组的filter方法

实现数组push方法

实现数组splice方法

V8源码实现：

function ArraySplice(start, delete_count) {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.splice");

  var num_arguments = arguments.length;
  var array = TO_OBJECT(this);
  var len = TO_LENGTH(array.length);
  var start_i = ComputeSpliceStartIndex(TO_INTEGER(start), len);
  var del_count = ComputeSpliceDeleteCount(delete_count, num_arguments, len,
                                           start_i);
  var deleted_elements = ArraySpeciesCreate(array, del_count);
  deleted_elements.length = del_count;
  var num_elements_to_add = num_arguments > 2 ? num_arguments - 2 : 0;

  if (del_count != num_elements_to_add && %object_is_sealed(array)) {
    throw %make_type_error(kArrayFunctionsOnSealed);
  } else if (del_count > 0 && %object_is_frozen(array)) {
    throw %make_type_error(kArrayFunctionsOnFrozen);
  }

  var changed_elements = del_count;
  if (num_elements_to_add != del_count) {
    // If the slice needs to do a actually move elements after the insertion
    // point, then include those in the estimate of changed elements.
    changed_elements += len - start_i - del_count;
  }
  if (UseSparseVariant(array, len, IS_ARRAY(array), changed_elements)) {
    %NormalizeElements(array);
    if (IS_ARRAY(deleted_elements)) %NormalizeElements(deleted_elements);
    SparseSlice(array, start_i, del_count, len, deleted_elements);
    SparseMove(array, start_i, del_count, len, num_elements_to_add);
  } else {
    SimpleSlice(array, start_i, del_count, len, deleted_elements);
    SimpleMove(array, start_i, del_count, len, num_elements_to_add);
  }

  // Insert the arguments into the resulting array in
  // place of the deleted elements.
  var i = start_i;
  var arguments_index = 2;
  var arguments_length = arguments.length;
  while (arguments_index < arguments_length) {
    array[i++] = arguments[arguments_index++];
  }
  array.length = len - del_count + num_elements_to_add;

  // Return the deleted elements.
  return deleted_elements;
}

实现符合Promise A+规范的Promise

规范外文：

实现数组map方法

map规范

实现一个new关键字

首先需要明白 new调用之后做了什么？

• 实例可以访问到私有属性
• 实例可以访问构造函数原型（constructor.prototype）所在原型链上的属性
• 如果构造函数返回的结果不是引用数据类型

实现call、aplly、bind

call、aplly、bind 本质都是改变 this 的指向，不同点 call、aplly 是直接调用函数，bind 是返回一个新的函数。call 跟 aplly 就只有参数上不同。

微妙差别可以查看此地址：

实现数组的pop方法？

实现类似JAVA中的sleep函数

等待睡眠

实现instanceof

模拟微信发红包

模拟微信发红包，n个人抢总金额为m的红包，请设计一个算法并实现

实现数组的reduce方法

reduce ecma262草案

实现webpack实现钩子函数的核心库- Tabable库

如何实现并发请求数量控制

// 并发请求函数
const concurrencyRequest = (urls, maxNum) => {
    return new Promise((resolve) => {
        if (urls.length === 0) {
            resolve([]);
            return;
        }
        const results = [];
        let index = 0; // 下一个请求的下标
        let count = 0; // 当前请求完成的数量

        // 发送请求
        async function request() {
            if (index === urls.length) return;
            const i = index; // 保存序号，使result和urls相对应
            const url = urls[index];
            index++;
            console.log(url);
            try {
                const resp = await fetch(url);
                // resp 加入到results
                results[i] = resp;
            } catch (err) {
                // err 加入到results
                results[i] = err;
            } finally {
                count++;
                // 判断是否所有的请求都已完成
                if (count === urls.length) {
                    console.log('完成了');
                    resolve(results);
                }
                request();
            }
        }

        // maxNum和urls.length取最小进行调用
        const times = Math.min(maxNum, urls.length);
        for(let i = 0; i < times; i++) {
            request();
        }
    })
}

实现一个简单的发布订阅模式

实现一个深拷贝

const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null
const getType = Object.prototype.toString.call(obj)

const TypeList = {
  '[object Map]': true,
  '[object Set]': true,
  '[object Array]': true,
  '[object Object]': true,
  '[object Arguments]': true,
}
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const handleRegExp = (target) => {
  const { source, flags } = target;
  return new target.constructor(source, flags);
}

const handleFunc = (func) => {
  // 箭头函数直接返回自身
  if(!func.prototype) return func;
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=\().+(?=\)\s+{)/;
  const funcString = func.toString();
  // 分别匹配 函数参数 和 函数体
  const param = paramReg.exec(funcString);
  const body = bodyReg.exec(funcString);
  if(!body) return null;
  if (param) {
    const paramArr = param[0].split(',');
    return new Function(...paramArr, body[0]);
  } else {
    return new Function(body[0]);
  }
}

const handleNotTraverse = (target, tag) => {
  const Ctor = target.constructor;
  switch(tag) {
    case boolTag:
      return new Object(Boolean.prototype.valueOf.call(target));
    case numberTag:
      return new Object(Number.prototype.valueOf.call(target));
    case stringTag:
      return new Object(String.prototype.valueOf.call(target));
    case symbolTag:
      return new Object(Symbol.prototype.valueOf.call(target));
    case errorTag: 
    case dateTag:
      return new Ctor(target);
    case regexpTag:
      return handleRegExp(target);
    case funcTag:
      return handleFunc(target);
    default:
      return new Ctor(target);
  }
}



function deepClone = (target , map = new WeakMap()) => {
    if(!isObject(target)) return target
    
    let type = getType(target)
    let cloneTaget 
    if(!TypeList[type]){
        //特殊类型无法遍历
        return handleNotTraverse(target,type)
    }
    else{
        //保证对象原型不丢失
        let fn = target.prototype
        cloneTaget = new fn()
    }
    //解决循环引用问题 已存在则直接返回
    if(map.get(target)) return target
    map.set(target,true)
    //处理Map
    if(type === '[object Map]'){
        target.forEach((item,key) =>{
            cloneTaget.set(deepClone(key),deepClone(item))
        })
    }
    //处理Set
    if(type === '[object Set]'){
        target.forEach(item=>target.add(deepClone(item)))
    }

 
    for (let prop in target){
        if(target.hasOwnpropert(prop)){
            cloneTaget[prop] = deepClone(target[prop],map)
        }
    }
    
    return cloneTaget
}

边界问题神三元的博客讲的很详细 https://juejin.cn/post/6844903986479251464