JavaScript 数组
为什么要使用数组？
如果您有一个项目列表（例如，汽车名称列表），将汽车存储在单个变量中可能看起来像这样：
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
但是，如果您想循环遍历这些汽车并找到特定的一个呢？如果您不是 3 辆车，而是 300 辆呢？
解决方案是数组！
一个数组可以在一个名称下保存许多值，您可以通过引用索引号来访问这些值。
创建数组
使用数组字面量是创建 JavaScript 数组最简单的方法。
语法
const 数组名称 = [项目1, 项目2, ...];
使用 const 关键字声明数组是一种常见做法。
在以下章节了解更多关于数组中使用 const 的信息：JS 数组 Const。
空格和换行不重要。一个声明可以跨多行
您也可以先创建一个数组，然后提供元素
使用 JavaScript 关键字 new
以下示例也创建了一个数组，并为其赋值
上面两个例子做的是完全相同的事情。
没有必要使用 new Array()。
为了简洁、可读性和执行速度，请使用数组字面量方法。
访问数组元素
通过引用 索引号 来访问数组元素
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
自己动手试一试 »
注意：数组索引从 0 开始。
[0] 是第一个元素。[1] 是第二个元素。
更改数组元素
此语句更改 cars 中第一个元素的值
cars[0] = "Opel";
将数组转换为字符串
JavaScript 方法 toString() 将数组转换为以逗号分隔的数组值字符串。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果
访问整个数组
使用 JavaScript，可以通过引用数组名称来访问整个数组
示例
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
自己动手试一试 »数组是对象
数组是一种特殊类型的对象。JavaScript 中的 typeof 运算符对于数组返回“object”。
但是，JavaScript 数组最好描述为数组。
数组使用数字来访问其“元素”。在此示例中，person[0] 返回 John
对象使用名称来访问其“成员”。在此示例中，person.firstName 返回 John
数组元素可以是对象
JavaScript 变量可以是对象。数组是特殊类型的对象。
因此，您可以在同一个数组中拥有不同类型的变量。
您可以在数组中包含对象。您可以在数组中包含函数。您可以在数组中包含数组
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
数组属性和方法
JavaScript 数组的真正强大之处在于其内置的数组属性和方法
cars.length // 返回元素数量
cars.sort() // 对数组进行排序
数组方法将在下一章中介绍。
length 属性
数组的 length 属性返回数组的长度（数组元素的数量）。
length 属性总是比最高数组索引大一。
访问第一个数组元素
访问最后一个数组元素
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
自己动手试一试 »
循环数组元素
一种遍历数组的方法是使用 for 循环
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
自己动手试一试 »
您还可以使用 Array.forEach() 函数
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
自己动手试一试 »
添加数组元素
向数组添加新元素最简单的方法是使用 push() 方法
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // 向 fruits 添加新元素 (Lemon)
自己动手试一试 »
也可以使用 length 属性向数组添加新元素
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // 向 fruits 添加 "Lemon"
自己动手试一试 »
警告！
添加高索引的元素可能会在数组中创建未定义的“空洞”
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // 在 fruits 中创建未定义的“空洞”
自己动手试一试 »
关联数组
许多编程语言支持带命名索引的数组。
带命名索引的数组称为关联数组（或哈希表）。
JavaScript 不支持带命名索引的数组。
在 JavaScript 中，数组总是使用数字索引。
示例
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // 将返回 3
person[0]; // 将返回 "John"
自己动手试一试 »
警告！！
如果您使用命名索引，JavaScript 会将数组重新定义为对象。
之后，一些数组方法和属性将产生不正确的结果。
示例
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // 将返回 0
person[0]; // 将返回 undefined
自己动手试一试 »
数组和对象之间的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是一种特殊的对象，带有数字索引。
何时使用数组。何时使用对象。
- JavaScript 不支持关联数组。
- 当您希望元素名称为字符串（文本）时，应使用对象。
- 当您希望元素名称为数字时，应使用数组。
JavaScript new Array()
JavaScript 有一个内置的数组构造函数 new Array()。
但您可以安全地使用 [] 代替。
这两个不同的语句都创建了一个名为 points 的新空数组
const points = new Array();
const points = [];
这两个不同的语句都创建了一个包含 6 个数字的新数组
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
自己动手试一试 »
new 关键字可能会产生一些意想不到的结果
// 创建一个包含三个元素的数组
const points = new Array(40, 100, 1);
自己动手试一试 »
// 创建一个包含两个元素的数组
const points = new Array(40, 100);
自己动手试一试 »
// 创建一个包含一个元素的数组？？？
const points = new Array(40);
自己动手试一试 »
一个常见错误
const points = [40];
与以下内容不同
const points = new Array(40);
// 创建一个包含一个元素的数组
const points = [40];
自己动手试一试 »
// 创建一个包含 40 个未定义元素的数组
const points = new Array(40);
自己动手试一试 »
如何识别数组
一个常见问题是：如何知道变量是否是数组？
问题在于 JavaScript 运算符 typeof 返回“object”
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
自己动手试一试 »
typeof 运算符返回 object，因为 JavaScript 数组是一个对象。
解决方案 1
为了解决这个问题，ECMAScript 5 (JavaScript 2009) 定义了一个新方法 Array.isArray()
Array.isArray(fruits);
自己动手试一试 »
解决方案 2
instanceof 运算符如果一个对象是由给定的构造函数创建的，则返回 true
const fruits = ["Banana", "Orange", "Apple"];
(fruits instanceof Array);
自己动手试一试 »
嵌套数组和对象
对象中的值可以是数组，数组中的值可以是对象
示例
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
}
要访问数组中的数组，请为每个数组使用 for-in 循环
示例
for (let i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
自己动手试一试 »
