前言

最近想的事情比较多，索性就写一下常见的js手写代码吧!也权当回顾一下。

代码集合

1.flat

数组扁平化，就是把数组进行展开，常见的使用方法是直接使用数组的flat函数。

原理：reduce整个数组判断当前项是否是数组类型，如果是则继续递归使用flat函数，反之直接拼接到结果数组上即可

实现：

// 基于递归实现
function flat(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
  }, []);
}

用例：

let array = flat([1, 2, [3, 4], [[5, 6, 7]]]);  

2.myFilter

数组的过滤器，筛选出符合条件的数组内容。

原理：遍历整个数组，调用函数后将结果为true的项加到结果数组中即可

实现：

Array.prototype.myFilter = function (callback, is) {
  if (typeof callback != "function") {
    return false;
  }
  let res = [];
  const arr = this;
  this.forEach((item, index) => {
    callback.call(is, item, index, arr) && res.push(item); // 符合条件就加到res数组中
  });
  return res;
};

用例：

let array =[1, 2, 4, 8].myFilter((item, index)=>{
    return item > 1
});  

3.myMap

将数组每个元素都通过传入的回调进行对应操作转换，返回新的数组，常用于数据加工。

原理：遍历整个数组，调用函数后将每一次函数返回值加到结果数组中

实现：

Array.prototype.myMap = function (callback, is) {
  if (typeof callback != "function") {
    return false;
  }
  let res = [];
  const arr = this;
  // 遍历原数组转换后加入res数组中
  this.forEach((item, index) => { 
    res.push(callback.call(is, item, index, arr));
  });
  return res;
};

用例：

let array =[1, 2, 4, 8].myMap((item, index)=>{
    return item + 1
});  

4.mySome

通过回调函数对数组每一项进行验证，如果有一项符合要求则返回true，后续数组都不再执行校验，反之返回false。

原理：遍历整个数组，调用函数后当函数返回值符合条件，则直接return true，后续不再遍历

实现：

Array.prototype.mySome = function (callback, is) {
  if (typeof callback != "function") {
    return false;
  }
  const arr = this;
  for (let index = 0; index < arr.length; index++) {
    // 对数组项进行校验，符合就return，注意：这里不能用foreach
    if (callback.call(content, content[index], index, arr)) {
      return true;
    }
  }
  return false;
};

用例：

[1,2,3,4,5].mySome((item, index) => {
    return item > 1
})

5.myForEach

类似map方法都会让数组项去执行回调，但是不同于map，forEach没有返回值

实现：

Array.prototype.myForEach = function (callback, is) {
  if (typeof callback != "function") {
    return false;
  }
  const arr = this;
  for (let index = 0; index < arr.length; index++) {
    callback.call(is, this[index], index, arr);
  }
};

用例：

[1,2,3,4,5].myForEach((item, index) => {
    console.log(item)
})

6.myReduce

数组的累计方法，上一次回调函数的结果会作为下一个回调函数执行时的输入，最后返回完整的数组计算结果

原理：遍历整个数组，将每一项作为参数传入函数中执行即可

实现：

Array.prototype.myReduce = function (callback, is) {
  if (typeof callback != "function") {
    return false;
  }
  let arr = this
  let res = is ? is : arr[0];
  for (let index = is ? 0 : 1; index < arr.length; index++) {
    res = callback(res, arr[index], index, arr);
  }
  return res;
};

用例：

[1,2,3,4,5].myReduce ((res, item, index) => {
    return res + item
})

7.myCall

用于改变this的指向，使用call的时候接收系列参数，函数会立即执行

原理：将传入的对象的属性fn指向this，执行对象的fn函数，由于作用域链的关系就会使得函数的this指向整个目标对象，执行完之后再删除对象下的fn属性即可

实现：

Function.prototype.myCall = function (content, ...args) {
  if (typeof this != "function") {
    return false;
  }
  content =
    content == null || content == undefined ? window : new Object(content);
  // 将函数挂载到对象下执行，执行完后再移除对象这个属性
  let fn = Symbol("fn");
  content[fn] = this;
  let res = content[fn](...args);
  delete content[fn];
  return res;
};

