zoukankan      html  css  js  c++  java
  • JS思维之路菜鸟也能有大能量(1)--模拟push

      因为本系列文章属于思维类,所以不做基础方法的讲解。

    任务:首先我定义了一个变量var arr = [0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分钟思考,在思考之前请不要往下看。

    分析:我们是想往这个数组的最后面添加东西对吧,关键点就在于我们如何才能找到元素最后的位置。先不去考虑最后一个位置,我们先来想想我们平时是怎么样访问一个数组的内容的,是不是这样arr[n],对不对,假如我们访问一个大于这个数组的索引,那么就是undefined,简单来说就是没有这个索引的话就是undefined,如果我们将这个数组的索引一直加1那么如果出现undefined是不是就是我们要找的位置,虽然这种方式可以,但是我有一个更好的方法就是利用length属性,length属性可以获取到这个数组的长度,那么这个长度就是这个数组的索引+1,刚好我们就是要往这个索引上添加内容。

    代码:

    var arr = [0,1,2,3,4,5];
    arr.length 获取这个数组的最后位置

    任务:现在我们获取到了数组的最后位置就可以给它添加内容了,那么怎么添加呢?给谁添加,怎么去添加。

    分析:现在回想一下往一个数组里面添加内容有哪些方式?获取到的这个长度就是我们要添加的位置。

    arr[arr.length] = value;

    合成:

    var arr = [0,1,2,3,4,5];
    function Push(value){
        arr[arr.length] = value;
    }
    Push(6);
    console.log(arr); //[0, 1, 2, 3, 4, 5, 6]

    任务:虽然现在可以往里面添加内容了,但是每次只能添加一个,怎么办呢?

    分析:突然好想念我的老朋友for,对这位老朋友可以帮我们完成一些重复的事情,那我们快请他来帮帮忙吧。

    代码:

    for(var i=0;i<?;i++)

    分析:我们应该怎么写这个for?i到底小于多少呢?是不是就是我们添加几位就是几啊?那么我们到底要添加多少位呢?好像我们确实不知道,但是却有一位老朋友知道,他就是arguments,它可以获取到我们传入的参数,并且它是一个伪数组,意味着它也可以像数组一样使用length属性获取我们传入的实参长度。

    代码:

    for(var i=0;i<arguments.length;i++){}

    分析:那么现在问题来了,我们把什么内容添加到哪里去,再回到我们任务,我们是不是想在某个数组的最后一个位置添加我们传进来的内容,对我们穿进来的,那么怎么获取我们传进来的内容呢,我们好像说过arguments可以获取它的内容。

    代码:

    var arr = [0,1,2,3,4,5];
    function Push(){
        for(var i=0;i<arguments.length;i++){
            arr[arr.length] = arguments[i];
        }
    }
    Push(6,7,8);

    完成。

    课外扩展:有基础的朋友

    ok,虽然这样已经完成了任务,但是现在的问题是,这段代码只能为arr这个数组服务,如果我们想为所以的数组提供这个功能就需要给Array的原型添加这个方法。

    var arr = [0,1,2,3,4,5];
    Array.prototype.Push = function(){
        for(var i=0;i<arguments.length;i++){
            this[this.length] = arguments[i];
        }
    }
    
    arr.Push(1,2,3)

    把里面的arr修改成this,this表示谁调用就是谁,如果你想了解更多关于this的内容,可以看彻底理解js中this的指向,不必硬背这篇文章。

    如果你有好的建议可以和我联系,期待下次和你见面。

  • 相关阅读:
    初识算法和数据结构
    cookies、sessionStorage和localStorage解释及区别
    常用元素操作api之select下拉列表操作(八)
    常用元素操作api之定位常见alert框操作(七)
    常用元素操作api之定位元素操作iframe(六)
    常用元素操作api之select下拉列表层级定位操作(五)
    常用元素操作api之定位一组元素操作(四)
    常用元素操作api之等待时间标操作(三)
    Java实现获取命令行中获取指定数据
    Java格式化字符串Format
  • 原文地址:https://www.cnblogs.com/pssp/p/5245979.html
Copyright © 2011-2022 走看看