二维码
搜索 ×

JavaScript 数组

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 数组

:数组是一个特殊变量，可以保存多个值 
1
const cars = ["Saab", "Volvo", "BMW"];

为什么要使用数组？

如果您有一个项目列表（例如，汽车名称列表），则存储 单个变量中的汽车可能如下所示：

1
2
3
let car1 = "Saab";  
let car2 = "Volvo";  
let car3 = "BMW";

但是，如果您想遍历汽车并找到特定的汽车怎么办？ 如果你没有 3 辆车，而是 300 辆车怎么办？

解决方案是一个数组！

数组可以在一个名称下保存多个值，您可以 通过引用索引号来访问这些值。

创建数组

使用数组文字是创建 JavaScript 数组的最简单方法。

语法：

1
const *array_name* = [*item1*, *item2*, ...];      

使用 const 关键字声明数组是一种常见的做法。

在[JS 数组常量]一章中了解有关数组的 const 的更多信息。

1
const cars = ["Saab", "Volvo", "BMW"];

空格和换行符并不重要。声明可以跨越多行：

1
2
3
4
5
const cars = [  
  "Saab",  
  "Volvo",  
  "BMW"  
];

您还可以创建一个数组，然后提供以下元素：

1
2
3
4
const cars = [];  
cars[0]= "Saab";  
cars[1]= "Volvo";  
cars[2]= "BMW";

使用 JavaScript 关键字 new

下面的示例还创建一个 Array，并为其赋值：

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

上面的两个例子完全相同。

没有必要使用new Array()。

为了简单、可读性和执行速度，请使用数组文本方法。

访问数组元素

您可以通过引用索引号来访问数组元素：

1
2
const cars = ["Saab", "Volvo", "BMW"];  
let car = cars[0];

**注意：**数组索引从 0 开始。

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

更改数组元素

此语句更改cars中第一个元素的值：

1
cars[0] = "Opel";
1
2
const cars = ["Saab", "Volvo", "BMW"];  
cars[0] = "Opel";

将数组转换为字符串

JavaScript 方法toString()将数组转换为（逗号分隔）数组值的字符串。

1
2
const fruits = ["Banana", "Orange", "Apple", "Mango"];  
document.getElementById("demo").innerHTML = fruits.toString();
:结果 
1
Banana,Orange,Apple,Mango

访问完整阵列

使用 JavaScript，可以通过引用数组名称来访问完整数组：

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

数组是对象

数组是一种特殊类型的对象。JavaScript 中的typeof运算符返回 “object” 阵 列。

但是，最好将 JavaScript 数组描述为数组。

数组使用数字来访问其“元素”。在这个 例如，person[0]返回John：

:数组 
1
const person = ["John", "Doe", 46];

对象使用名称来访问其“成员”。在此示例中，person.firstName返回 John：

:对象 
1
const person = {firstName:"John", lastName:"Doe", age:46};

数组元素可以是对象

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

因此，同一个数组中可以包含不同类型的变量。

您可以在数组中包含对象。您可以在数组中包含函数。您可以在数组中包含数组：

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

数组属性和方法

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

1
2
cars.length   // Returns the number of elements  
cars.sort()   // Sorts the array

数组方法将在下一章中介绍。

length 属性

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

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

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

访问第一个数组元素

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

访问最后一个数组元素

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

循环数组元素

循环访问数组的一种方法是使用for循环：

1
2
3
4
5
6
7
8
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()函数：

1
2
3
4
5
6
7
8
9
const fruits = ["Banana", "Orange", "Apple", "Mango"];  

let text = "<ul>";  
fruits.forEach(myFunction);  
text += "</ul>";  

function myFunction(value) {  
  text += "<li>" + value + "</li>";  
}

添加数组元素

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

1
2
const fruits = ["Banana", "Orange", "Apple"];  
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

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

1
2
const fruits = ["Banana", "Orange", "Apple"];  
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

警告！

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

1
2
const fruits = ["Banana", "Orange", "Apple"];  
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

关联数组

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

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

JavaScript 不支持带有命名索引的数组。

在 JavaScript 中，数组始终使用编号索引。

1
2
3
4
5
6
const person = [];  
person[0] = "John";  
person[1] = "Doe";  
person[2] = 46;  
person.length;    // Will return 3  
person[0];        // Will return "John"

警告！！
如果使用命名索引，JavaScript 会将数组重新定义为对象。

之后，一些数组方法和属性将产生不正确的 结果。

1
2
3
4
5
6
const person = [];  
person["firstName"] = "John";  
person["lastName"] = "Doe";  
person["age"] = 46;  
person.length;     // Will return 0  
person[0];         // Will return undefined

数组和对象之间的区别

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

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

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

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

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

JavaScript 新数组（）

JavaScript 有一个内置的数组构造函数。new Array()

但您可以放心使用。[]

这两个不同的语句都创建了一个名为 points 的新空数组：

1
2
const points = new Array();  
const points = [];

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

1
2
const points = new Array(40, 100, 1, 5, 25, 10);  
const points = [40, 100, 1, 5, 25, 10];

关键字可能会产生一些意想不到的结果：new

1
2
// Create an array with three elements:  
const points = new Array(40, 100, 1);

1
2
// Create an array with two elements:  
const points = new Array(40, 100);

1
2
// Create an array with one element ???  
const points = new Array(40);  

:常见错误 
1
const points = [40];
:不等同于 
1
2
3
4
const points = new Array(40);

// Create an array with one element:  
const points = [40];

1
2
// Create an array with 40 undefined elements:  
const points = new Array(40);  

如何识别数组

一个常见的问题是：我怎么知道变量是否是数组？

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

1
2
const fruits = ["Banana", "Orange", "Apple"];  
let type = typeof fruits;

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

解决方案 1：

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

1
Array.isArray(fruits);

解决方案 2：

如果对象是由给定的构造函数创建的，instanceof 运算符将返回 true：

1
2
3
const fruits = ["Banana", "Orange", "Apple"];  

fruits instanceof Array;

推荐教程