欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js中数组常用方法的简单重构(部分),帮助你加快理解数组中常用方法

程序员文章站 2022-04-14 16:04:47
将指定数字插入到数组的末尾,返回值为 将数组的第一个元素删除并返回,返回值为 ......

push

将指定数字插入到数组的末尾,返回值为新数组的长度

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    ary.length = 5;
    ary.push(1) ;
    ary = [1,2,3,4,5,1];
    ary.length = 6;

   //方法重构:
array.prototype.mypush = function () {
    for (i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i];
    }
    return this.length
}

pop

将数组最后的元素删除,返回值为删除掉的元素

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var num = ary.pop();
    console.log(num); == 5

    //方法重构:
array.prototype.mypop = function () {
    var num = this[this.length - 1];
    this.length--
    return num
}

unshift

将指定的数字插入到元素的前面,返回值为新数组的长度

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    ary.length = 5;
    ary.unshift(1) ;
    ary = [1,1,2,3,4,5];
    ary.length = 6;

    //方法重构:
array.prototype.myunshift = function () {
    var len = this.length; //用一个变量存储原来的数组的长度
    this.length += arguments.length; //传入进来几个参数,数组的长度就增加传入进来的参数的长度
    for (var i = 0; i < arguments.length; i++) {
        /* 整体需要进行几轮的循环,循环的轮数应该与传入进来的实参长度相等,因为第一轮的时候只是将数组整体往后面移了一个位置,想要前面能够有足够实参插入的长度,那么循环的轮数就是由实参的长度所确定的*/
        for (var j = len; j > 0; j--) {
            /* 因为往前面插入,所以将数组的中原来的值往后移动,并且从最后一位开始移动才能使数组中的元素不被覆盖 */
            this[j] = this[j - 1];
            /* 让后面为空的元素等于前面的值,将数组的值依次往后移动 */
        }
        len++; /* 内部循环完毕后,此时的原数组的最后一位已经往后移动了一位,如果还需要将数组往后继续进行移动的话,那么就应该从原数组的最后一位继续往后移动,所以此时的len就应该加一。如果不进行加一操作的话,会把后面的元素覆盖掉,并且整个数组将不会再往后移动,后面都是空元素 */
    }
    return this.length
}

shift

将数组的第一个元素删除并返回,返回值为被删除的元素

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var num = ary.shift();
    console.log(num); === 1

    //方法重构:
array.prototype.myshift = function () {
    var num = this[0];
    var len = this.length;
    for (var i = 0; i < len; i++) {
        this[i] = this[i + 1];
    }
    this.length--;
    return num
}

concat

将数组进行拼接,返回值是拼接后的数组(传入的参数中有数组,并且其中存在空元素,空元素也会进行拼接)

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var ary1 = ary.concat([1, 2, 3, , 4], {a:1})
    console.log(ary1) === [1, 2, 3, 4, 5, 1, 2, 3, , 4, {a:1}]

    //方法重构:
array.prototype.myconcat = function () {
    var ary = this;
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i].constructor === array) {
            for (var j = 0; j < arguments[i].length; j++) {
                ary[ary.length] = arguments[i][j];
            }
        } else {
            ary[ary.length] = arguments[i];
        }
    }
    return ary
}

join

将数组用传入的参数进行拼接,返回值为拼接后的字符串(不传入参数,默认为"")

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var str = ary.join();
    console.log(str) === "1,2,3,4,5"

    //方法重构:
array.prototype.myjoin = function () {
    var str = "";
    if (arguments[0] === "" || arguments[0] === undefined) {
        for (i = 0; i < this.length - 1; i++) {
            str += this[i] + ",";
        }
    } else {
        for (i = 0; i < this.length - 1; i++) {
            str += this[i] + arguments[0];
        }
    }
    str += this[this.length - 1];
    return str
}

some

第一个传入的参数为一个函数,该函数有三个参数,分别为item、index、ary,将该函数执行,返回执行结果,如果结果中有一个true结束运行没有true将一直查找下去。返回值为布尔值

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var bool = ary.some(function(item,index,ary){
        return item > 4;
    })// true

    //方法重构:
array.prototype.mysome = function () {
    for (var i = 0; i < this.length; i++) {
        var bool = arguments[0](this[i], i, this);
        if (bool) return true;
    }
    return false;
}

every

第一个传入的参数为一个函数,该函数有三个参数,分别为item、index、ary,将该函数执行,返回执行结果,如果结果中有一个false结束运行没有false将一直查找下去。返回值为布尔值

    //原方法示例
    var ary = [1, 2, 3, 4, 5];
    var bool = ary.every(function(item,index,ary){
        return item > 1;
    })// false

    //方法重构
array.prototype.myevery = function () {
    for (var i = 0; i < this.length; i++) {
        var bool = arguments[0](this[i], i, this);
        if (!bool) return false;
    }
    return true;
}

slice

可传入两个参数,第一个参数代表这起始下标位置,第二个参数选填,代表到这个数字下标前结束.

不传参数,默认截取到末尾,参数也可为负数.

返回值截取的数组成的数组,原数组不变

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    ary.slice() ===> [1, 2, 3, 4, 5];
    ary.slice(1,3) ===> [2, 3]
    ary.slice(-3,-1) ===> [3, 4]

    //方法重构:
