实现常用的数组方法

实现常用的数组方法

myForEach

     Array.prototype.myForEach = function (callBack) {
       // 通过对象的方法调用函数时，函数内部的 this 关键字会指向调用该方法的对象
      let _arr = this
       for(let i = 0; i < _arr.length; i++){
         // 通过call改变回调方法的this指向_arr让callBack函数中访问和修改原数组的数据
         callBack.call(this, _arr[i], i,_arr)
       }
     }
     const arr = [1, 2, 3]
     arr.myForEach((item,index,arr) => {
       if(item === 1){
         arr[index] = 10
       }
     })
     console.log('a===>', arr) // [10, 2, 3]

myMap

     Array.prototype.myMap = function (callBack) {
      const _arr = this
      // 因为map会返回一个新的数组，所以我们在这里初始化一个数组
      let newArr = []
      for (let i = 0; i < _arr.length; i++) {
        let result = callBack.call(this, _arr[i], i, _arr)
        // 再把返回的每一项push进初始化的数组中
        newArr.push(result)
      }
      return newArr
    }

    const arr = [
      {
        name: '张山',
        age: 18
      },
      {
        name: '李四',
        age: 10
      }
    ]
    const newArr = arr.myMap(item => {
      return {
        ...item,
        sex: '男'
      }
    })
    console.log('result===>', newArr, arr) // [{name: '张山', age: 18, sex: '男'},{name: '李四', age: 10, sex: '男'}], [{name: '张山', age: 18},{name: '李四', age: 10}]

myFilter

   Array.prototype.myFilter = function (callBack) {
      const _arr = this
      const _newArr = []
      for (let i = 0; i < _arr.length; i++) {
        let result = callBack.call(this, _arr[i], i, _arr)
        // 只return符合条件的结果
        if (result) _newArr.push(_arr[i])
      }
      return _newArr
    }

    const arr = [1, 2, 3]
    const newArr = arr.myFilter(item => item !== 3)
    console.log('filter===>', newArr, arr) // [1,2],[1,2,3]

myReduce

   Array.prototype.myReduce = function (cb, initVal = undefined) {
      const _arr = this
      // 如果没有初始值就取数组的第0项,否则从第一项开始
      let i = -1
      if (!initVal) {
        i = 0
        initVal = _arr[0]
      }
      // 这里要使用while来循环,因为如果没有初始值reduce会默认数组的第一项，并且迭代从下一个元素开始，while是在循环之后计数索引的和for相反
      while (++i < _arr.length) {
        initVal = cb.call(this, initVal, _arr[i], i, _arr)
      }
      return initVal
    }

    const arr = [100, 200, 300]

    const num = arr.myReduce((acc, cur) => {
      return acc += cur
    },100)

    console.log(num) // 700

    const arr1 = [ {name: '张山', age: 19}, {name: '张山', age: 19} ]

    const tem = {}
    const newArr1 = arr1.myReduce((acc,cur) => {
      if (!tem[cur.name]) {
        tem[cur.name] = true;
        acc.push(cur);
      }
      return acc
    }, [])

    console.log('newArr1====>', newArr1) //[ {name: '张山', age: 19} ]

myFindIndex

    Array.prototype.myFindIndex = function (cb) {
      var _arr = this
          i = -1
          initIndex = -1
      while (++i < _arr.length) {
        let result = cb.call(this, _arr[i], i, _arr)
        if (result) {
          initIndex = i
          // 符合条件跳出循环，不完全遍历
          i = _arr.length
        }
      }
      return initIndex
    }

    const arr = [1,2,3]
    const index = arr.myFindIndex(item => item === 3)
    console.log('index===>',index) // 2