JavaScript数组

JavaScript数组是用来在一个变量中存储多个值.

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

让我试试

什么是数组?

数组是一个特殊变量，它可以一次保存多个值.

如果你有一个项目列表（例如，汽车名称列表），存储在单一变量的汽车可能看起来像这样:

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

但是，如果你想遍历汽车，找到一个特定的一辆？如果你有不止3辆车，而是300辆呢?

该解决方案是数组!

数组可以在单个名称下保存多个值，并且可以通过引用索引数访问值.

创建一个数组

用一个数组字面量是创建一个JavaScript数组的最简单的方法.

Syntax:

var array-name = [item1, item2, ...];

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

让我试试

空格和换行不重要。一个声明可以跨越多行:

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

让我试试

不要在最后一个元素后面加逗号（如 "BMW"）。浏览器的效果不一致.

使用JavaScript关键字new

下面的示例也创建了一个数组，并给它赋值:

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

让我试试

上面的两个例子完全一样。没有必要用 new Array()。对于简单性、可读性和执行速度，请使用第一中方法（数组字面量方法）.

访问数组元素

通过索引号来引用数组元素。.

此语句访问cars中第一个元素的值:

var name = cars[0];

这个语句修改了cars中的第一个元素:

cars[0] = "Opel";

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

让我试试

[0] 是数组中的第一个元素。[1]是第二。数组索引以0开头.

访问完整数组

使用JavaScript，通过数组名称访问整个数组：

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

让我试试

数组是对象

数组是一种特殊类型的对象. typeof 操作符用于数组返回"object".

但是，JavaScript数组最好描述为数组.

数组使用数字访问其“元素”。在这个例子中，person[0]返回"John":

var person = ["John", "Doe", 46];

让我试试

对象使用名称访问其“成员”。在这个例子中，person.firstname返回"John":

var person = {firstName:"John", lastName:"Doe", age:46};

让我试试

数组元素可以是对象

JavaScript变量可以是对象。数组是特殊类型的对象.

因此，可以在同一数组中拥有不同类型的变量.

可以在数组中拥有对象。你可以在数组中有函数。可以在数组中有数组:

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

数组属性和方法

JavaScript数组真正强大的是有内置的属性和方法:

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

数组方法在下一章讲述.

length 属性

length 属性返回数组的长度（数组元素的个数）.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4

让我试试

length 属性始终比最高数组索引高一个.

循环数组元素

循环数组的最佳方法是使用"for"循环:

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}

让我试试

增加数组元素

向数组中添加新元素的最简单方法是使用push方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits

让我试试

还可以使用lenght属性将新元素添加到数组中:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits

让我试试

警告 ! 添加高索引元素会在数组中创建一个undefined的“洞”:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // adds a new element (Lemon) to fruits

让我试试

关联数组

许多编程语言支持具有命名索引的数组.

数组使用命名的索引被称为关联数组(或者哈希)

JavaScript不支持数组命名索引.

在JavaScript中，数组通常用数字索引.

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"

让我试试

警告 !! 如果你使用一个命名索引，JavaScript将重新定义数组对象的标准。之后，所有的数组方法和属性将产生不正确的结果.

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

让我试试

数组与对象的区别

在JavaScript中，数组使用编号索引.

在JavaScript中，对象使用命名的索引.

数组是一种特殊的对象，具有编号索引。

何时使用数组。何时使用对象。

JavaScript 不支持关联数组。
当您希望元素名称为字符串（文本）时，您应该使用对象。
当您希望元素名称为数字时，您应该使用数组.

避免 new Array()

不需要使用JavaScript内置数组构造函数 new Array().

使用 [] 代替.

这两个不同的语句都创建一个新的空数组命名为:

var points = new Array();         // Bad
var points = [];                  // Good

这两个不同的语句都创建一个包含6个数的新数组:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good

让我试试

new关键字只会使代码复杂化。它也可以产生一些意想不到的结果:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

如果我移除其中一个元素?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

让我试试

如何识别数组

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

问题是，JavaScript运算符typeof返回 "object":

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

typeof fruits;             // returns object

让我试试

typeof 操作符返回对象因为JavaScript数组是一个对象.

方案 1:

为了解决这个问题，ECMAScript 5定义了一种新的方法Array.isArray()。

Array.isArray(fruits);     // returns true

让我试试

这种方法的问题是，ECMAScript 5不支持老的浏览器.

方案 2: 为了解决这个问题，你可以创建你自己的isArray()函数:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

让我试试

如果参数是数组，上述函数总是返回true.

或者更精确地说：如果对象原型包含“Array”这个词，它就会返回true。.

方案 3: 如果一个对象是由一个给定的构造函数创建，instanceof运算符返回true:

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

fruits instanceof Array     // returns true

让我试试