zoukankan      html  css  js  c++  java
  • javascript中数组类型的属性和方法

    和Object一样,Array类型也是ECMAScript中最常用的类型了。

    ECMAScript的数组虽然也是数据的有序列表,但还是与其他语言中的数组有很大的区别。比如ECMAScript数组每一项都可以保存任何类型的数据,而且数组的大小可以随着数据的添加自动的增长以容纳新数据。

    1.创建数组

       创建数组的基本方式有两种:(1)通过构造函数 new Array();(2)通过数组字面量 var arr = [];

    复制代码
    1 //第一种,使用Array构造函数
    2 var arr1 = new Array();                       //创建空数组
    3 var arr2 = new Array(20);                     //使用构造函数创建数组时,如果只传入一个数字,则该数字代表数组的长度,如:创建数量为20的数组(即 arr.length=20)
    4 var arr3 = new Array("red", "blue", "grey");  //创建一个包含3个字符串值的数组
    5 
    6 //第二种,使用数组字面量表示法
    7 var arr = ["red", "blue", "grey"];            //数组项之间以逗号隔开,使用字面量时只传入一个数字,表示数组只有一项数据。
    复制代码

     创建了数组后,可以使用方括号和基于0(从0开始)的数字索引读取和设置数组的值(如colors[0])。访问数组时,如果索引值小于数组长度,则返回对应项的值。设置数组的值时语法相同,但会替换对应位置的值。

    数组的length属性,返回数组的长度,可以根据数组的length属性向数组追加值,如:arr[arr.length] = 123;

    但如果索引值大于或等于数组长度,数组就会自动增加到该索引值加1的长度。如下所示:

    1 var colors = ["red", "blue", "grey"];
    2 colors[9] = "green";
    3 alert(colors.length);                 //10

    数组的长度变为10,但位置3至8实际都是不存在的,被访问时都将返回underfined。

    另外,直接设置数组的length属性,可以从数组的末尾移除或添加项,即属性length是可读可写的:

    1 //移除第3项(索引值为2)
    2 var colors = ["red", "blue", "grey"];
    3 colors.length = 2;
    4 alert(colors[2]);      //underfined

    原数组中尾项已被移除,故已无法访问。但考虑到变量值为underfined有两种情况:变量未被定义,或变量未初始化。所以,当通过设置length值来增长数组长度时,新增的每一项的值也都是underfined。故无法通过访问具体一项数组的值来确定数组的长度是否被改变。 

    清空数组的方法:

    (1)arr.aplice(0,arr.length);利用数组的splice方法,删除数组的全部值;

    (2)arr.length = 0;数组的length属性是可以直接赋值的;

    (3)arr = [];直接把数组指向一个空数组(推荐);

    2.检测数组 

      ECMAScript提供instanceof操作符,检测对象具体是什么类型。A instanceof B:A是不是一个通过B创造出来的实例,是返回true,不是返回false,但用于检测数组,instanceof只能在一个全局作用域中达到令人满意的效果。

      在包含多个框架的网页中,存在两个以上不同的全局作用域,从而存在两个以上不同版本的Array构造函数。若从一个框架向另一个框架传入数组,那传入的数组与传入的框架中原生创建的数组具有不同的构造函数,instanceof可能将它们视作不同的对象。

      所以,ECMAScript5新增了Array.isArray()方法,目的只为确定某值是不是数组(是则返回true),不考虑全局执行环境。

    3.转换字符串方法

    • toString()  把数组转化成字符串
    • valueOf()   返回数组对象本身
      1 var colors = ["red", "blue", "grey"];
      2 alert(colors.toString());   //red,blue,grey
      3 alert(colors.valueOf());    //red,blue,grey
      4 alert(colors);              //red,blue,grey

      toString()方法返回数组中每个值的字符串形式拼接成的以逗号隔开的字符串。调用valueOf()方法返回的还是数组。而alert()会在后台调用toString()方法,所以会得到与直接调用toString()方法相同的结果。

    • toLocaleString()

      调用toLocaleString()也会返回一个数组值的以逗号分隔的字符串,与toString()方法的区别在于它调用的是数组每一项的toLocaleString()方法。

    • join()  把数组的每一项以特定的方式拼接;
      var colors = ["red", "blue", "grey"];
      alert(colors.join());        //red,blue,grey
      alert(colors.join("&"));     //red&blue&grey

      join()方法可以接收一个用作分隔符的字符串为参数,以分隔数组值。当它不传入参数时,则默认使用逗号作为分隔符。

    • join方法的原型:
    • function join(arr,ele){
        var temp = arr[0];
        for( i = 1 ; i <arr.length ; i++){
          temp +=ele + arr[i];      
        }
         return temp;   
      }

    4.栈方法

       ECMAScript为数组提供了push()和pop()方法,以实现类似栈的行为(从数组末尾添加和删除)。 

    方法 接收参数 对数组影响 返回值
    push() 可以接收任意数量的参数 将参数逐个添加到数组末尾 返回修改后的数组的长度
    pop() 不接收参数 从数组末尾移除最后一项,减少数组length值 返回移除的项

    5.队列方法  

    除栈方法外,还有shift()和unshift()方法,与push()和pop()结合,可以实现类似队列的行为。

    方法 接收参数 对数组影响 返回值
    shift() 不接收参数 移除数组中的第一项 返回移除的项
    unshift() 可以接收任意数量的参数 将参数逐个添加到数组前端 返回修改后的数组的长度

    shift()和push()方法结合,可以在数组末尾添加,在头部删除。

    而结合unshift()和pop()方法,可以从相反的方向模拟队列。

    6.重排序方法 

      数组中存在两个可以直接用来重排序的方法:reverse()和sort()。

      reverse()方法可以直接反转数组项的顺序,但也只有这一项功能:

    1 var arr = [1,2,3,4,5];
    2 arr.reverse();
    3 alert(arr);             //5,4,3,2,1

    reverse方法原型:

    function reverse(arr){
      for( i = 0; i < arr.length/2; i++ ){
         var temp = arr[i];
         arr[i] = arr[arr.length - 1 - i];
         arr[arr.length-1-i] = temp;
      };
    return arr; }

      

    sort()方法则可以灵活地对数组排序,默认情况下是按升序排列数组项。

    sort()方法的原理是对数组每一项调用toString()转型方法,获得字符串后进行比较。所以不论数组项的数据是什么类型,sort()方法都是当做字符串比较。所以在某些情况下,sort()方法不能给出令人满意的效果,如下:

    1 var arr = [10,2,13,4,5];
    2 arr.sort();
    3 alert(arr);              //10,13,2,4,5

      改进后,sort()方法可以接收一个比较函数作为参数,比较函数则可以接收两个进行比较的参数

      若函数返回负数,表示参数1应该位于参数2之前;返回0,则表示相等;返回正数,则表示参数1应位于参数2之后。如下,是一个让sort()方法按升序排列的比较函数:

    复制代码
    1 //比较函数
    2 function compare(value1,value2){
    3     return value1 - value2;
    4 } 
    5  
    6 var arr = [10,2,13,4,5];
    7 arr.sort(compare);
    8 alert(arr);              //2,4,5,10,13
    复制代码

     数组的冒泡排序:升序;

    function ascending(arr){
      for( i = 0; i < arr.length -1; i++ ){
           var flog = true;
           for( j = 0; j < arr.length -1 -i ;j++){
               if( arr[j] > arr[j+1] ){
                  flog = false;
                  var temp = arr[j+1];
                  arr[j+1] = arr[j];
                  arr[j] = temp;
                }    
           };
        if( flog ){
          break;    
        };  
      };
    return arr; }

     数组的去重:

    function remdup(arr){
     for( i = 0 ; i < arr.length -1 ; i++){
      for( j = i +1 ; j < arr.length ; j++){
       if( arr[i] == arr[j] ){
        arr.splice(j,1);
       };
      };
     };
     return arr;
    };

     第二种方法,创建一个新数组,把原数组中的值插入到新数组中,如果有相同的值,则不添加:

    var data = ['blue', 'red', 'green', 'blue'];
    
    function newData(data) {
        var nData = new Array();
        for (var i = 0; i < data.length; i++) {
            if (nData.indexOf(data[i]) == -1) {
                nData.push(data[i]);
            }
        }
        return nData;
    }
    newData(data);

    7.操作方法

       上文中提到push()方法、pop()方法、shift()方法和unshift(),可以对数组的头部和末尾进行添加或是删除的操作。对于包含在数组中的项的操作,ECMAScript也提供了一些方法。

    1) concat()方法

      此方法先创建一个当前数组的副本,若无参数,则只复制当前数组、返回该副本;若传入参数(参数可以是一或多个数组,或者直接是数据值),则将参数值都添加到副本数组中,并返回结果数组。

    1 var colors1 = ["red", "blue", "grey"];
    2 var colors2 = colors1.concat("green", ["black", "white"])
    3 alert(colors1);        //red,blue,grey
    4 alert(colors2);        //red,blue,grey,green,black,white

      需要注意,concat()方法不影响原来的数组。

    2) slice()方法

      slice()方法可以基于当前的数组中的一项或多项创建一个新数组,接收一个或两个参数。

      接收一个参数时,返回从该参数指定位置到当前数组末尾的所有项;接收两个参数时,返回起始位置(参数1)到结束位置(参数2)的所有项,但返回的项中不包括结束位置对应的项,如参数为1和4时,表示复制当前数组从位置1到位置3的项。见下列例子:

    复制代码
    1 var colors1 = ["red", "blue", "grey", "green", "black", "white"];
    2 var colors2 = colors1.slice(1);
    3 var colors3 = colors1.slice(1,4);
    4 
    5 alert(colors2);        //blue,grey,green,black,white
    6 alert(colors3);        //blue,grey,green
    复制代码

      slice()方法同样不影响原本的数组。

    3) splice()方法

      splice()方法可以说十分强大,可以对数组中的任意位置进行删除、插入和替换。

      删除:传入两个参数——要删除的第一项的位置、要删除的项数,如colors.splice(0,2)会删除数组的前两项。

      插入:传入3个以上参数——起始位置、0、要插入的任意数量的项。第二项固定为0,表示删除0项。如colors.splice(2,0,"red", "black")会在数组位置2开始插入字符串。

      替换:结合删除和插入功能,在被删除的项的位置插入新的项,就可以达到替换的效果,可接收3个以上参数——起始位置、要删除的项数、要插入的任意数量的项。

      见如下例子:

    复制代码
    1 var colors1 = ["red", "blue", "grey"];
    2 var colors2 = colors1.splice(0,1);                      //删除
    3 var colors3 = colors1.splice(1, 0, "green", "black");   //插入
    4 var colors4 = colors1.splice(1, 1, "white");            //替换
    5  
    6 alert(colors2);        //blue,grey
    7 alert(colors3);        //red, green, black, blue,grey
    8 alert(colors4);        //red, white, grey
    复制代码

     

    8.位置方法

       ECMAScript5新增了indexOf()和lastIndexOf()两个位置方法,接收两个参数——要查找的项、查找起点位置的索引(可不选)。indexOf()从数组头部向后查找,lastIndexOf()则是从数组末尾向前查找,返回的都是要查找的项在数组中的位置(若未找到则返回-1)。

      需要注意的是,比较要查找的项和数组中的每一项时,会使用全等操作符(===),表示要查找的项必须严格相等(类型和值都一致)。

         查找数组中每一项出现的次数:

    function cishu(arr){
       var obj = {};
       for( i = 0; i < arr.length; i++){
           if( obj[arr[i]] ){
             obj[arr[i]]++;
           }else{
            obj[arr[i]] = 1;
           }
        }
       return obj;
    }

    9.迭代方法

      ECMAScript5提供的5个迭代方法,都是接收两个参数——在数组每一项上运行的函数、运行该函数的作用域对象(可不选)。而作为参数的函数又可以接收三个参数——数组项的值、该项在数组中的位置、数组对象本身。

    方法 返回
    every() 参数函数对数组每一项都返回true,则返回true
    filter() 返回该参数函数返回true的项组成的数组
    forEach() 无返回值,只对数组每一项运行参数函数
    map() 返回每次参数函数调用的结果组成的数组
    some() 参数函数对数组有任何一项返回true,就返回true

      举一例:

    复制代码
    1 var numbers = [10, 2, 23, 14, 7,18];
    2 
    3 var filterResult = number.filter(function(item, index, array){
    4     return (item > 10);
    5 });
    6 
    7 alert(filterResult);       //23,14,18
    复制代码

    10.归并方法

       ECMAScript新增了reduce()和reduceRight()两个方法,用以归并数组。两个方法都接收两个参数——在数组每一项上调用的函数、作为归并基础的初始值。传入的函数又可以接收4个参数——前一个值、当前值、项的索引和数组对象,用以迭代数组所有的项。

      reduce()方法从数组第一项开始向后遍历,reduceRight()则是从相反方向遍历。见如下求和例子:

    1 var numbers = [10, 2, 23, 15];
    2 var sum = numbers.reduce(function(pre, cur, index, array){
    3     return (pre + cur);
    4 });
    5 alert(sum);        //50

      两个归并方法迭代数组所有的项,然后只构建一个最终返回的值,这是和5个迭代方法最大的差别。

  • 相关阅读:
    xlwt 写sheet xls 文件
    xlrd 安装步骤
    托管DLL和非托管DLL的区别
    MongoDB 第一篇
    memcache
    gitignore忽略规则
    GIT 学习笔记
    前端渲染模板(一):Thymeleaf
    架构实战项目心得(十四):spring-boot结合Swagger2构建RESTful API测试体系
    架构实战项目心得(十一):基于spring-security-oauth2的mysql数据表设计
  • 原文地址:https://www.cnblogs.com/chang229/p/6567582.html
Copyright © 2011-2022 走看看