都2023年了,我不允许你还不会手写ES6的这些数组方法!

手写ES6数组方法不是为了应付面试,是为了锻炼自己的编程思维,理解这些API的核心。在工作中能更好的去理解使用。从底层思维出发去解决一系列问题,而不是遇到问题靠百度,靠猜,靠蒙。从而也是对自己职业生涯的一种交代。如果一味的觉得没什么意义,那这篇文章就不用往下看了!

forEach方法

写之前,咱们先了解一下forEach其特点

  • 参数一:回调函数

  • 参数二:this指向

  • 返回值:无

Array.prototype.MyForEach = function (fn) {  //定义数组的原型方法
      let arr = this                             //接收数组本身
      let arg = arguments[1] || window           //设置第二个参数
      for (let i = 0; i < arr.length; i++) {
        fn.call(arg, arr[i], i, arr)
      }
    };

a9a91bacaa314a7d571b24093c6a899b.jpeg

map方法

写之前,咱们先了解一下map其特点

  • 参数一:回调函数

  • 参数二:this指向

  • 返回值:一个新数组

返回后的新数组会保留原数组的长度,不满足条件的则是undefined

Array.prototype.MyMap = function (fn) {
      let arr = this
      let arg = arguments[1] || window
      let newarr = []                     //定义一个空数组
      for (let i = 0; i < arr.length; i++) {
        let copyArr = JSON.parse(JSON.stringify(arr[i]))  //循环出来的值深拷贝一份,避免影响原数组
        newarr.push(fn.call(arg, copyArr, i, arr))
      }
      return newarr   //返回数组结果
};

c486d89f2b43e844d80a2b74c3fda29b.jpeg

filter方法

写之前,咱们先了解一下map其特点

  • 参数一:回调函数

  • 参数二:this指向

  • 返回值:一个新数组

返回后的新数组会过滤掉不满足条件的数组元素

Array.prototype.MyFilter = function (fn) {
      let arr = this
      let arg = arguments[1] || window
      let newarr = []                     //定义一个空数组
      for (let i = 0; i < arr.length; i++) {
        let copyArr = JSON.parse(JSON.stringify(arr[i]))  //循环出来的值深拷贝一份,避免影响原数组
        let newfn = fn.call(arg, copyArr, i, arr)       
        newfn ? newarr.push(newfn) : ''  //这里进行一次判断,如果函数返回值为真就push
        
      }
      return newarr   //返回数组结果
};

e6bde75db687822ed7a10deb2964cce5.jpeg

every与some方法

写之前,咱们先了解一下every与some其特点

  • 参数一:回调函数

  • 参数二:this指向

  • 返回值:布尔值

every如果所有元素都通过检测返回 true,否则返回 false。some则取反!

Array.prototype.MyEvery = function (fn) {
      let arr = this
      let arg = arguments[1] || window
      let isFlag = true                     //定义默认值
      for (let i = 0; i < arr.length; i++) {
        let newfn = fn.call(arg, arr[i], i, arr)
        if (!newfn) {                    //如果有一个条件不满足,就终止循环
          isFlag = false;
          break
        }
      }
      return isFlag   //返回结果
 };
 
 
 Array.prototype.MySome = function (fn) {
      let arr = this
      let arg = arguments[1] || window
      let isFlag = false                   //定义默认值
      for (let i = 0; i < arr.length; i++) {
        let newfn = fn.call(arg, arr[i], i, arr)
        if (newfn) {                    //如果有一个条件满足,就终止循环
          isFlag = true;
          break
        }
      }
      return isFlag   //返回结果
 };

reduce方法

写之前,咱们先了解一下reduce其特点

  • 参数一:回调函数

  • 参数二:初始值,计算结束后的返回值。

  • 参数三:this指向

  • 返回值:返回计算结果

这里唯一不好理解的就是第二个参数。因为它返回的是上一次迭代过后的结果值。

Array.prototype.MyReduce = function (fn,initval) {
      let arr = this
      let arg = arguments[2] || window
      let newarr = []                     //定义一个空数组   
      for (let i = 0; i < arr.length; i++) {
        let copyArr = JSON.parse(JSON.stringify(arr[i]))  //循环出来的值深拷贝一份,避免影响原数组
        initval = fn.call(arg,initval,copyArr,i,arr)
      }
      return initval   //返回结果
 };

以上所有常用的数组方法就写完了。怎么样,只要思路比较清晰,写起来还是挺简单的吧!其实还剩2个方法 find,findIndex 伙伴们可以根据上面的思路,自行去写一下吧

5380ff882f32914fc624372810e8a2ee.png

猜你喜欢

转载自blog.csdn.net/weixin_42981560/article/details/132440096