array.prototype.myslice = function () {
    /* 
    分为两种情况:
    1、当arguments[1]为0时,或者为undefined时,此时有以下情况:
        1、如果此时的arguments[1]是undefined时有以下情况:
            1、当arguments[0]大于等于0时,从arguments位下标开始往后截取
            2、当arguments[0]为undefined时,复制一份原数组
            3、其他情况都返回空数组
    2、当arguments[1]为true时,有以下情况:
        1、正常情况下,当arguments[0]小于等于arguments[1]时,有以下情况
            1、两个参数都是大于0的情况下(arguments[0]可等于0),从arguments[0]位下标开始复制到arguments[1]位下标前一位结束
            2、两个参数都小于0时,此时的开始位置(arguments[0])和结束位置(arguments[1])应该都加上数组的长度
        2、除去上面的情况,都为非正常情况,所以都返回空数组
    */
    var ary = [];
    if (arguments[1] > this.length) arguments[1] = this.length;
    //判断传入的第二个参数是否超出数组的长度,如果超出,则让它默认为数组的长度
    if (!arguments[1]) {
        //当argumens为0或者不传时
        if (typeof arguments[1] === 'undefined') {
            //判断当argumens[1]是否为undefined,如果是,进入此语句
            if (arguments[0] >= 0) { //当argumens[0]
                for (var i = arguments[0]; i < this.length; i++) {
                    ary[ary.length] = this[i];
                }
                return ary
            } else if (typeof arguments[0] === 'undefined') {
                for (var j = 0; j < this.length; j++) {
                    ary[ary.length] = this[i];
                }
                return ary
            }
        } else return ary //除去上述情况都为非正常情况,返回空数组

    } else {
        //否则当argument[1]>0时进入此语句
        if (arguments[0] <= arguments[1]) {
            //正常情况下开始位置总会小于等于结束位置
            if (arguments[0] >= 0 && arguments[1] > 0) {
                //第一种情况:两个都大于0时(arguments[0]可以等于0)
                for (var k = arguments[0]; k < arguments[1]; k++) {
                    //直接复制
                    ary[ary.length] = this[k];
                }
                return ary
            } else if (arguments[0] < 0 && arguments[1] < 0) {
                //第二种情况:两个都小于0时
                for (var n = arguments[0] + this.length; n < arguments[1] + this.length; n++) {
                    //首先需要将两个负的参数都加上数组的长度变为正
                    ary[ary.length] = this[n];
                }
                return ary
            } else return ary //除去上述情况都为非正常情况,返回空数组
        } else return ary //除去上述情况都为非正常情况,返回空数组  
    }
}

foreach

将数组中的每一项进行遍历,不遍历空元素无返回值

array.prototype.myforeach = function () {
    var len = this.length-1;
    for (var item in this) {
        if (len === 0) break;
        arguments[0](this[item],item,this);
        len--;
    }
}

map

将数组中的每一项进行遍历,返回一个与原数组长度相同的数组

    // 原方法示例:
    var ary = [1, 2, 3, 4, 5];
    ary.map(function(item,index,ary){
        return item * 2
    }) === [2,4,6,8,10]

    // 方法重构:
array.prototype.mymap = function () {
    var ary = [];
    ary.length = this.length;
    var len = ary.length-1;
    for (var item in this) {
        if (len === 0) break;
        ary[item] = arguments[0](this[item],item.this);
        len--;
    }
    return ary
}

filter

第一个传入的参数为一个函数,函数中可传入三个参数,分别为item、index、ary,返回值是一个由所有满足条件的元素所组成的数组

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    ary.filter(function(item,index,ary){
        return item > 2
    }) === [3,4,5]

    //方法重构:
array.prototype.myfilter = function () {
    var ary = [];
    for (var i = 0; i < this.length; i++) {
        var bool = arguments[0](this[i], i, this);
        if (bool) {
            ary[ary.length] = this[i];
        }
    }
    return ary
}

reduce

第一个传入的参数为一个函数,函数中可传入四个参数,分别为value、item、index、ary,返回计算后第一个参数的值,返回值为一个值

如果有传入第二个参数,那么第一个参数的第一个参数的默认值就为它,并且第一个参数的第二个参数从数组的第0位起始;

否则,未传入,那么第一个参数的第一个参数就时数组的第0位,并且第一个参数的第二个参数从数组的第1位起始

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var num = ary.reduce(function(value,item,index,ary){
        return value + item;
    })
    console.log(num) === 15

    //方法重构:
array.prototype.myreduce = function () {
    var initvalue;
    var i = 0;
    if (arguments[1] || arguments[1] === 0) {
        initvalue = arguments[1];
    } else {
        initvalue = this[0];
        i++;
    }
    while (i < this.length) {
        initvalue = arguments[0](initvalue, this[i], i, this);
        i++;
    }
    return initvalue;
}

reduceright

第一个传入的参数为一个函数,函数中可传入四个参数,分别为value、item、index、ary,返回计算后第一个参数的值,返回值为一个值

如果有传入第二个参数,那么第一个参数的第一个参数的默认值就为它,并且第一个参数的第二个参数从数组的第length-1位起始;

否则,未传入,那么第一个参数的第一个参数就时数组的第length-1位,并且第一个参数的第二个参数从数组的第length-2位起始

    //原方法示例:
    var ary = [1, 2, 3, 4, 5];
    var num = ary.reduceright(function(value,item,index,ary){
        return value + item;
    })
    console.log(num) === 15

    //方法重构:
array.prototype.myreduceright = function () {
    var initvalue;
    var i = this.length - 1;
    if (arguments[1] || arguments[1] === 0) {
        initvalue = arguments[1];
    } else {
        initvalue = this[this.length - 1];
        i--;
    }
    while (i >= 0) {
        initvalue = arguments[0](initvalue, this[i], i, this);
        i--
    }
    return initvalue
}