js的基本知识点以及相关内容的测试——数组

数组:

   特点:
        数组长度可以动态修改(通过length修改)
        数组中的元素类型可以任意

        length:可以获取数组长度,可以设置数组长度
     1.创建数组实例对象
        1.数组字面量
          var arr=[1,2,3,undefined,null,false,function,{}];

代码测试:

-------------------空数组+数组数据类型-------------------

数组数据类型为object

-------------------------非空数组--------------------------

数组元素function(){},输出后结果为[Function]
        2.构造函数
          var arr=new Array();        //创建空数组
          var arr=new Array(10);      //当参数个数为一个,并且数据类型为number时,代表创建该长度的数组
          var arr=new Array(2,3,true,null);        //参数个数超过一个,创建一个包含参数项的数组

代码测试:

----------------------数组长度----------------------

     创建数组-构造函数方法大概原理
 ----    function Array(){
            if(arguments.length==0){       //当参数个数为0即空数组
              //--------                                          //arguments类数组对象
            }else if(arguments.length==1&&typeof(arguments[0])=='number'){//当参数个数为1,且参数的数据类型为number,类型二
              //10
            }else{       //类型三
            }
          }
-----     new Array();
    2.访问
        arr[index];            //index为数组下标,下标从0开始
        var arr=[];
            arr.length=5;
            arr[0]=null;

代码测试:

-----------------通过length来改变数组长度----------------

---------------通过设值改变数组长度----index>数组长度-------------

----------------通过设置length改变数组长度---length<数组长度--------------

相当于删除了数组长度减length个数组元素

    3.检查
        isArray()      返回当前参数是否为数组类型,如果是返回true
        Array.isArray(a);      //静态方法,用Array构造函数来调,isArray()声明在构造函数函数内

代码测试:


        Array.from()        //es6,将类数组对象(必须具有length属性,属性名一定为number类型或者字符串类型的number)转换为数组

代码测试:

--------------------Array.from---------------------

           ----arguments为空----

          ----arguments非空----

          -------------判断Array.from是否是一个数组-------------

----------------------写一个类数组对象用Array.from将其转换为数组-----------------

        Array.of()           //es6,将参数转换为数组或将参数当作数组元素添加到数组中创建数组,相当于创建一个数组

代码测试:


        istanceof    判断一个数据是否是一个类型,在此可以判断arr是否是数组
         例:console.log(arr instanceof Array)

代码测试:



    4.转换
        将数组转换为字符串
        1》toString();

代码测试:


           转换后的数据类型不是object object证明Array构造函数中的property中一定也重写了toString方法,这个toString方法的返回值为原样输出。
        2》join()                  //将数组元素使用什么连接并组成字符串

              join("-");

代码测试:

 


    5.方法
        1.添加或者删除数组元素
            1.栈方法(先进后出)
              实例对象调用
                pop()       //删除一个数组元素
                arr.pop()
                   参数:无
                   返回值:删除的数组元素

  代码测试:

         如下图所示,栈方法pop()所删除的数组元素为数组的最后一个元素,没有参数,返回值为删除的数组元素。

  

  
                push()      //添加一个数组元素
                arr.push()
                   参数:添加的数组元素
                   返回值:添加元素之后的数组长度

代码测试:

       如下图所示,栈方法push()添加的元素,添加在原数组末尾,参数为所要添加的数组内容,返回值为添加元素之后的数组长度。

  

  
            2.队列方法(先进先出)
                shift()
                arr.shift()    //删除数组元素
                   参数:无
                   返回值:删除的数组元素

代码测试:

       如下图所示,队列方法shift( )删除数组元素,删除的元素是数组的第一个元素,没有参数,返回值是删除的数组元素。

   

   
                unshift()
                arr.unshift()   //添加数组元素
                   参数:添加的数组元素
                   返回值:添加元素之后的数组长度

代码测试:

       如下图所示,队列方法unshift( )添加数组元素,所添加的数组元素位于数组开头,参数为所要添加的数组元素,返回值为添加元素后的数组长度。

   

   
        2.排序方法
            reverse()    //反转 ,直接在原数组上进行反转
               参数:无
               返回值:反转之后的数组

代码测试:

        如下图所示,排序方法reverse( ),没有参数,返回值为反转后的数组,且反转是在原数组内反转,没有创建新数组。

   

   
            sort()       
               参数:无   //调用每一个数组元素的toString()进行排序
               参数:   //例:arr.sort(function(a,b))
                回调函数:       
                function(a,b){      //a,b每次比较的两个数值
                  if(a>b){
                   return 1;         //返回值为正1,代表将a往后排
                 }else if(a<b){
                   return -1;        //返回值为负1,代表将a向前排
                 }else{
                   return 0;        
                 }
               }

代码测试:

-------------------------参数为无-------------------------

       如下图所示,排序方法sort( )当参数为无时,调用每一个数组元素的toString( )进行排序,先比较每一个数组元素的第一个字符,然后再比较第二个字符排序。

