当前位置：移动技术网 > IT编程>开发语言>JavaScript > js中数组常用方法的简单重构(部分)，帮助你加快理解数组中常用方法

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

2020年03月30日 | 移动技术网IT编程 | 我要评论

`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
}

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景

为了让大家体验基于 Agora SDK 实现的互动直播场景，我们三年前开发了应用 Agora Live。近期，我... [阅读全文]
uniapp中使用sqlite模块1——打包SQLite

sqlite用法：使用SQLiteuniapp导入sqlite模块：第一步，使用HBuilderX：打开mani... [阅读全文]
安卓移动端固定在底部的按钮被软件盘顶上去的解决方案

问题描述当安卓手机访问按钮吸底的页面时，处于absolute（绝对）定位或fixed（固定）定位的按钮，会被键盘... [阅读全文]
关于Vue使用CDN引用ElementUI

关于Vue使用CDN引用ElementUI前言使用过程及问题解决前言最近自己做一个小网站，因为服务器性能不是很好... [阅读全文]
React Native搭建基础环境+Redux全局配置

备注：本基础环境建立在一位慕课大佬讲解的项目基础上，通过详细的阅读其源码，重新构建出来的，风格类似，写出来仅仅是... [阅读全文]
Nightmare Ⅱ HDU - 3085

HDU - 3085读题太难了，请看这位大神的翻译：大神的中文题意思路：这就是一道暴力BFS模拟啊！！最多再加点... [阅读全文]
vuejs （2）- Vue 生命周期和 VueJS ajax

1 Vue 生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程.8 个生命周期的执行点4个基本的4... [阅读全文]
uni-app 升级配置

<script> import { appUpApi } from './api/index.js... [阅读全文]
vue3.x项目在手机端调试踩坑记录

最近在做一个手机端的vue项目练习，准备在手机端调试运行时，发现在局域网下只能加载出标题，没有数据。解决：我用的... [阅读全文]
Android打包移除assets中的文件

背景由于需要给厂商提供一个aar包，里面有一个json文件在assets中，在他们项目中，这个json配置文件会... [阅读全文]

网友评论


验证码：

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

2020年03月30日 | 移动技术网IT编程 | 我要评论

push

pop

unshift

shift

concat

join

some

every

slice

foreach

map

filter

reduce

reduceright