【JS】JavaScript 内置对象：Array 数组对象

JavaScript 是一种基于对象的语言。对象是一种特殊的数据类型，由变量和函数共同构成。

其中变量称为对象的属性，函数称为对象的方法。

在 JavaScript 中，对象分为：

内置对象
自定义对象

内置对象是指系统预先定义好的，直接使用的对象。常见的内置对象有：

Array 数组对象
String 字符串对象
Data 日期对象
Math 数学对象
RegExp 正则表达式对象

Array 数组对象

数组对象的创建

数组对象的属性

constructor，返回对象的构造函数

length，数组的长度

prototype，为对象添加属性和方法

数组对象的常用方法

concat () ，连接数组。

join () ，将数组元素放入字符串，并用指定分隔符隔开。

push ()，向数组末尾添加元素，并返回新的长度。

pop () ，删除并返回数组最后一个元素。

shift ()，删除并返回数组第一个元素。

reverse ()，颠倒数组元素的顺序。

slice () ，从已有的数组中返回选定的元素。

sort () ，对数组中的元素进行排序。

splice ()，在数组中添或/删除元素，然后返回被删除的元素。

unshift () ，向数组的开头添加元素，并返回新的长度。

二维数组

数组（Array）是一个有序的数据集合。

与 Java 语言不同的是：在 JavaScript 中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存到一个数组中。

1. 数组对象的创建

格式如下：

var array1=new Array();
var array2=new Array(size);
var array3=new Array(element0,element1,...);
var array4=[element0,element1,...];

在使用无参构造函数创建数组时，返回一个空数组，数组长度为 0.
使用 Array(size) 创建数组时，返回一个长度为 size 的数组，且数组中的元素均为 undefined。
使用 Array(element0,element1,...) 创建数组时，数组的长度等于参数个数，使用参数来初始化数组。
[element0,element1,...] 还可以使用简写形式来创建数组。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <input id="btn1" type="button" value="btn1"/>
  <input id="btn2" type="button" value="btn2"/>
  <input id="btn3" type="button" value="btn3"/>
  <script type="text/javascript">
    var array1=new Array();
    document.getElementById("btn1").onclick=function(){
        alert(array1.length);
    }
    
    var array2=new Array(3);
    array2[0]=0;
    array2[1]=1;
    array2[2]=2;
    document.getElementById("btn2").onclick=function(){
        var str="array2[3] : ";
        for(var i in array2){
            str+=i+" ";
        }
        alert(str);
    }
    
    var array3=new Array("1",2,true);
    document.getElementById("btn3").onclick=function(){
        var str="array3[3] : ";
        for(var i=0;i<array3.length;i++){
            str+=typeof(array3[i])+" ";
        }
        alert(str);
    }
  </script>
</body>
</html>

效果演示：

2. 数组对象的属性

① constructor：返回对象的函数原型，也就是我们常说的构造函数。

<script type="text/javascript">
  var arr=new Array(6); 
  document.getElementById("btn1").onclick=function(){
      alert(arr.constructor);
  }
  
  function person(name,age){
      this.name=name;
      this.age=age;
  }
  var p=new person("老七",20);
  document.getElementById("btn2").onclick=function(){
      alert(p.constructor);
  }
</script>

② length：数组的长度。

③ prototype：为对象添加属性和方法。

<script type="text/javascript">
  function person(name,age){
      this.name=name;
      this.age=age;
  }
  var p=new person("老七",20);
  person.prototype.sex=null;
  p.sex="男";
  document.getElementById("btn2").onclick=function(){
      alert(p.name+" "+p.age+" "+p.sex);
  }
</script>

3.数组对象的常用方法

<script type="text/javascript">
  var array1=new Array(3);
  array1[0]=0;
  array1[1]=1;
  array1[2]=2;

  var array2=new Array(6);
  array2[0]="10";
  array2[1]="5";
  array2[2]="40";
  array2[3]="25";
  array2[4]="1000";
  array2[5]="1";
  ...
</script>

① concat ( param1 , param2 , ... ) ，连接两个或多个数组。

var concatArray=array1.concat([1,0]); //concatArray=[0.1,2,0,1] , array1=[0,1,2]

