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)