用例：

function a() {
    console.log(this.a)
}
a.myCall({a:1})

8.myApply

用于改变this的指向，使用Apply的时候接收参数数组，函数会立即执行

原理：将传入的对象的属性fn指向this，执行对象的fn函数，由于作用域链的关系就会使得函数的this指向整个目标对象，执行完之后再删除对象下的fn属性即可

实现：

Function.prototype.myApply = function (content, args) {
  if (typeof this != "function") {
    return false;
  }
  content =
    content == null || content == undefined ? window : new Object(content);
  // 将函数挂载到对象下执行，执行完后再移除对象这个属性
  let fn = Symbol("fn");
  content[fn] = this;
  let res = content[fn](...args);
  delete content[fn];
  return res;
};

用例：

function a(c) {
    console.log(this, c)
}
a.myApply({a: 1}, [1])

9.myBind

同样用于改变this的指向，不同于call，apply，会返回一个this改变的函数，参数接收上与call相同。

原理：暂存传入的this，然后返回一个函数，这个函数执行时会调用call函数去更新函数的指向，类似于对call封装成一个可执行的函数(注意new的情况)

实现：

Function.prototype.myBind = function (content, ...args) {
  if (typeof this != "function") {
    return false;
  }
  content =
    content == null || content == undefined ? window : new Object(content);
  let self = this;
  return function F() {
    // 处理new的情况
    if (this instanceof F) {
      return new self(...args, ...arguments);
    }
    // 通过call去改变this
    return self.call(content, ...args);
  };
};

用例：

function a(c) {
    console.log(this, c)
}
let b = a.myBind({a: 1}, 1)
b()

10.debounce

防抖，在n秒内只执行一次函数，常用于下拉加载等场景。

原理：通过闭包创建一个变量timer，返回一个函数，执行这个函数会给timer赋值定时器，如果后续再执行timer，若timer存在则拦截代码执行

实现：

function debounce(callback, delay) {
  if (typeof callback !== "function") {
    return false;
  }
  let timer = null;
  return function () {
    // 通过闭包存储timer，如果timer存在则拦截代码执行
    if (timer) return;
    timer = setTimeout(() => {
      callback();
      clearTimeout(timer);
    }, delay);
  };
}

用例：

let a1 = debounce(()=>{console.log(123)},1000)
a1()
a1()
a1()
a1()

11.throttle

节流，时间间隔内多次触发函数只执行最后一次，常用于输入框输入查询。

原理：通过闭包创建一个变量timer，返回一个函数，执行这个函数会给timer赋值定时器，如果后续再执行timer，清空timer（终止timer的执行，赋值null不能终止），再重新给timer赋值定时器，保证最后一次触发函数时，timer指向一个等待执行的定时器

实现：

function throttle(callback, delay) {
  if (typeof callback !== "function") {
    return false;
  }
  let timer = null;
  return function () {
    // 通过闭包存储timer，每次执行函数都会清空定时器，重新执行
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback();
      clearTimeout(timer);
    }, delay);
  };
}

用例：

let a1 = throttle(()=>{console.log(123)},1000)
a1()
a1()
a1()
a1()

12.myInstanceof

instanceof 是用来判断左侧对象是否是右侧构造函数的实例化对象

原理：对象的构造函数的prototype指向原型对象，实例化对象的__proto__也指向原型对象，instanceof就是判断实例化对象的__proto__和目标的prototype是否相同，如果不同，则实例化对象的__proto__也是一个对象它也有自己的__proto__再判断，一直往上找看目标的prototyp是否在自己的原型链上

实现：

function myInstanceof(content, type) {
  if ((typeof type != 'object' && typeof type != 'function') || type == null) {
    return false;
  }
  let R = content.__proto__;
  while (true) {
    // 原型链找到最后是null
    if (R == null) {
      return false;
    }
    // 看目标对象的__proto__会不会指向目标类型的prototype即原型对象
    if (R == type.prototype) {
      return true;
    }
    R = R.__proto__;
  }
}

