Vue中的辅助函数和js数组的高阶函数 map、filter、reduce

目录

一、辅助函数：

（1-1）响应式函数 （数组更新检测）：

（1-2）对象更新检测：

二、js 中数组的高阶函数 map、filter、reduce：

  

 ■ filter：过滤（通过回调函数拿到当前数组的每个元素）

  ■ map：映射 （通过回调函数拿到当前数组的每个元素）

■ reduce：汇总（通过回调函数拿到当前数组的每个元素）

---

一、辅助函数：

（1-1）响应式函数 （数组更新检测）：

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

（1-2）对象更新检测：

    1、使用Vue.set(object, propertyName, value) 或者 实例.$set(object, propertyName, value);

    例如：Vue.set(this.stu，’love’，’sing’)；

 2、使用Object.assign( )

    例如：this.stu = Object.assign({ }, this.stu, {
     
              name: ‘玉山’，
     
              love：‘money’
     
         })

二、js 中数组的高阶函数 map、filter、reduce：

  

 ■ filter：过滤（通过回调函数拿到当前数组的每个元素）

        遍历数组，对元素通过设定某种条件，不满足的元素过滤掉了，最终返回经过过滤的数组。

   ● 要求回调函数返回值是布尔值，为true时，当前的元素添加到内部数组中，为false则过滤掉。

// 1.filter函数的使用（让原数组中元素值小于10的被过滤掉）
let newNums = nums.filter(function (n) {
   return n < 10
 })

  ■ map：映射 （通过回调函数拿到当前数组的每个元素）

        遍历数组，对元素设定某种处理条件（例如增删改查操作），最终返回经过处理的数组。

  ● 数组调用map函数，返回值是经过map函数的参数---回调函数处理过的新数组。 

  ● 回调函数的参数（当前数组的元素）

//map函数的使用：(让原数组中的每个元素值翻倍)
let new2Nums = newNums.map(function (n) { 
       return n * 2
})

■ reduce：汇总（通过回调函数拿到当前数组的每个元素）

      遍历数组，对元素进行“累加”，最终返回“累加结果”。

● 数组调用reduce函数（作用就是汇总，从初始值开始不断的“累加”），

所以一般数组调用reduce函数需要有两个参数【第一个是回调函数，第二个是初始值】

● 回调函数（“累加器”--为了实现“累加”作用）往往也是需要两个参数的（+运算符的作用对象就是2个呀，例如1+2（+两边各有一个对象）哈哈哈）：

第一个参数：preValue 前一次汇总后return的值， 第二个参数：n  当前元素

 // 3.reduce函数的使用（对数组中所有的所有元素进行累加）
 //new2Nums是一个数组
 let total = new2Nums.reduce(function (preValue, n) {
   return preValue + n
 }, 0)

<div id="app">
    <div>
    总价格:{{total | getPrice}}
    </div>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      books: [
        {name: '算法导论1', date:'2018-1-1', price:100.5099, count:'1'},
        {name: '算法导论2', date:'2018-1-1', price:100.9988, count:'1'},
        {name: '算法导论3', date:'2018-1-1', price:100.98, count:'1'},
        {name: '算法导论4', date:'2018-1-1', price:100.00, count:'1'},
      ]
    },
    computed: {
      total(){
        return this.books.reduce(function (preValue, n) {
          return preValue + n.count * n.price;
        }, 0);
      }
    },
    filters: {
      getPrice(price){
        // return '￥' + parseFloat(price).toFixed(2) ;
        return '￥' + price.toFixed(2) ;
      }
    }
</script>