---------------------------有参数(参数必为回调函数)---------------------------

--------------a,b的赋值-------------

----------------升序排列----------------

---------------降序排列--------------

-----------------------------排序例子-------------------------------

如下图所示,通过sort( )排序,有参数,参数必须是回调函数

     1)不论a,b是哪个数组元素,元素都为object类型,需要调用toString( ),将元素转换为字符串类型才能比较,但是,arr数组中的元素为键值对,无法进行比较,所以不能直接将function(a,b){ }回调函数直接写在sort( )的括号内

     2)声明函数handler(key){ },通过返回回调函数,将回调函数传入sort( )中

     3)handler("age")将实参“age”传给形参key(其他属性同理)

     4)  此时回调函数内a,b仍为对象,key为age,仍不能直接比较a,b

     5)将a的key赋给c,将b的key赋给d,根据c,d比较的结果进行判断

      3.操作方法
             非静态方法
             concat(): 用来做数组拼接,只要将需要拼接的内容传给它即可。
                 返回值为一个新数组。
                 可以拼接一个普通数据类型,也可以拼接一个或多个数组。

代码测试:

       如下图可知,concat( )进行数组拼接,参数为拼接内容,在数组末尾进行拼接,返回值为拼接完成后形成的新数组。

-----------------数组和字符串拼接-----------------

    

    

----------------数组和数组拼接----------------

    两个数组

   三个数组:

 

 
             slice():  数组截取(切割)
                //不修改原数组
                0:返回一个新数组,并且和原数组一样
                1:
                   index:从当前index位置开始截取,截取到数组末尾结束。
                2:
                   begin end   从begin位置开始截取,至end位置结束,不包含位置
                 //-1代表最后一个数组元素

代码测试:

 -------------------------参数个数为0-------------------------------

如下图可知,slice( )进行数组切割,参数个数为0时,返回值为一个和原数组一模一样的新数组,相当于原数组的复制

----------------------------参数个数为1-----------------------------

       如下图所示,可知slice( )进行数组截取,参数为1时,参数为index,数组下标,截取内容为:从index位置开始截取,截取至末尾,返回值为截取内容构成的新数组。

-----------------------------参数个数为2---------------------------

       由下图可知,slice( )截取数组,参数个数为2时,第一个参数为begin起始位置,第二个参数为end结束位置,截取内容为从begin位置截取到end位置,不包含end位置内容,返回值为截取部分组成的新数组。


             splice():  数组截取
                 //修改原数组
                0:返回值为一个空数组
                1:
                   index  从当前index位置开始截取,截取到数组末尾结束
                2:
                   begin num  从begin位置开始截取,截取num个元素
                3:
                   1》begin num "hello","world"   替换,从begin位置开始,截取num个元素,用“hello”,“world”补上,相当于替换
                   返回值为截取部分,原数组为替换结果
                   2》begin 0 "hello"            插入,从begin位置开始,截取0个元素,插入"hello"
                   返回值为空数组,原数组为插入结果

代码测试:

-------------------参数个数为0----------------------

由下图可知,splice( )进行数组切割,参数个数为0时,返回值为一个空数组。

-------------------参数个数为1--------------------

       由下图可知,splice( )进行数组切割,参数个数为1时,参数为index,切割内容为从index位置到数组末尾的内容,返回值为切割内容组成的新数组,原数组变为切割后剩下的部分。

---------------------参数个数为2-----------------------

       由下图可知,splice( )进行数组切割,参数个数为2时,第一个参数为index,第二个参数为num,截取内容为从index位置开始截取,截取num个元素,返回值为截取内容构成的新数组,原数组变为截取后剩下的部分。

------------------------参数个数为3------------------------

   1)第二个参数num不等于0

         由下图可知,splice( )进行数组切割,参数个数为3,第一个参数为index,第二个参数为num,第三个参数为字符串,截取内容为从index开始截取,截取num个元素,返回值为截取内容构成的新数组,原数组为第三个参数字符串插入截取内容在原数组的位置,相当于做了替换操作,将截取部分替换为第三个参数。

   2)第二个参数等于0

        由下图可知,splice( )进行数组切割,参数个数为3,第一个参数为index,第二个参数num为0,第三个参数为字符串,截取内容为从index开始截取,截取0个元素,返回值为空数组,原数组变为从第三个元素位置插入第三个参数的内容后的结果。


             indexOf(key,index):
             全等比较
                 查找数组元素,从前向后查找,只找一个元素即返回
                 对于找到的元素返回数组下标
                 对于找不到的元素,返回-1

代码测试:

----------------------参数个数为1,第一个参数为key,第二个参数index默认为0---------------

        由下图可知,indexOf( )对数组元素进行查找,参数为所要查找的元素内容,从前往后查找,查找到一个即停止,返回值为查到的元素下标index。

       由下图可知,indexOf( )查找元素,用的是全等比较,数据类型也得符合。

