利用回调函数手写数组函数

约 417 字大约 1 分钟

2025-05-02

主要利用回调函数

1.手写filter 过滤数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = [1, 2, 3, 4, 5, 6]

    Array.prototype.myFilter = function (fn) {
      let arr = []
      let j = 0
      for (let i = 0; i < this.length; i++) {
          // 调用回调函数，进行比较
        let flag = fn(this[i], i)
        if (flag) {
          arr[j] = this[i]
          j++
        }
      }
      return arr
    }

    let newArr = arr.filter(item => item != 6)

    console.log(newArr)

  </script>
</body>

</html>

2.手写 forEach

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    let arr = [1, 2, 3, 4, 5, 6]

    Array.prototype.myForEach = function (fn) {

      for (let i = 0; i < this.length; i++) {
        fn(this[i], i)
      }
    }

    arr.myForEach(item => {
      console.log(item)
    })
  </script>
</body>

</html>

3. 手写 indexOf

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    Array.prototype.myLastIndecOf = function (item) {
      let index = -1

      for (let i = this.length - 1; i > 0; i--) {
        if (this[i] === item) {
          index = i
          break
        }
      }
      return index
    }


    let arr = [1, 2, 3, 3, 4]

    console.log(arr.myLastIndecOf(3))


  </script>
</body>

</html>

4. 手写 map

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    let arr = [1, 2, 3, 4, 5, 6]

    Array.prototype.myMap = function (fn) {
      let newArr = []
      for (let i = 0; i < this.length; i++) {
        let rr1 = fn(this[i], i)  //接收格式
        newArr[i] = rr1 // 加入新数组
      }

      return newArr
    }

    console.log(arr.myMap(item => {
      return 'item +'
    }))


  </script>

</body>

</html>

5. 手写 reduce

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = [2, 2, 3]



    Array.prototype.myReduce = function (fn, def = 0) {
      sum = def
      for (let i = 0; i < this.length; i++) {
        let s = fn(sum, this[i])
        sum = s
      }
      return sum
    }

    let s = arr.myReduce((sum, item) => {
      return sum + item

    })

    console.log(s)


  </script>
</body>

</html>