Q8.你的map和reduce长啥样子？

哦，节日快乐。

 

一.myMap详解

1.map的实现

        let arr = [3, 2, 5, 8, 9, 4];
        // arr.map((item, index, items) => console.log(item, index, items));
        // arr.map((item, index, items) => item); //返回数组

        // 实现
        Array.prototype.myMap = function (callback, callbackThis) {

            // 遇到的问题3 ：也就是参数的处理：

            // this的处理 满足必须是数组
            let isArr = Object.prototype.toString.call(this);
            if (isArr !== "[object Array]") {
                throw new Error(this + '.myMap is not a function');
            }

            // callback 必须存在
            if (typeof callback != 'function') {
                throw new Error(callback + " is not a function");
            }

            // console.log(callback);
            // callback();//遇到的问题1：回调函数的参数如何传过去

            let arrHelp = [];

            //解决问题1的办法是这样的 ：知道this是谁
            // console.log(this); 是 [3, 2, 5, 8, 9, 4]
            let len = this.length;
            for (let i = 0; i < len; i++) {
                let arrHelpItem = callback.call(callbackThis, this[i], i, this);
                arrHelp.push(arrHelpItem);
            }

            //解决问题2的办法：myMap()方法没有写返回值 默认是undefined ，此时根据map的特性 返回的是数组 所以使用辅助数组帮助
            return arrHelp;
        }

        // test
        arr.myMap((item, index, items) => {
            console.log(item, index, items);
            return item; //遇到的问题2：返回undefined  为什么呢？
        });

        // 根据map  参数超过三个 返回是undefined
        arr.myMap((item, index, items, d) => {
            console.log(item, index, items, d);
        });

        arr.myMap((item, index, items) => {
            return this; //window
        }, ['a', 'b']);

        arr.myMap(function () {
            return this; // ['a','b']
        }, ['a', 'b']);

2.map 的应用

        //using :使用 map 重新格式化数组中的对象
        var kvArray = [{ key: 1, value: 10 },
        { key: 2, value: 20 },
        { key: 3, value: 30 }];

        var reformattedArray = kvArray.myMap(function (obj) {
            var rObj = {};
            rObj[obj.key] = obj.value;
            return rObj;
        });

二.myReduce详解

1.reduce实现

        let arr = [3, 2, 5, 8, 9, 4];
        arr.reduce((a, b, c, d, e) => console.log(a, b, c, d, e));
        arr.reduce((a, b, c, d, e) => { console.log(a, b, c, d, e); return a + b }, 0); //31

        //实现
        Array.prototype.myReduce = function (callback, initVal) {

            // this的处理 满足必须是数组
            let isArr = Object.prototype.toString.call(this);
            if (isArr !== "[object Array]") {
                throw new Error(this + '.myReduce is not a function');
            }

            // callback 必须存在
            if (typeof callback != 'function') {
                throw new Error(callback + " is not a function");
            }

            let call = initVal || this[0];
            let len = this.length;
            let bool = true; //借助bool值 处理reduce方法的 第二个参数

            for (let i = 0; i < len - 1; i++) {
                if (initVal && bool) {
                    bool = false;
                    i = i - 1;
                }
                call = callback(call, this[i + 1], i + 1, this);
            }
            return call; //解决问题1办法：return call 并且使用 callback函数第一个参数是 return的call
        }

        // test
        arr.myReduce((pre, cur, time, items) => {
            console.log(pre, cur, time, items);
            return pre + cur; // 遇到的问题1：如果return这个是怎么处理？
        });

        //   根据reduce  参数超过四个 返回是undefined
        arr.myReduce((pre, cur, time, items, e) => {
            console.log(pre, cur, time, items, e);
        });

2.reduce应用

        //using 将二维数组转化为一维
        let flattened = [[0, 1], [2, 3], [4, 5]].myReduce(
            (acc, cur) => acc.concat(cur),
            []
        );


        // using  计算数组中每个元素出现的次数
        let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
        let countedNames = names.myReduce(function (allNames, name) {
            if (name in allNames) {
                allNames[name]++;
            }
            else {
                allNames[name] = 1;
            }
            return allNames;
        }, {});

        // using 按属性对object分类
        let people = [
            { name: 'Alice', age: 21 },
            { name: 'Max', age: 20 },
            { name: 'Jane', age: 20 }
        ];
        function groupBy(objectArray, property) {
            return objectArray.myReduce(function (acc, obj) {
                let key = obj[property];
                if (!acc[key]) {
                    acc[key] = [];
                }
                acc[key].push(obj);
                return acc;
            }, {});
        }
        let groupedPeople = groupBy(people, 'age');
        console.log(groupedPeople);

        // using 使用扩展运算符和initialValue绑定包含在对象数组中的数组
        let friends = [{
            name: 'Anna',
            books: ['Bible', 'Harry Potter'],
            age: 21
        }, {
            name: 'Bob',
            books: ['War and peace', 'Romeo and Juliet'],
            age: 26
        }, {
            name: 'Alice',
            books: ['The Lord of the Rings', 'The Shining'],
            age: 18
        }];

        let allbooks = friends.myReduce(function (prev, curr) {
            return [...prev, ...curr.books];
        }, []);
        console.log(allbooks);

        //using 数组去重 let orderedArray = Array.from(new Set(myArray)); 
        let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
        let myOrderedArray = myArray.myReduce(function (accumulator, currentValue) {
            if (accumulator.indexOf(currentValue) === -1) {
                accumulator.push(currentValue);
            }
            return accumulator;
        }, [])
        console.log(myOrderedArray);

注意：map和reduce函数调用都有第二个参数，但是呢map的第二个参数不常用。