zoukankan      html  css  js  c++  java
  • JavaScript中对数组和数组API的认识

    JavaScript中对数组和数组API的认识

    一、数组概念:

      数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值。在数组中,每个值都有一个对应的不重复的索引值。自动匹配索引值的数组称为索引数组,自定义索引值的数组称为关联数组(又叫哈希数组)以下均研究索引数组。

    二、创建数组:

      使用数组之前首先都要先创建并赋值给一个变量,创建数组有两种不同的方法。

      1、调用构造函数Array()创建数组,索引数组索引值都从0开始

        eg:var arr=New Array();           //创建一个空数组

        eg:var arr=New Array(3);       //创建一个长度为3的数组

           arr[0]=12;              //存储一个Number类型的值

           arr[1]="abc";         //存储一个String类型的值

           arr[2]=true;              //存储一个Boolean类型的值

           可以简写:var arr=New Array(12,"abc",true);

     

      2、用数组字面量表示

        eg:var arr=[];          //创建一个空数组

        eg:var arr=[3];          //创建一个长度为1的数组,存错了一个数值3

        eg:var arr=[12,"abc",true];             //创建一个存储3个值的数组

     

    三、简单操作

      1、读取和设置数组中的值时,要使用一对方括号“[]”,里面是值的索引值

        eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

          console.log(arr[0]);        //12,取arr数组索引值为1的值,并打印在控制台

          arr[1]="ABC";         //取arr数组索引值为1的值,修改为“ABC”放入原数组

          console.log(arr[1]);     //ABC

          arr[3]="一";          //在数组中索引值为3的位置增加一个值"一"

          console.log(arr[3]);     //一

     

      2、数组的length属性可以得到数组的长度,修改length属性可以起到修改数组的效果

         索引数组里面最后一个值的索引值总比数组长度小1

        eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

          console.log(arr.length);    //3,此时arr数组的长度

          arr[arr.length]="ABC";    //在arr数组末尾新增一个值“ABC”,

          console.log(arr.length);    //4,新增之后arr数组的长度

          arr.length=arr.length-1;   //删除arr数组末尾的值

          console.log(arr.length);    //3,新增之后arr数组的长度

     

          也可以直接修改数组的长度

          arr.length=2;

          console.log(arr.length);    //2(小于之前的3),之前多出来的值会被删除

          arr.length=6;

          console.log(arr.length);    //6(大于之前的3),不够的值被自动补充为undefined

     

    四、遍历数组

      1、普通的for循环遍历

        通常情况下是从索引值0开始遍历,这样 i 的取值就要限制在[0,arr.length)

        eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

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

            console.log(arr[i]);

          }                //12  abc  true (空格处均有换行)

     

      2、用for...in方法遍历

        其中key表示索引值,arr表示要遍历的数组

         eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

          for(var key in arr){

            console.log(arr[key]);

          }                              //12  abc  true (空格处均有换行)

     

      3、用for...of方法遍历

        val表示数组的值,arr为数组

         eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

          for(var val of arr){

            console.log(val);

          }              //12  abc true (空格处均有换行)

     

      4、用forEach()方法遍历

        让数组的每一项都执行给定的函数,此方法没有返回值。

        该函数默认需要传参,分别是:数组每一项值,每一项值的索引值以及数组本身

         eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

          arr.forEach(function(x,index,a){

            console.log(index+"--"+x);

          })              //0--12  1--abc  2--true (空格处均有换行)

    五、数组属性

      1、length:数组包含的元素的个数,即数组的长度。详见上文 简单操作 第二条

      2、constructor:返回对创建此对象的数组函数的引用(不常用)

      3、prototype:可以用来向数组对象添加属性和方法(不常用)

     

    六、数组方法

      1、增加

        push():向数组末尾增加元素,并返回修改后数组的长度(后加)

        unshift():向数组开头增加元素,并返回修改后数组的长度(前加)

        eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

            var change1=arr.push("ABC");

          console.log("change1:"+change1+",当前数组:"+arr);

          //change1:4,当前数组:12,abc,true,ABC

          var change2=arr.unshift("一");

          console.log("change2:"+change2+",当前数组:"+arr);

          //change2:5,当前数组:一,12,abc,true,ABC

     

      2、删除

        pop():删除并返回数组的最后一个元素(后减)

        shift():删除并返回数组的第一个元素(前碱)

        eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

            var change3=arr.pop();

            console.log("change3:"+change3+",当前数组:"+arr);

          //change3:true,当前数组:12,abc

            var change4=arr.shift();

            console.log("change4:"+change4+",当前数组:"+arr);    

          //change4:12,当前数组:abc,true

      

      3、修改

        concat():连接两个或两个以上的数组,并返回新构建的数组

           创建原数组的副本,将元素或者数组添加到此副本的末尾并返回。

          在没有参数的情况下,只是返回原数组的副本。

             eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

             var arr1=arr.concat(8,["ABC","一"]);

             console.log("arr:"+arr+",arr1:"+arr1);  

             //arr:12,abc,true,arr1:12,abc,true,8,ABC,一(原数组未被改变)

        join():把数组元素组成一个字符串,通过参数指定的分隔符进行分隔

          该方法只有一个参数,即分隔符,用引号“""”包裹

          省略的话默认用逗号“,”分隔,若想要无缝衔接,用“""”

           eg:var arr=[12,"abc",true];     //创建一个存储3个值的数组

            console.log(arr.join());      //12,abc,true(默认用逗号分隔)

            console.log(arr.join(""));   //12abctrue(无缝衔接)

            console.log(arr.join(" "));  //12 abc true(用空格分隔)

        sort():对数组的元素进行排序,默认按升序排列数组中的元素

          sort()方法调用数组中值的toString()方法,比较得到的字符串排序(数值不例外)

          sort()方法是在原数组上进行排序的,会改变原数组

          eg:var arr=["a","b","c","d","e"];

            console.log(arr.sort());

            console.log(arr);    

            //["a", "b", "c", "d", "e"] ["a", "b", "c", "d", "e"](空格处有换行,原数组被改变)

          eg:var arr=[2,12,5,34];

            console.log(arr.sort());

            console.log(arr);    

            //[12, 2, 34, 5] [12, 2, 34, 5](空格均有换行,原数组被改变)

          上例显然是错误的,是因为sort()把所有数据类型转为字符串进行对比的

          为了解决这个问题,我们可以给sort()方法设置一个对比规则的函数作参数

          这个函数接收两个参数,若要第一个参数位于第二份参数之前,就返回一个负值

          反之则反,两个参数相等即返回0

          通过这个函数我们可以设置自定义的规则来进行数组排序

          eg:var arr=[2,12,5,34];

            function compare(a,b){

              if(a<b){

                return -1;

              }else if(a>b){

                return 1;

              }else{

                return 0;

              }

            }

            console.log(arr.sort(compare));

            //[2, 5, 12, 34] [2, 5, 12, 34](空格处有换行,原数组被改变)

        reverse():颠倒数组中值的顺序

          eg:var arr=[12,"abc",true];     //创建一个存储3个值的数组

            console.log(arr.reverse());

            console.log(arr);

            //[true, "abc", 12] [true, "abc", 12](空格处有换行,原数组被改变)

        slice():返回截取数组的一个片段组成的新数组,原数组不变

          该方法接受参数,表示从原数组截取项起始和结束索引值(不包括结束位置的值)

          若没有参数,则返回整个数组,相当于复制

          若只有一个参数,则表示从原数组截取项的起始位置索引值,结束位置默认为数组末尾

          若参数为负数,则表示将数组从后向前找位置,如:-2即倒数第二个值

          第二个参数表示的位置一定要在第一个参数表示位置之后,否则返回空数组

          eg:var arr=[0,2,4,6,8,10];

            console.log(arr.slice(2,4));    //[4,6]

            console.log(arr.slice(2));       //[4,6,8,10]

            console.log(arr.slice(2,-2));     //[4,6]

            console.log(arr.slice(-4,-2));      //[4,6]

            console.log(arr);          //[0,2,4,6,8,10]

        splice():可以实现多种操作,删除,插入和替换,会改变原数组

          删除:可以删除数组中任意项,接受两个参数,分别为:

            要删除的第一项的索引值和要删除的长度

          插入:可以在指定位置插入任意项,接受三个部分参数,分别为:

            要插入的起始位置,要删除的项的数量(0) 以及 要插入的项(可以是多个)

          替换:可以在是定位置插入任意项,同时删除任意项,接受三个部分参数,分别为:

            要插入的起始位置,要删除的项的数量(不为0) 以及 要插入的项(可以是多个)

            删除的项的数量和要插入的项的数量没有必然的关系,不必完全相等

          该方法返回包含删除项的数组,若没有删除项,则返回空数组,此方法会改变原数组

          eg:var arr=[0,2,4,6,8,10];

          console.log(arr.splice(2,2));       

          //[4,6] 被删除的值

          console.log(arr);            

          //[0,2,8,10] 删除:从索引值为2的地方开始删除两个元素

          var arr=[0,2,4,6,8,10];

          console.log(arr.splice(2,0,3));      

          //空数组 并未删除元素

          console.log(arr);            

          //[0,2,3,4,6,8,10]  插入:在索引值为2的地方插入一个数值3

          var arr=[0,2,4,6,8,10];

          console.log(arr.splice(2,1,3,5));        

          //[4] 把索引值为2的4删除,替换成了3,5

          console.log(arr);            

          //[0,2,3,5,6,8,10]  替换:把索引值为2的地方替换为两个数值3,5

     

        toString() :把数组转换为字符串,并返回结果

          eg:var arr=[0,2,4,6,8,10];

            console.log(arr.toString());      //0,2,4,6,8,10

        toLocaleString():把数组转换为本地字符串,并返回结果

          用地区特定的分隔符把生成的字符串连接起来,形成一个字符串

          eg:var arr=[0,2,4,6,8,10];

            console.log(arr.toString());      //0,2,4,6,8,10

     

      4、查找

        indexOf():获取元素在数组中第一次出现的位置,找不到则返回-1

          接受两个参数,分别为要查找的元素和开始查找的位置,从前往后查找

          第二个参数可以省略,表示默认从第一项开始查找,该参数必须小于数组长度

          eg:var arr=[0,2,4,6,2,10];

            console.log(arr.indexOf(2));      //1 默认从第一项开始查找

            console.log(arr.indexOf(2,2));      //4 从索引值为2的地方开始从前向后查找

        lastIndexOf():获取元素在数组中最后一次出现的位置,找不到则返回-1

          接受两个参数,分别为要查找的元素和开始查找的位置,从后往前查找

          第二个参数可以省略,表示默认从最后一项开始查找,该参数必须小于数组长度

          eg:var arr=[0,2,4,6,2,10];

            console.log(arr.lastIndexOf(2));    //4 默认从最后一项开始查找

            console.log(arr.lastIndexOf(2,2));    //1 从索引值为2的地方开始从后向前查找

     

     

     

        已上即为本文全部内容,希望能对各位有所帮助,若有不妥之处也请各位多多指正,共同进步。

  • 相关阅读:
    浅谈桶排思想及[USACO08DEC]Patting Heads 题解
    【知识总结】CSS中样式覆盖优先顺序
    【知识总结】Activiti工作流学习入门
    mac下安装nginx问题解决
    spring项目中dubbo相关的配置文件出现红叉的问题
    mybatis对java自定义注解的使用——入门篇
    自学spring过程中碰到的问题list,一个一个解决
    mac下常用软件整理
    小米面试题目(测试开发岗位——不是测试,是测试工具和平台的开发岗位)
    Knockoutjs:Component and Custom Elements(翻译文章)
  • 原文地址:https://www.cnblogs.com/Ni-F/p/9015938.html
Copyright © 2011-2022 走看看