Javascript漂流记（下）__深入数组扩展方法（一）

数组扩展：前面我们提到了数组的基本方法及使用。接下来进行一些拓展。

整篇文章以下图数据为例进行说明。

        var personArr = [
            {name:'张飞', age:18, des:'比蚂蚁牙黑', gender:'male'},
            {name:'李逵', age:16, des:'我比楼上还黑', gender:'male'},
            {name:'朴小姐', age:22, des:'来一碗水饺', gender:'female'},
            {name:'张老爷', age:28, des:'什么冬梅来着？', gender:'male'},
            {name:'李静静', age:18, des:'给我一首歌的时间', gender:'female'}
        ];
        var obj = {name: 'James'};

一、 forEach遍历（1.必须有一个函数作为参数，2.函数执行length次，3.第二个参数决定函数this指向）

        personArr.myForEach(function(ele, index, self){
            console.log(ele, index, self, this);
        }, obj);
        //模拟实现forEach
        Array.prototype.myForEach = function(func){
            var _arr = this, len = _arr.length, param2 = arguments[1] || window;
            for(var i = 0; i < len; i++){
                func.apply(param2, [_arr[i], i, _arr]);
            }
        }

二、filter 过滤

        var newArr = personArr.myFilter(function(ele, index, self){
            console.log(ele, index, self, this);
            return true;//过滤的数据保存到新数组中
        }, obj);
        //模拟实现filter
        Array.prototype.myFilter = function(func){
            var _arr = this, len = _arr.length, param2 = arguments[1] || window， newArr = [];
            for(var i = 0; i < len; i++){
                func.apply(param2, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : '';
            }
            return newArr;
        }

三、map 映射，对每个元素都做一个相应的操作，集中处理

        var newArr = personArr.myMap(function(ele, index, self){
            console.log(ele, index, self, this);
            return ;//统一操作后的结果,操作引用值会改变原数组，建议使用深度克隆
        }, obj);
        //模拟实现map
        Array.prototype.myMap = function(func){
            var _arr = this, len = _arr.length, param2 = arguments[1] || window, newArr = [];
            for(var i = 0; i < len; i++){
                newArr.push( deepClone({}, func.apply(param2, [_arr[i], i, _arr]) ) );
            }
            return newArr;
        }

四、every(像逻辑&&)

        var flag = personArr.myEvery(function(ele, index, self){
            console.log(ele, index, self, this);
            return true;//每一个都返回true，整体才是true。
        }, obj);
        //模拟实现every
        Array.prototype.myEvery = function(func){
            var _arr = this, len = _arr.length, param2 = arguments[1] || window, flag = true;
            for(var i = 0; i < len; i++){
                if(!func.apply(param2, [_arr[i], i , _arr])){
                    flag = false;
                    break;
                }
            }
            return flag;
        }

五、some(类似every。有就可以，不需要所有都满足)

六、reduce 函数执行完会返回一个值（第二个参数必填，不决定this指向）

    var initialValue = {name: 'James'};//函数在第一次执行时的prevValue，第一次执行完返回的值作为第二次的prevValue
    var lastValue = personArr.myReduce(function(preValue, curValue, index, self){
        console.log(preValue, curValue, index, self, this);
        return preValue;//决定函数下次执行时的preValue
    }, initialValue, obj);
    //模拟实现reduce
    Array.prototype.myReduce = function(func, initialValue){
        var _arr = this, len = this.length, param2 = arguments[2] || window;
        for(var i = 0; i < len; i++){
            initialValue = func.apply(param2, [initialValue, _arr[i], i, _arr]);
        }
        return initialValue;
    }

       练习：根据某个cookie的key获取value

        var cookieStr = "BAIDUID=996AB921E1CA819448BA3119B205BC75:FG1; BIDUPSID=996AB921E1CA819448BA3119B205BC75; PSTM=1553805587; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; locale=zh; delPer=0; PSINO=2; H_PS_PSSID=1438_21091_29135_28519_29098_29134_28835_28585_26350_29131_22158; LOCALGX=%u592A%u539F%7C%38%31%33%7C%u592A%u539F%7C%38%31%33; Hm_lvt_e9e114d958ea263de46e080563e254c4=1559551392,1559551396; Hm_lpvt_e9e114d958ea263de46e080563e254c4=1559551396";
        function parseCookie(str){
            var cookieObj = {};
            var cookieArr = cookieStr.split('; ');
            cookieArr.reduce(function(preValue, curValue, index, self){
                var curArr = curValue.split('=');
                cookieObj[curArr[0]] = curArr[1];
                return preValue;
            }, cookieObj)
            return cookieObj;        
        }
        
        console.log(parseCookie(cookieStr));

以上内容属二哥原创，整理自 "渡一教育Javascript课程" ，一个值得推荐的"渡一教育"。