首页 > 其他分享 >js封装数组方法(注意:不是函数)

js封装数组方法(注意:不是函数)

时间:2022-10-14 10:47:44浏览次数:63  
标签:arr 封装 myForEach js item let 数组 func

对于函数都会封装,但是让你封装一个方法怎么办?

首先要知道函数的概念:

  1. 函数也是一个对象
  2. 函数中可以封装一些功能,在需要的使用可以执行这些功能
  3. 函数中也可以保存一些代码在需要的时候调用
  4. 使用typeof检查一个函数对象时,返回是function

那么带大家手敲一个forEach的方法:

Array.prototype.myForEach =  function (func) {
      let len = this.length;
      let _this = arguments[1] || window;
      for(let i =0;i<len;i++) {
        func.call(_this, this[i],i, this)
      }
}

调用时:

arr.myForEach((item,index)=> {
   console.log(item,index) 
})

封装方法时首先应该对prototype有一定了解,然后再Array数组中加入myForEach的方法,外面直接调用就可以了
其次说一些myForEach的结构,其中this就是指向的当前数组也就是arr,this[i]也就相当于arr[i],如果对call有了解的应该知道他主要是改变this指向的

使你最后打印的可以打印出添加的内容item对应就是this[i],index对应i,可以消化一下,消化完就要封装一下filter了

filter的方法:

Array.prototype.myFilter =  function (func) {
      let len = this.length;
      let arr = [];
      let _this = arguments[1] || window;
      for(let i =0;i<len;i++) {
        func.call(_this, this[i],i, this) && arr.push(this[i])
      }
      return arr;
    }

调用时:

let arr = [1,4,7,1,5,8,9,3,2,5.4,2,3,2,1]
    let newArr = arr.myFilter((item,index,arr) => {
      return item > 2
    })

filer比forEach唯一的区别在于有return,其实都差不多因为要返回数据arr本身数据不会变所以  func.call(_this, this[i],i, this)和myForEach是一样的就是最后返回的 item>2是不一样的,我们要满足item>2的需求,所以func并上arr.push(this[i])就可以返回大于2的数据

如果还是不理解,下面时sort的方法,亲自带进去试一试,获取有不一样的发现,代码如下:

    Array.prototype.mySort = function (func) {
      let len = this.length;
      let arr = [...this]

      let _this = arguments[1] || window; 
      for(let m=0;m<arr.length;m++) {
        func.call(_this,arr[m],m,arr) 
      }
      for(let i=0;i<len-1;i++) {
        for(let j=0;j<len-i-1;j++) {
          if(func(arr[j],arr[j+1])>0) {
            [arr[j],arr[j+1]] = [arr[j+1],arr[j]]
          }
        }
      }
      
      return arr
    }

调用:

let newArr2 = arr.mySort(
      (a,b)=> {
        return b-a
      }
    )

 

标签:arr,封装,myForEach,js,item,let,数组,func
From: https://www.cnblogs.com/heibaiqi/p/16790824.html

相关文章