欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue源码分析之reduce()的思考

程序员文章站 2022-09-06 11:18:38
vue中如果data中的数据嵌套层数较多的情况下,例如://html

{{items.item.a}}

{{items.item.b.c}}

// jsdata(){ items:{ item:{ a:1 b:{ c:2 } } }}那vue中是怎么解析items.item.a和items.item.b.c这样数据的呢?在co...

vue中如果data中的数据嵌套层数较多的情况下,例如:

//html
<p>{{items.item.a}}</p>
<p>{{items.item.b.c}}</p>
// js
data(){
  items:{
     item:{
        a:1
        b:{
          c:2
        }
     }
  }
}

那vue中是怎么解析items.item.a和items.item.b.c这样数据的呢?
在complie解析过程中,用到了reduce归并数组的写法。下面我们来看一下。

reduce():数组的归并方法
语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

接受两个参数:

  • 一个是在每一项上调用的函数
    这个调用函数中接受四个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
  • 一个是作为归并基础的初始值(可选)

先举一个简单的例子来
计算数组的和

        var arrts = [1, 2, 3, 4, 5, 6]

        let arrts1 = arrts.reduce((pre, cur, index, array) => {
            return pre + cur
        })
        console.log(arrts1) // 21
        console.log(arrts)  // [1, 2, 3, 4, 5, 6]

        let arrts2 = arrts.reduce((pre, cur, index, array) => {
            return pre + cur
        }, 100)
        console.log(arrts2) // 121
        // 如果传入了初始值,那么以初始值为基础,加入到运算中。

数组去重

    var arrts = [1, 2, 3, 4, 5, 6,7,2,4,5,1]
    let arrts3 = arrts.reduce((pre, cur, index, array) => {
        return pre.includes(cur)&&pre.push(cur)
    },[])
    arrts3 // 1,2,3,4,5,6,7

从上面例子中我们可以看到把传入的初始值,作为归并基础,这个思想很重要,也就是说,reduce开始执行的时候是以[ ](初始值)为基础,第一次cur是attrs[0]的这个值,这个时候[ ]就是pre,然后进入迭代阶段。

思路明确了,那我们来看一下上面vue中解析深层的对象的方法是怎么封装的。

// expres是'items.item.a'这样的字符串
// vm是vue实例
getVal(expres,vm){
       return expres.split('.').reduce((data,currentVal)=>{
             return data[currentVal]
       },vm.$data);
  }

分析:vm.$data作为基础值,reduce第一次执行,得到的是vm.$data.items这个对象,
第二次执行,得到的是vm.$data.items.item这个对象
第三次执行,得到的是vm.$data.items.item.a这个值,所以就把按这个嵌套很深的值拿到了,并赋值给node节点的textcontent。

reduce还有很多其他的应用,后面如有遇到,会进行更新。

本文地址:https://blog.csdn.net/xiaolinlife/article/details/107295552