前端必知必会-JavaScript 数组属性和方法

---

数组属性和方法

JavaScript 数组的真正优势在于内置的数组属性和方法：

cars.length // 返回元素数量
cars.sort() // 对数组进行排序

length 属性

数组的 length 属性返回数组的长度（数组元素的数量）。

示例

const fruit = ["Banana", "Orange", "Apple", "Mango"];
let length = fruit.length;

length 属性始终比最高数组索引多一。

访问第一个数组元素
示例

const fruit = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruit[0];

访问最后一个数组元素
示例

const fruit = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruit[fruits.length - 1];

循环数组元素

循环数组的一种方法是使用 for 循环：
示例

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

您还可以使用 Array.forEach() 函数：

示例

const fruit = ["Banana", "Orange", "Apple", "Mango"];let text = "<ul>";
fruit.forEach(myFunction);
text += "</ul>";function myFunction(value) {
text += "<li>" + value + "</li>";
}

添加数组元素

向数组添加新元素的最简单方法是使用 push() 方法：

示例

const fruit = ["Banana", "Orange", "Apple"];
fruit.push("Lemon"); // 向 fruit 添加新元素 (Lemon)

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

示例

const fruit = ["Banana", "Orange", "Apple"];
fruit[fruits.length] = "Lemon"; // 在水果中添加“柠檬”

警告！

添加具有高索引的元素可能会在数组中创建未定义的“洞”：

示例

const fruit = ["Banana", "Orange", "Apple"];
fruit[6] = "Lemon"; // 在水果中创建未定义的“洞”

关联数组

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

具有命名索引的数组称为关联数组（或哈希）。

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 fruit = ["Banana", "Orange", "Apple"];
let type = typeof fruit;

typeof 运算符返回 object，因为 JavaScript 数组是对象。

解决方案 1：
为了解决这个问题，ECMAScript 5（JavaScript 2009）定义了一个新方法 Array.isArray()：

Array.isArray(fruits);

解决方案 2：
如果对象是由给定的构造函数创建的，则 instanceof 运算符返回 true：

const fruit = ["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];
}
}

---

总结

本文介绍了JavaScript 数组属性和方法的使用，如有问题欢迎私信和评论