concat() 方法至少需要提供一个 param 参数。
参数 param 可以是具体的值，也可以是数组对象。
多个参数之间使用逗号, 隔开。
concat() 方法返回的是合并后的新数组，原数组保持不变。

② join ( “separator” ) ，把数组中的所有元素放入一个字符串，并用指定的分隔符隔开。

var str=array1.join("-"); //str="0-1-2"

参数 separator 可选，作为数组元素之间的之间的分隔符，默认为逗号, 。

③ push ( newElement1 , newElement2 ...)，向数组的末尾添加一个或多个元素，并返回新的长度。

var newLength=array1.push(1,0); //newLength=5,array1=[0,1,2,1,0]

newElement 参数至少有一个。
根据参数的顺序将参数依次追加到数组的尾部，无需创建新的数组。

④ pop () ，用于删除并返回数组的最后一个元素。

var array1End=array1.pop(); //array1End=2,array1=[0,1]

⑤ shift ()，用于删除并返回数组的第一个元素。

var array1Top=array1.shift(); //array1Top=0,array1=[1,2]

⑥ reverse ()，在原有数组的基础上，颠倒数组中元素的顺序，不会创建新的数组。

array1.reverse(); //array1=[2,1,0]

⑦ slice ( start , [end] ) ，从已有的数组中返回选定的元素。

var sliceElements=array1.slice(1,3);  //sliceElements=[1,2],array1=[0,1,2]

参数 start 是必需的，表示元素选取的开始位置。
参数 end 可选，表示元素选取的结束位置（不包括 end）。
当参数 end 省略时，将选取从 start 开始到数组末尾的所有元素。
当参数 end 省略时，start 允许取负数，-1 表示字符串的最后一个字符，-2 表示倒数第二个字符，其他以此类推。

⑧ sort ( [sortby] ) ，对数组中的元素进行排序。

array2.sort(); //array2=["1","10","1000","25","40","5"]

function sortStrNumber(a,b){
    return a-b;
}
array2.sort(sortStrNumber); //array2=["1","5","10","25","40","1000"]

如果调用该方法时没有使用参数，将按照字符编码的顺序进行排序。
如果想按照其他标准进行排序，就需要提供比较函数。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

⑨ splice ( index , howmany , [item1，item2...] )，在数组中添或/删除一些元素，然后返回被删除的元素。

var delElements=array2.splice(2,3,["0","0"]); //delElements=["40","25","1000"],array2=["10","5","0","0","1"]

参数 index 必需，规定添加或删除元素的位置，index 为负数时，从数组末尾向前计数，例如 -1 表示字符串的最后一个字符，-2 表示倒数第二个字符，其他以此类推。
参数 howmany 必需，表示要删除元素的数量，0 代表不删除数据。
item1，item2...可选，表示向数组中添加或替换的新元素。
该方法在原数组基础上实现，不会生成新副本。

⑩ unshift ( newElement1 , newElement2 ... ) ，向数组的开头添加一个或更多元素，并返回新的长度。

var newLength=array1.unshift(100,99); //newLength=5,array1=[100,99,0,1,2]

第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
该方法不创建新的数组，而是直接修改原有的数组。

二维数组

在 JavaScript 中，没有二维或多维数组，不能通过 new Array() 的方式来创建二维数组。

但是，因为变量是弱数据类型，数组中存放的数据可以是数值型、字符型、布尔型、对象和数组等类型。

所以，可以通过在一维数组中存放另一个数组来模拟实现二维数组。

代码示例：

<script type="text/javascript">
  var title=new Array("电影类型","电影名称","票价");
  var movies=new Array();
  movies[0]=["喜剧","《西红柿首富》","1￥"];
  movies[1]=["科幻","《猩球崛起》","2￥"];
  movies[2]=["剧情","《肖申克的救赎》","3￥"];
  
  document.write("<table border='1'>");
  document.write("<tr>");
  for(var i=0;i<title.length;i++){
      document.write("<th>"+title[i]+"</th>");
  }
  document.write("</tr>");
  
  for(var i=0;i<movies.length;i++){
      document.write("<tr>");
      for(var j=0;j<movies[i].length;j++){
          document.write("<td>"+movies[i][j]+"</td>");
      }
      document.write("</tr>");
  }
  document.write("</table>");
</script>

效果演示：