----------------参数个数为2,第一个参数为key,第二参数为index起始位置下标--------------

由下图可知,从index位置开始查找key,返回值为查找到的元素的下标。

由下图可知,当找不到时,返回值为-1。


             lastIndexOf():
                 查找数组元素,从后向前查找,找到,返回值为找到的元素下标,找不到,返回值为-1.

代码测试:


         4.迭代方法(数组)
             //非静态方法
             every:   当每一个数组元素满足条件时,返回true
             some:    只要有一个数组元素满足条件,返回true
             map:    对数组每一元素进行操作,返回值是一个包含操作后的数组元素的新数组
             filter: 过滤,过滤满足条件的数组元素,返回值是所有满足条件的数组元素构成的新数组
             forEach():    //forEach没有返回值,以上四个有返回值
             以上五种迭代方法的参数是一样的,分别为回调函数和回调函数中的this
                 回调函数参数:
                     item index arr        //数组元素  当前数组下标  当前数组

代码测试:

--------------------------forEach( )遍历------------------------

        由下图可知,当前回调函数有几个数组项就执行几次当前的回调函数,结果第一列为item,第二列为index数组下标,第三列为数组arr。

由下图可知,forEach( )是没有返回值的。

由下图可知,回调函数的this默认指向window(兜底)。

由下图可知,forEach( )参数为回调函数和回调函数的this,通过设置第二个参数,可以修改回调函数的this指向。

-------------------every( )--------------------

由下图可知,every( )返回值为布尔值,只有数组中的每一个元素都符合条件时才返回true。

-------------------------some( )---------------------------

         由下图可知,some( )返回值为布尔值,只要数组中有一个元素都符合条件就返回true,所有数组元素都不满足条件时才返回false。

------------------------map( )-------------------------

由下图可知,map( )遍历每一个数组元素并对数组元素进行相应的操作,返回值为一个执行操作后的新数组。

------------------------filter( )------------------------

由下图可知,filter对数组元素进行过滤,返回值为满足条件的数组元素组成的新数组。

--------------------------myForEach( )-仿写forEach( )----------------------------

1)myForEach( )一定声明在Array.prototype(Array的原型对象)中

2)在myForEach( )的函数声明里通过arguments[0]拿到arr.myForEach( )中的实参--回调函数function( ){ }

3)arr有几个数组项就得循环几次,通过this拿到数组,myForEach( )被arr调用,this一定指向arr

4)用for循环遍历数组,循环执行回调函数,不能arguments[0]( )直接调用,如果这样调用,当前函数回调函数的this值指向arguments,但是forEach( )在不设第二个参数的情况下默认指向window,满足if( )用call( )/apply( )改变this指向window,满足else if( )用call( )/apply( )改变this指向myForEach( )的第二个参数,即指向arguments[1]。

var arr=[1,2,3,4,5];

Array.prototype.myForEach=function()

         {

            if(arguments.length==1&&typeof arguments[0]=="function"){

           //当参数为一个并且为函数类型时

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

                    arguments[0].call(window,this[i],i,this);

             }

           }else if(arguments.length==2){

             //当参数为两个,第一个为回调函数,第二个为this时

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

                        arguments[0].call(arguments[1]);

                    }

           }

  }

arr.myForEach( function(item,index,arr ){

          console.log(item,index,arr);

});

---------------------满足if( )-------------------

----------------满足else if( )-------------

--------------------------myForEach( )--仿写forEach( )---------------------------
             reduce():  //es6
               参数:回调函数和this
               其中回调函数参数: pre item index arr
                        //pre 上一次回调函数的返回值或初始值
                        如果this值没有设定,那么第一次pre为数组的第一个数组项,如果this值设定  ,第一次pre为初始值,第二次的pre为上一次回调函数的返回值

代码测试:

由下图可知reduce( )的参数pre第一次遍历,初始值为{ },返回object{ },第二次往后的遍历返回值都为undefined,是因为,没有给第一次的遍历设置返回值。

随意给一个返回值1,第一列pre除第一个返回值为初始值object{ }外,其他都是1

给一个返回值item,第一列pre除第一个返回值为初始值object{ }外,其他为前一个遍历的item值

不设this,返回值设为item,遍历少了一次,因为第一次遍历的pre为上一次遍历为数组的第一个数组项。第一次遍历的返回值item=1为第二次遍历的pre值,第一次遍历的pre没有初始值和上一次遍历,所以少了。

-----------------------------reduce( )笔试题-----------------------------

题目:

要求:

JavaScript编写:

       使用一次array的reduce方法:

给定一个数组:

var a=[1,2,3,4,5,6,7.........]

请写一个函数可以返回一个数组,形式如下:

var b=[[1,2,3,4,5],[6,7,8,9,10]....]

即5个一组分割成数组再组成一个更大的数组,最后一个数组如果不足5个,实际剩几个就包含几个,但不得为空。

1)slice( )

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值