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

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