zoukankan      html  css  js  c++  java
  • 剖析Javascript中forEach()底层原理,如何重写forEach()

    我们平时用的forEach()一般是这样用的

    var myArr = [1,5,8]
    
    myArr.forEach((v,i)=>{
      console.log(v,i)
    })
    //运行后是这样的
    1 0
    5 1
    8 2

    其实底层还是把数组循环了一边,并且在回调函数里传了每个数组的值和下标

    我们先用常规的方法去重写forEach()

    // 这里用const来定义函数,主要是为了防止当我们在开发时,如果别人用了这个名字重新给myForEach赋值时就会报错,这样就避免我们写的方法会被别人意外覆盖
    const myForEach = function(arr, fn){ let i for(i=0; i<arr.length; i++){ fn(arr[i], i) } }

    方法已经写好下面我们来测试一下新forEach()

    这里是不是和上面用forEach()的输出完全一致啊

    但是调用方法和上面并不一样,那我们怎么把他封装到Array对象里去呢

    这样就要用到js里的原型链prototype,其实Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法

     还是直接看代码吧↓

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

    好了开始测试

     

    这个就完全和forEach一样啦  good

    当我们在开发项目时如果对后台返回的数据数组中每个数据都要做统一处理时,这时候我们就可以重写forEach()

    这样大家都可以统一直接用这个方法,开发效率就会大大提高

  • 相关阅读:
    c++中的内存管理【转载】
    c++中dynamic_cast、static_cast、reinterpret_cast和const_cast作用
    c++中的顶层const和底层const
    c++赋值操作符需要确保自我赋值的安全性问题
    二分法查找
    Servlet基础总结
    java 正则表达式:有丶东西
    HTTP协议初步认识
    Java synchronized到底锁住的是什么?
    ECMA Script 6新特性之解构赋值
  • 原文地址:https://www.cnblogs.com/bobo1/p/11376025.html
Copyright © 2011-2022 走看看