码农笔记网 - 教程内容页 - Javascript 中文手册

JavaScript中的数组是一种全局对象，用于在单个变量中存储多个值。

数组可以包含任何数据类型，包括字符串，数字，对象，函数，甚至其他数组。

假设您要在JavaScript代码中存储城市名称。将城市名称一一存储在变量中可能看起来像这样：

  let city1 = "New Delhi";
  let city2 = "Mumbai";
  let city3 = "Jaipur";

但是，如果您需要将一个国家的城市名称存储在变量中，那么这会发生的不仅仅是三个，可能会是一百个。

同时使用这么多变量并跟踪所有变量将是非常困难的任务。

数组通过提供用于在单个变量中存储多个值或一组值的有序结构来解决此问题。

创建数组

有两种方法可以在JavaScript中创建数组：

字面量-隐式创建，其使用方括号：[]
简洁方式-直接示例化，采用new关键字

让我们演示如何使用初始化的数组常量创建fruits数组[]：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];

声明可以跨越多行：

示例

let fruits = [
  "Apple",
  "Mango",
  "Banana",
  "Orange"
];

现在这是使用数组构造函数创建的相同数据，该数据用初始化new Array()：

示例

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

这两种方法都会创建一个数组。但是，字面量-隐式创建（方括号[]）方法更为常见和首选，因为new Array()构造函数方法可能会出现不一致和意外的结果。

数组索引

数组没有名称/值对。而是使用从0开始的整数值对它们进行索引。

这是赋值给fruits的示例数组：

  let fruits = ["Apple", "Mango", "Banana", "Orange"];

这是fruits数组中每个元素的索引方式的分解：

0	1	2	3
Apple	Mango	Banana	Orange

数组中的第一个元素是“ Apple”，索引值为0。

最后一个元素是“Orange”，索引值为3。

访问数组中的元素

通过引用方括号中的元素的索引号，可以访问JavaScript数组中的元素。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];

fruits[0];// 返回 "Apple"
fruits[2];// 返回 "Banana"

JavaScript数组的索引为零：数组的第一个元素的索引为0，第二个元素的索引为1，依此类推。

尝试访问数组中不存在的元素，将返回undefined。

示例

fruits[7];// 返回 undefined

可以通过引用阵列名称来访问整个阵列。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

数组 length 属性

我们可以使用该length属性找出数组中有多少个元素。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;   // 返回 4

最后一个元素的索引等于数组的length属性值减去1。

此示例使用length属性显示最后一个元素的值：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];

let lastIndex = fruits.length - 1;
fruits[lastIndex];

向数组中添加元素

在fruits变量中，我们有四个元素，其中包括从0到3的索引。如果要向数组添加新元素，可以为下一个索引分配值。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

如果我们添加一个元素并意外地跳过一个索引，它将在数组中创建值为空('')的元素。

示例

fruits[6] = "Strawberry";

使用push()方法可以避免类似的问题，该方法将一个元素添加到数组的末尾。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

也可以使用length属性将新元素添加到数组。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length] = "Beer";

修改数组中的元素

通过使用赋值运算符分配新值，我们可以覆盖数组中的任何值。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

数组通常用于将相似数据类型的列表组合在一起，但是从技术上讲，它们可以包含任何值或值的混合。

示例

let myArray = [5, 22, "Arrow", "Bone", true, new Date()];

遍历数组

我们可以利用for和length属性来循环遍历整个数组。

在此示例中，我们创建一个水果数组，并将每个索引号以及每个值打印到文档中：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";

//遍历数组的长度
for (let i = 0; i < fruits.length; i++) {
txt += i + " = " + fruits[i] + "<br>";
}

我们还可以使用以下Array.forEach()方法：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");

fruits.forEach(function(element) {
result.innerHTML += element + "<br>";
});

我们还可以使用for...of循环来遍历js数组，这是JavaScript的新功能：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");

for (let x of fruits) {
result.innerHTML += x;
}

for...of循环不检索数组中元素的索引号，但它通常是一种更简单、更简洁的遍历数组的方法。

多维数组

多维数组是包含一个或多个数组的数组。

  let points = [
   [35, 28, 29, 31],
   [33, 24, 25, 29]
  ];

JavaScript可以理解深度为2、3、4、5或更多级别的多维数组。但是，对于大多数人而言，难以管理超过三个级别的阵列。

数组的维数指示选择元素所需的索引数：

对于二维数组，您需要两个索引来选择元素
对于三维数组，您需要三个索引来选择元素

二维数组可以看作是一个表，其中第一个[ ]是行，第二个[ ]是列。

示例

points[0][1];   // 返回 28
points[1][0];   // 返回 33

在此示例中，我们创建一个二维数组，并将每个索引号以及每个值打印到文档中：

示例

let points = [ [35, 28, 29, 31], [33, 24, 25, 29] ];

let row;
let col;

for (row = 0; row < 2; row++) {
   for (col = 0; col < 4; col++) {
  document.write(row, col, points[row][col]);
   }
}

当然,您也可以使用length属性获取行和列的大小：

示例

let points = [
   [10, 12, 14, 16, 18],
   [20, 22, 24, 26],
   [30, 32, 34],
   [32, 34]
];

points.length;// 返回 4 (Total rows)
points[0].length;// 返回 5
points[1].length;// 返回 4
points[2].length;// 返回 3
points[3].length;// 返回 2

大多数情况下，2维数组就足够了，尽管有些地方可以使用3维数组。

JavaScript数组是对象

在JavaScript中，数组是一种特殊的对象。

typeofJavaScript中的运算符为数组返回“Object”。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;   // 返回 "object"

尽量避免使用new Array()

无需使用数组构造函数new Array()。

相反，应该尽量使用隐式创建的方式创建数组，也就是，直接使用方括号[]方法，这种方法更常见，也更受欢迎。

以下两个不同的语句创建一个名为scores的新的空数组：

  let scores = new Array();  // 不建议这种方法
  let scores = [];     // 推荐方式

以下两个不同的语句创建一个包含5个数字的新数组：

示例

let scores = new Array(2, 5, 10, 28, 10); // 不建议这种方法
let scores = [2, 5, 10, 28, 10];  // 推荐方式

new Array()构造方法可能有不一致之处，也可以产生一些意想不到的结果：

示例

let scores = new Array(10, 25);  // 创建一个包含两个元素(10和25)的数组
let scores = new Array(10);  // 创建一个包含10个未定义元素值的数组

如何判断变量是否为数组 - Array.isArray()

如您所知，JavaScript typeof运算符为数组返回“Object”。

一个常见的问题是：如何知道变量是否为数组？

为了解决此问题，ECMAScript 5定义了一种新方法Array.isArray()：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

如果对象是由给定的构造函数创建的，那么还可以使用instanceof操作符返回true：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];

if (fruits instanceof Array) {
   // statements to execute
}

将数组传递给函数

在下面的示例中，我们将数组传递给函数：

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);

function myFunc(arg) {
  for (let elem of arg) {
  document.write(elem, "<br>");
  }
}

从函数返回数组

在下面的示例中，我们将从函数返回一个数组：

示例

function myFunc() {
  let fruits = ["Apple", "Mango", "Banana", "Orange"];
  return fruits;
}

let myArray = myFunc();
document.write(myArray);

列表

JavaScript Array(数组) 对象