forEach(), map(), filter()方法的使用及模拟解析

278 阅读2分钟

map():可以用来处理数组里的数据(如每个数值*2)

使用方法:数组.map(回调函数)

map方法不会改变原数组,所以如果想要内置数组的值(处理好的数据),就需要把内置数组赋值给新的数组

     //map方法的使用
        /*
        let arr = [1, 2, 3, 4, 5, 6]

        let newArr = arr.map(function(value){
             
             return value*2

         })

         console.log(newArr);
        */


     //模拟map解析 , newMap为自定义方法,

        //Array.prototype可以使所有数组能使用newMap自定义方法--在Array的原型中添加newMap方法

        //callBack是map传入的回调函数

        let arr = [1, 2, 3, 4, 5, 6]

        Array.prototype.newMap = function (callBack) {

            //定义一个内置数组

            let array = []

            //循环遍历数组,数组就是调用方法的数组

            //谁调用谁就是this

            for (let index = 0; index < this.length; index++) {

                //在callBack函数操作完返回到这里并且赋值给res

                //再把res添加到内置数组

                let res = callBack(this[index])

                array.push(res)

            }

            return array//返回内置数组

        }

        function callBack(value) {
            
            return value * 2

        }

        let temp = arr.newMap(callBack)

        console.log(temp);


filter():可以用来筛选数组(如只要数组里面小于10的数值)

使用方法:数组.filter(回调函数)

filter方法不会改变原数组,所以如果想要内置数组的值(筛选好的数据),就需要把内置数组赋值给新的数组

    //filter会把数组遍历后筛选是true的值新增到内置数组
        /*

        let abc = ['0', '0', 9, 2, 12, 11]

        let temp = abc.filter(function (value, index) {

            return value < 10

        })

        console.log(temp);

        */



    //filter模拟解析
        let arr = ['0', '0', 9, 2, 12, 11, 1]

        Array.prototype.newFilter = function (callBack) {

            //定义一个内置数组

            let temp = []

            //遍历调用方法的数组

            //谁调用谁就是this

            for (let i = 0; i < this.length; i++) {

                //判断如果为true就添加到内置数组

                if (callBack(this[i])) {

                    temp.push(this[i])

                }

            }

            return temp//返回内置数组

        }

        function callBack(value) {

            return value < 10

        }

        let temp = arr.newFilter(callBack)

        console.log(temp);

forEach():可以把数组全部遍历一遍

使用方法:数组.forEach(回调函数)

forEach方法没有返回值,而且只能用来遍历数组哦

    //forEach可以把整个数组循环一遍

        //forEach没有返回值

        /*

        let arr = [1, 2, 3, 4, 5, 6]

        arr.forEach(function (value, index) {

            console.log(value, index);

        })

        */

        let arr = [1, 2, 3, 4, 5, 6]
        
   //forEach解析模拟

        Array.prototype.newForEach = function (callBack) {

            for (let i = 0; i < this.length; i++) {

                //循环调用函数

                //每调用一次就执行一次函数并把实参传入

                callBack(this[i], i)

            }

        }

        arr.newForEach(function (value, index) {

            console.log(value, index);

        })