map、filter、reduce函数的使用

1、filter() 作用：过滤

        // 1、筛选出大于30的数。
        const array = [10, 20, 30, 40, 50, 60, 70, 80]
        // 普通写法
        // let newarray = array.filter(function (k) {
        //     return k > 30
        // })

        // ES6写法
        let newarray = array.filter((k) => k > 30)
        console.log(newarray)

2、map（） 作用：便于对数组中的每个元素进行操作

        // 2、把数组元素乘2
        //把数组中的每个元素作为变量传进去
        let newArray2 = newarray.map(function (n) {
            return n * 2
        })
        console.log(newArray2)

3、reduce() 作用：对数组中的元素进行汇总

        //3、把数组中的元素相加
        let newArray3 = array.reduce(function (previousValue, n) {
            return previousValue + n
        },0)
        console.log(newArray3)

******完整代码******

条件：对数组进行下面三个操作。

1、筛选出大于30的数。

2、把数组元素乘2

3、把数组元素汇总

    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {},
        })

        // 对下面数组进行如下操作 1、2、3

        /*  1、筛选出大于30的数。
            2、把数组元素乘2 
            3、把数组元素汇总 */

        const array = [10, 20, 30, 40, 50, 60, 70, 80]
        // 1、筛选出大于30的数。

// 普通写法
        let newArray = array.filter(function (k) {
            return k > 30
        })

        // 2、把数组元素乘2
        //把数组中的每个元素作为变量传进去
        let newArray2 = newArray.map(function (n) {
            return n * 2
        })
        console.log(newArray2)

        //3、把数组元素相加
        let newArray3 = newArray2.reduce(function (previousValue, n) {
            return previousValue + n
        }, 0)
        console.log(newArray3)
    </script>

// 链式写法
        let newArray22 = array.filter(function (k) {
            return k > 30
        }).map(function (k) {
            return k * 2
        }).reduce(function (previousValue, k) {
            return previousValue + k
        })
        console.log(newArray22)

// 箭头函数写法
        let newArray333 = array.filter((k) => k > 30).map((k) => k * 2).reduce((previousValue, k) => previousValue + k)
        console.log(newArray333)