用例：

let a2 = {a:1}
myInstanceof(a2 , Object)

13.myAssign

assign 可以用来拼接对象。

原理：获取参数列表中的所有对象，逐个遍历给目标对象添加属性即可

实现：

Object.prototype.myAssign = function (target, ...args) {
  if (target == undefined || target == null) {
    throw TypeError(target + "is not a object");
  }
  target = Object(target); //保证target是一个对象
  for (let item of args) {
    //获取参数列表中的所有对象
    for (let val in item) {
      //获取这个对象的所有属性
      item[val] && (target[val] = item[val]);
      //如果这个属性是这个对象本身的，就将它添加到target对象上
    }
  }
  return target;
};

用例：

Object.myAssign({}, {a:1, b:2})

14.myIsArray

isArray判断是否是数组

实现：

Array.myIsArray = function (arr) {
  // 直接基于Object.prototype.toString.call判断
  return Object.prototype.toString.call(arr) == "[object Array]";
};

用例：

Array.myIsArray([1])

15.myNew

用于新建对象实例，本质上就是让创建的对象和构造函数使用同一个原型，于实例的原型对象和参数创建一个新的对象

原理：创建一个空对象并将其原型指向构造函数的原型对象，然后调用该构造函数，并将 this 关键字设置为新创建的对象。最后，如果构造函数返回一个对象，则返回该对象；否则返回创建的对象。

实现：

function myNew(constructor, ...args) {
  const obj = Object.create(constructor.prototype); // 让创建的对象和构造函数使用同一个原型
  const res = constructor.apply(obj, args); // 基于实例的原型对象和参数创建一个新的对象res
  return res instanceof Object ? res : obj;
}

用例：

let p = function (name, age) {
        this.name = name;
        this.age = age;
};
p.prototype.sayName = function () {
        console.log(this.name);
};
myNew(p , 1, 2)
let c = myNew(p , 1, 2)
c.sayName()

16.cloneDeep

深拷贝，因为js中对象使用的是堆内存，实际上只保存了一个地址，因此简单的赋值，并不能拷贝对象，需要通过递归的方式完全复制整个对象。（这里没处理Symbol的情况）

原理：遍历目标对象，将每个属性值克隆到新对象中。如果当前属性值是对象（非null），则递归调用 cloneDeep() 方法，并将这个对象作为新目标对象的属性值。否则，它直接将该值作为新对象的属性值。同时接收一个map，每一次cloneDeep时都会以源对象作为key，新对象作value进行存储，每次deepclone的时候都先判断是否在map上，如果在直接返回clone的对象即可，防止递归死循环。

实现：

function cloneDeep(target, hash = new WeakMap()) {
  // 对于传入参数处理
  if (typeof target !== "object" || target === null) {
    return target;
  }
  // 哈希表中存在直接返回
  if (hash.has(target)) return hash.get(target);

  // 设置哈希表，将源数据和拷贝数据都存进去，如何下次读取的时候遇到如下去情况
  //   a：{
  //     b：{
  //         c：a
  //     }
  // }
  // 递归引用a的值，遇到这种情况就直接将之前clone的a返回回去就行，防止递归死循环
  const cloneTarget = Array.isArray(target) ? [] : {};
  hash.set(target, cloneTarget);

  for (const i in target) {
    if (Object.prototype.hasOwnProperty.call(target, i)) {
       // 判断当前项是否是对象等属性，如果是则递归去继续解析
      cloneTarget[i] =
        typeof target[i] === "object" && target[i] !== null
          ? cloneDeep(target[i], hash)
          : target[i];
    }
  }
  return cloneTarget;
}

用例：

