js中reduce方法应用实例

最新推荐文章于 2024-09-25 17:58:10 发布

itcastweb1

最新推荐文章于 2024-09-25 17:58:10 发布

阅读量122

点赞数 1

文章标签： javascript js vue vue.js

本文链接：https://blog.csdn.net/itcastweb1/article/details/114281052

版权

1.原数组应用

计算数组元素相加后的总和：

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果：125

2.vue源码中data对象对reduce方法的应用

实例
如元素绑定一个对象的某个属性，例如有绑定一个v-text= “person.fav.fname”：

<body>
  <div id="app"></div>
</body>
<script>
  // reduce方法
  data1={
    msg:'aaa',
    htmlStr:'<span>aaaaa</span>',
    person:{
      name:'小哥哥',
      age:18,
      msg:'学习MVVM1',
      fav:{
        id:1,
        fname:'girl'
      }
    }
  }
  //加多一个data只是便于理解，实际一个vue实例中只有一个data对象
  data2={
    msg:'bbb',
    htmlStr:'<span>bbbbb</span>',
    person:{
      name:'小姐姐',
      age:18,
      msg:'学习MVVM2',
      fav:{
        id:1,
        fname:'boys'
      }
    }
  }

  let aaa = 'person.fav.fname' //注意没有data1/data2对象初始
  let res =aaa.split('.').reduce((total,currentVal)=>{
    return total[currentVal]
  },data2) //传入data1/data2结果随之而改变,total获取到的是所传入第二个参数data2的全部
  let appDom = document.getElementById('app')
  appDom.innerHTML=res

3.vue中(还原部分供参考）：

const compileUtil = {
  text(node,expr,vm){    
    // expr可能是msg,或者obj.msg // const value = vm.$data[expr]||getVal(expr,vm)
    const value = this.getVal(expr,vm)   
    this.updater.textUpdater(node,value)
  },
  html(node,expr,vm){
    const value = this.getVal(expr,vm)
    this.updater.htmlUpdater(node,value)
  },
  model(node,expr,vm){
    const value = this.getVal(expr,vm)
    this.updater.modelUpdater(node,value)
  },
  on(node,expr,vm,eventName){},
  getVal(expr,vm) {
    return expr.split('.').reduce((data,currentVal)=>{
      console.log(currentVal)
      return data[currentVal]
    },vm.$data)
  },
  updater:{
    textUpdater(node,value) {
      node.textContent = value
    },
    htmlUpdater(node,value) {
      node.innerHTML = value
    },
    modelUpdater(node,value) {
      node.value=value
    }
  }
}