JavaScript Array（数组） 对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

在线实例

创建数组, 为其赋值：

<script>
  var i;
  var mycars = new Array();
  mycars[0] = "Saab";
  mycars[1] = "Volvo";
  mycars[2] = "BMW";
  for (i = 0; i < mycars.length; i++) {
    document.write(mycars[i] + "<br>");
  }
</script>

尝试一下 »

页面底部你可以找到更多的实例。

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据（例如：车名字），存在单独变量如下所示：

var
  car1 = "Saab";
var
  car2 = "Volvo";
var
  car3 = "BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars = new Array();
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";

2: 简洁方式:

var myCars = new Array("Saab", "Volvo", "BMW");

3: 字面:

var myCars = ["Saab", "Volvo", "BMW"];

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

var
  name = myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0] = "Opel";


[0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

数组方法和属性

使用数组对象预定义属性和方法：

var x = myCars.length
// myCars 中元素的数量
var y = myCars.indexOf("Volvo") // "Volvo" 值的索引值

完整的数组对象参考手册

你可以参考本站关于数组的所有属性和方法的完整参考手册。

参考手册包含了所有属性和方法的描述（和更多的例子）。

完整数组对象参考手册

创建新方法

原型是JavaScript全局构造函数。它可以构建新JavaScript对象的属性和方法。

<p id="demo">单击按钮创建一个数组,调用 ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
  Array.prototype.myUcase = function() {
    for (i = 0; i < this.length; i++) {
      this[i] = this[i].toUpperCase();
    }
  }

  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。

更多实例

合并两个数组 - concat()

<script>
  var hege = ["Cecilie", "Lone"];
  var stale = ["Emil", "Tobias", "Linus"];
  var kai = ["Robin"];
  var children = hege.concat(stale, kai);
  document.write(children);
</script>

尝试一下 »

合并三个数组 - concat()

<script>
  var parents = ["Jani", "Tove"];
  var brothers = ["Stale", "Kai Jim", "Borge"];
  var children = ["Cecilie", "Lone"];
  var family = parents.concat(brothers, children);
  document.write(family);
</script>

尝试一下 »

用数组的元素组成字符串 - join()

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = document.getElementById("demo");
    x.innerHTML = fruits.join();
  }
</script>

尝试一下 »

删除数组的最后一个元素 - pop()

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];

  function myFunction() {
    fruits.pop();
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

数组的末尾添加新的元素 - push()

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];

  function myFunction() {
    fruits.push("Kiwi")
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

将一个数组中的元素的顺序反转排序 - reverse()

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];

  function myFunction() {
    fruits.reverse();
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

删除数组的第一个元素 - shift()

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];

  function myFunction() {
    var delell = fruits.shift();
    var x = document.getElementById("demo");
    x.innerHTML = '删除后数组为：' + fruits;
    document.getElementById("demo2").innerHTML = '删除的元素是：' + delell;
  }
</script>

尝试一下 »

从一个数组中选择元素 - slice()

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1, 3);
    var x = document.getElementById("demo");
    x.innerHTML = citrus;
  }
</script>

尝试一下 »

数组排序（按字母顺序升序）- sort()

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

数字排序（按数字顺序升序）- sort()

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b) {
      return a - b
    });
    var x = document.getElementById("demo");
    x.innerHTML = points;
  }
</script>

尝试一下 »

数字排序（按数字顺序降序）- sort()

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b) {
      return b - a
    });
    var x = document.getElementById("demo");
    x.innerHTML = points;
  }
</script>

尝试一下 »

在数组的第2位置添加一个元素 - splice()

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2, 0, "Lemon", "Kiwi");
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>

尝试一下 »

转换数组到字符串 -toString()

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var str = fruits.toString();
    var x = document.getElementById("demo");
    x.innerHTML = str;
  }
</script>

尝试一下 »

在数组的开头添加新元素 - unshift()

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.unshift("Lemon", "Pineapple");
    var x = document.getElementById("demo");
    x.innerHTML = fruits;
  }
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>

尝试一下 »