美文网首页
封装自己的reduce、foreach、filter、sort、

封装自己的reduce、foreach、filter、sort、

作者: della岳 | 来源:发表于2022-02-11 09:31 被阅读0次
    1. 封装自己的forEach方法
    //func 传入回调函数,obj 指定回调函数中的this指向
    Array.prototype.myForEach = function (func, obj) {
        var _this = arguments[1] || window; //如果传入第二个参数obj,就把obj作为回调函数中的this指向
        for (var i = 0; i < this.length; i++) {
            func.call(_this, this[i], i, this);
        }
    }
    //使用
    var arr = [1, 2, 3];
    arr.myForEach(function (item, index, arr2) {
        console.log(this)
    })
    
    1. 封装自己的filter方法
    //func 传入回调函数,obj 指定回调函数中的this指向
    Array.prototype.myFilter = function (func, obj) {
        var _this = arguments[1] || window; //如果传入第二个参数obj,就把obj作为回调函数中的this指向
        var arr = [];
        for (var i = 0; i < this.length; i++) {
            if (func.call(_this, this[i], i, this)) {
                arr.push(this[i]);
            }
        }
        return arr
    }
    //使用
    var arr = [1, 2, 3];
    var arr2 = arr.myFilter(function (item, index, arr2) {
        return item >= 2
    })
    console.log(arr2)
    
    1. 封装自己的reduce
    //func 传入回调函数,initArr 辅助数组
    Array.prototype.myReduce = function (func, initVal) {
        var prevVal, i;
        if (initVal !== undefined) {
            prevVal = initVal;
            i = 0;
        } else { //第一个initVal没传,默认取第一个元素,此种情况,for循环会少一次
            prevVal = this[0];
            i = 1;
        }
        for (; i < this.length; i++) {
            prevVal = func(prevVal, this[i], i, this)
        }
        return prevVal
    }
    //使用
    var arr = [1, 2, 3, 3, 4, 5, 5];
    var result;
    // 1、用来累加
    result = arr.myReduce(function (prev, item, index) {
        return prev + item
    })
    console.log(result) //23
    // 2、指定初始值
    result = arr.myReduce(function (prev, item, index) {
        return prev + item
    }, 10)
    console.log(result) //33
    // 3、用来去重
    result = arr.myReduce(function (prev, item, index) {
        if (!prev.includes(item)) {
            prev.push(item)
        }
        return prev
    }, [])
    console.log(result) //[1, 2, 3, 4, 5]
    
    1. sort排序
      分两层遍历。遍历到第一个元素时,第一个元素需要和第一个元素之后的所有元素比较一次大小。
    Array.prototype.mySort = function (func, obj) {
        var _this = arguments[1] || window; //如果传入第二个参数obj,就把obj作为回调函数中的this指向
        for (var i = 0; i < this.length - 1; i++) {
            // 处理第i个元素,需要从i后面的所有元素中找到最小的,替换到i位置
            for (j = i + 1; j < this.length; j++) { //遍历i后面的所有元素,与i元素意义对比出最小值
                if (func.call(_this, this[i], this[j]) > 0) { //返回值大于0 的执行交换位置
                    var temp = this[i]; 
                    this[i] = this[j];
                    this[j] = temp;
                }
            }
        }
        return this
    }
    //使用
    var arr = [2, 1, 6, 44, 3, 22];
    console.log(arr.mySort((a, b) => a - b)) //[1, 2, 3, 6, 22, 44] 升序
    console.log(arr.mySort((a, b) => b - a)) //[44, 22, 6, 3, 2, 1] 降序
    
    1. call函数调用
    Function.prototype.myCall = function(obj){ //省略参数了,用arguments读参数
        var ctx = arguments[0] || window
        ctx.fn = this; //把方法挂在ctx的fn上,
        var args = []; //除去第一个参数(用来改变this指向的),取剩下所有参数
        for (var i = 1; i < arguments.length; i++) {
            args.push(arguments[i])
        }
        var result = ctx.fn(...args); //这种方式调用方法,可以保证this指向ctx,也就是传入的第一个参数
        delete ctx.fn; //删除fn,恢复原样
        return result
    }
    var obj = {
        a:1
    }
    var a = 's' //全局作用域下,等于window.a = 's',this指向window
    function getSum(){
        return this.a //this指向谁,在于函数调用时,这个函数挂在谁上面,就指向谁
    }
    console.log(getSum()) //s
    console.log(window.getSum()) //s
    console.log(getSum.call(obj)) //1
    
    1. apply函数调用
    Function.prototype.myApply = function(){
        var ctx = arguments[0] || window
        ctx.fn  = this; //把方法挂在ctx的fn上,
        var result ;
        if(!arguments[1]){ //函数本身没有参数时
            result = ctx.fn();
            delete ctx.fn;
            return result
        }
        result = ctx.fn(...arguments[1]); //这种方式调用方法,可以保证this指向ctx,也就是传入的第一个参数
        delete ctx.fn;//删除fn,恢复原样
        return result
    }
    var obj = {
        a:1
    }
    var a = 's'  //全局作用域下,等于window.a = 's',this指向window
    function getSum(a,b){
        return this.a+''+a+b //this指向谁,在于函数调用时,这个函数挂在谁上面,就指向谁
    }
    console.log(getSum(8,9)) //s89
    console.log(window.getSum(8,9)) //s89
    console.log(getSum.myApply(obj,[8,9])) //189
    

    相关文章

      网友评论

          本文标题:封装自己的reduce、foreach、filter、sort、

          本文链接:https://www.haomeiwen.com/subject/kpsnkrtx.html