cloneDeep({a:1, b:{c:1})

17.异步控制并发数

有一些浏览器最大连接数有限制，因此会通过一些手段控制请求并发，这里是使用promise的方式去实现的。（有兴趣可以基于此继续封装优化成单例使用）

原理：遍历arr，对于每一项，创建一个promise实例存储到resArr中，创建的时候就已经开始执行了，将创建的promise传入的实例数组中，对于每一项的promise设置其then操作，并将其存储到running数组中，作为执行中的标识，当then操作触发之后则将running中的对应这一项删除，执行中的数组减一，在遍历的回调函数最后判断当前是否超出阈值，当数量达到限制时开始批量执行，用await去处理异步，处理完一个即跳走，重新往running中注入新的实例

实现：

async function asyncLimit(limitNum, arr, fn) {
  let resArr = []; // 所有promise实例
  let running = []; // 执行中的promise数组
  for (const item of arr) {
    const p = Promise.resolve(fn(item)); // 遍历arr，对于每一项，创建一个promise实例存储到resArr中，创建的时候就已经开始执行了
    resArr.push(p);
    if (arr.length >= limitNum) {
      // 对于每一项设置其then操作，并将其存储到running数组中，作为执行中的标识，当then操作触发之后则将running中的对应这一项删除，执行中的数组减一
      const e = p.then(() => running.splice(running.indexOf(e), 1));
      running.push(e);
      if (running.length >= limitNum) {
        // 当数量达到限制时开始批量执行，处理完一个即跳走，重新往running中注入新的实例
        await Promise.race(running);
      }
    }
  }
  return Promise.allSettled(resArr);
}

用例：

fn = (item) => {
  return new Promise((resolve) => {
    console.log("开始",item);
    setTimeout(() => {
      console.log("结束", item);
      resolve(item);
    }, item)
  });
};
asyncLimit(2, [1000, 2000, 5000, 2000, 3000], fn)

18.myAll

promise的all方法，接收一个数组，当数组的所有promise都resolve的时候，promise的all才结束

原理：返回一个新的promise，在大的promise下循环传入的promise列表，当任意一个promise出现resolve的时候就将结果插入到结果列表对应的位置中，然后判断结果列表的长度是否已经和传入的promise列表长度相当，如果相当则执行大的promise的resolve，把结果数据返回即可

实现：

Promise.myAll = function (promiseArr) {
  return new Promise((resolve, reject) => {
    const resultList = [];
    for (let index = 0; index < promiseArr.length; index++) {
      promiseArr[index]
        .then((res) => {
          // 保证结果顺序正确 
          if (index + 1 > resultList.length) {
            resultList.push(res)
          } else {
            resultList.splice(index, 0, res)
          }
          if (resultList.length == promiseArr.length) {
            resolve(resultList);
          }
        })
        .catch((err) => reject(err));
    }
  });
};

用例：

let a = function(t) {
    return new Promise((resolve, reject)=>{setTimeout(()=>{resolve(t)}, t)})
}
Promise.myAll([a(3000),a(2000),a(3000),a(1000),a(1000)]).then(res=>{
    console.log(res)
})

19.myRace

promise的Race方法，接收一个数组，当数组的任意一个promise resolve的时候，promise的Race结束

原理：返回一个新的promise，在大的promise下循环传入的promise列表，当任意一个promise出现resolve的时候，就执行大的promise的resolve，把当前promise的结果数据返回即可

实现:

Promise.myRace = function (promiseArr) {
  return new Promise((resolve, reject) => {
    for (let index = 0; index < promiseArr.length; index++) {
      promiseArr[index]
        .then((res) => {
          resolve(res);
        })
        .catch((err) => reject(err));
    }
  });
};

用例：

let a = function(t) {
    return new Promise((resolve, reject)=>{setTimeout(()=>{resolve(t)}, t)})
}
Promise.myRace([a(3000),a(2000),a(3000),a(1000),a(1000)]).then(res=>{
    console.log(res)
})

结语

各位大佬有兴趣的话可以看看上面的内容，觉得什么地方不对也可以提出来，有想看的函数评论我就会去更新这个文章。

谢谢各位大佬