javascript中数组类型的属性和方法

时间 2019-12-10

原文原文链接

和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]）。访问数组时，若是索引值小于数组长度，则返回对应项的值。设置数组的值时语法相同，但会替换对应位置的值。spa

数组的length属性，返回数组的长度，能够根据数组的length属性向数组追加值，如：arr[arr.length] = 123;code

但若是索引值大于或等于数组长度，数组就会自动增长到该索引值加1的长度。以下所示：对象

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

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

另外，直接设置数组的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个迭代方法最大的差异。