Vue笔记（五）

vue三个高阶函数

1. filter
2. map
3. reduce

filter函数

filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

举例1：

        new Vue({
            el: '#app',
            data: {
                filter: [112, 45, 134, 77, 23, 72, 48, 34, 123,],
            },
             methods: {
                getFilter() {
                    this.filter = this.filter.filter(p => {
                        return p > 100
                    })
                    console.log(this.filter)
                }
             }
          })

这个方法会把数组里面小于100的值去掉，只保留大于100的数。

例子2：

又或者我们可以利用它来对数组进行一个去重处理，把数组里重复的元素给去除掉。

new Vue({
            el: '#app',
            data: {
                filter: [112, 45, 134, 77, 77, 72, 48, 45, 123,],
            },
             methods: {
                getFilter() {
                    this.filter = this.filter.filter((p, index, self) => {
                        return self.indexOf(p) == index
                    })
                    console.log(this.filter)
                },
             }
          })

这个方法可能有的人看不太懂，我简单说一下self表示原始的数组，通过indexOf()方法来查看元素第一次出现的索引,如果出现相同的元素，但是索引却与第一次出现的元素的索引不同，就不会把重复的元素添加到新的数组中。

map函数

方法返回一个新数组，新数组中的每一个元素为原始数组对应每一个元素调用函数处理后的值；不会对空数组进行编辑，不改变原来的数组。

举例：

new Vue({
            el: '#app',
            data: {
                map: [112, 45, 134, 77, 77, 72, 48, 45, 123,],
            },
             methods: {
               getFilter() {
                    this.map = this.map.map(p => {
                        return p * 2
                    })
                    console.log(this.map)
                },
             }
          })

将数组里的值全部乘以2。

reduce函数

方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，数组中被删除或从未被赋值的元素不处理.

举例：

new Vue({
            el: '#app',
            data: {
                map: [112, 45, 134, 77, 77, 72, 48, 45, 123,],
            },
             methods: {
                getReduce() {
                    this.reduce = this.reduce.reduce((prev, cur, index, arr) => {
                        return prev + cur;
                    })
                    console.log(this.reduce)
                },
             }
          })

这个方法输出的是数组的和。

prev的值是表示的是数组的第一个值，也就是初始值，不过，我们也可以自己定一个初始值。

      this.reduce = this.reduce.reduce((prev, cur, index, arr) => {
           return prev + cur;
      },0)

这样在计算数组的和时，就会把0作为第一个值。

要注意的是如果数组是一个空数组，那么如果不加初始值的话，就会报错。

当然，这只是reduce的简单用法，我们还可以利用它来对数组内的元素进行统计，看看它们出项的次数。

getReduce() {
                    this.reduce = this.reduce.reduce((pre, cur) => {
                        if (cur in pre) {
                            pre[cur]++
                        } else {
                            pre[cur] = 1
                        }
                        return pre
                    }, {})
                    console.log(this.reduce)
                },