重新构建一个数组-js教程-PHP中文网

数组对象实例属性和方法

创建数组

添加和更新数组中的值

长度与索引

设置数组长度可以添加或删除值

包含其他数组的数组（又名多维数组）

前后循环数组

结论

首页

web前端

js教程

重新构建一个数组

PHPz

Sep 03, 2023 am 08:37 AM

数组构建重新构建数组重组

重新构建一个数组

数组是一个有序的值列表，通常是为了循环遍历数字索引值而创建的，从索引零开始。您需要知道的是，数组是按数字顺序排列的集合，而不是具有与非数字顺序的值关联的属性名称的对象。本质上，数组使用数字作为查找键，而对象则具有用户定义的属性名称。 JavaScript 没有真正的关联数组，但可以使用对象来实现关联数组的功能。

在下面的示例中，我将四个字符串存储在 myArray 中，我可以使用数字索引访问它们。我将 myArray 与模仿关联数组的对象文字进行比较和对比。

示例：sample133.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	console.log(myArray[0]); // Logs blue using the 0 index to access the string in myArray.

	// Versus

	var myObject = { // aka an associative array/hash, known as an object in JavaScript.
		'blue': 'blue',
		'green': 'green',
		'orange': 'orange',
		'red': 'red'
	};

	console.log(myObject['blue']); // Logs blue.

</script></body></html>

登录后复制

数组可以保存任何类型的值，并且这些值可以随时更新或删除。

如果您需要哈希（也称为关联数组），对象是最接近的解决方案。

Array() 只是 Object() 的一种特殊类型。也就是说， Array() 实例基本上是 Object() 实例，带有几个额外的函数（.length 和内置数字索引）。

数组中包含的值通常称为元素。

`Array()` 参数

您可以将数组实例的值作为逗号分隔的参数传递给构造函数 (new Array('foo', 'bar');)。 new Array('foo', 'bar');)。 Array() 构造函数最多可以使用 4,294,967,295 个参数。

但是，如果只有一个参数发送到 Array() 构造函数，并且该值为整数（'1'、'123' 或 '1.0'），则它将用于设置 数组的length 构造函数，并且该值为整数（'1'、'123' 或 '1.0'），则它将用于设置 数组的length，并且不会用作数组中包含的值。

示例：sample134.html

<!DOCTYPE html><html lang="en"><body><script>

	var foo = new Array(1, 2, 3);
	var bar = new Array(100);

	console.log(foo[0], foo[2]); // Logs '1 3'.
	console.log(bar[0], bar.length); // Logs 'undefined 100'.

</script></body></html>

登录后复制

`Array()` 属性和方法

Array() 对象具有以下属性（不包括继承的属性和方法）：

属性（Array.prototype）：

原型

数组对象实例属性和方法

数组对象实例具有以下属性和方法（不包括继承的属性和方法）：

实例属性 (var myArray = ['foo', 'bar']; myArray.length;):

构造函数
长度

实例方法 (var myArray = ['foo']; myArray.pop();):

pop()
push()
反向()
shift()
sort()
splice()
unshift()
concat()
join()
slice()

创建数组

与 JavaScript 中的大多数对象一样，可以使用 new 运算符结合 new 运算符结合 Array() 构造函数或使用文字语法来创建数组对象。

在以下示例中，我使用 Array() 构造函数创建具有预定义值的 myArray1 数组，然后使用文字表示法创建 myArray2 构造函数创建具有预定义值的 myArray1 数组，然后使用文字表示法创建 myArray2。

示例：sample135.html

<!DOCTYPE html><html lang="en"><body><script>

	// Array() constructor.
	var myArray1 = new Array('blue', 'green', 'orange', 'red');

	console.log(myArray1); // Logs ["blue", "green", "orange", "red"]

	// Array literal notation.
	var myArray2 = ['blue', 'green', 'orange', 'red'];

	console.log(myArray2); // logs ["blue", "green", "orange", "red"]

</script></body></html>

登录后复制

更常见的是使用文字语法定义数组，但应该注意的是，这个快捷方式只是隐藏了 Array() 构造函数的使用。

实际上，数组文字通常就是您所需要的。

无论数组是如何定义的，如果您没有向数组提供任何预定义值，它仍然会被创建，但不会包含任何值。

添加和更新数组中的值

可以随时将值添加到数组的任何索引处。在下面的示例中，我们向空数组的数字索引 50 添加一个值。 50之前的所有指数呢？嗯，就像我说的，您可以随时在任何索引处向数组添加值。但是，如果您向空数组的数字索引 50 添加一个值，JavaScript 将使用 undefined 值填充其之前的所有必要索引。

示例：sample136.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [];
	myArray[50] = 'blue';
	console.log(myArray.length); /* Logs 51 (0 is counted) because JS created values 0 to 50 before "blue".*/

</script></body></html>

登录后复制

此外，考虑到 JavaScript 的动态特性以及 JavaScript 不是强类型的事实，数组值可以随时更新，索引中包含的值可以是任何合法值。在下面的示例中，我将数字索引 50 处的值更改为一个对象。

示例：sample137.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [];
	myArray[50] = 'blue';
	myArray[50] = { 'color': 'blue' }; // Change object type from string to Object() object.
	console.log(myArray[50]); // Logs 'Object {color="blue"}'.

	// Using brackets to access the index in the array, then the property blue.
	console.log(myArray[50]['color']); // Logs 'blue'.

	// Using dot notation.
	console.log(myArray[50].color); // Logs 'blue'.

</script></body></html>

登录后复制

长度与索引

数组从零开始索引值。这意味着数组中保存值的第一个数字槽看起来像 myArray[0]。这可能有点令人困惑，如果我创建一个包含单个值的数组，该值的索引为 0，而数组的长度为 1。请确保您了解数组的长度表示数组中包含的值的数量，而数组的数字索引从零开始。

在以下示例中，字符串值 blue 包含在 myArray 数组中的数字索引 0 处，但由于该数组包含一个值，因此该数组的长度为 1。

示例：sample138.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue'] // The index 0 contains the string value 'blue'.
	console.log(myArray[0]); // Logs 'blue'.
	console.log(myArray.length); // Logs 1.

</script></body></html>

登录后复制

使用预定义的 `length` 定义数组

正如我之前提到的，通过将单个整数参数传递给 Array() 构造函数，可以预定义数组长度或其将包含的值的数量。在这种情况下，构造函数会抛出一个异常，并假设您要设置数组的长度，而不是用值预先填充数组。

在下一个示例中，我们设置了预定义长度为 3 的 myArray 数组。同样，我们配置数组的长度，而不是向其传递要存储在 0 索引处的值。

示例：sample139.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = new Array(3);
	console.log(myArray.length); // Logs 3 because we are passing one numeric parameter.
	console.log(myArray[0]); // Logs undefined.

</script></body></html>

登录后复制

提供预定义的 length 将为每个数字索引（最多指定的长度）提供 undefined 的关联值。

您可能想知道是否可以创建一个仅包含一个数值的预定义数组。是的，它是通过使用文字形式 var myArray = [4].

设置数组长度可以添加或删除值

数组对象的 length 属性可用于获取或设置数组的长度。如前所示，设置长度大于数组中包含的实际值数会将 undefined 值添加到数组中。您可能没想到的是，您实际上可以通过将长度值设置为小于数组中包含的值的数量来从数组中删除值。

示例：sample140.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];
	console.log(myArray.length); // Logs 4.
	myArray.length = 99;
	console.log(myArray.length); // Logs 99, remember we set the length, not an index.
	myArray.length = 1; // Removed all but one value, so index [1] is gone!
	console.log(myArray[1]); // Logs undefined.

	console.log(myArray); // Logs '["blue"]'.

</script></body></html>

登录后复制

包含其他数组的数组（又名多维数组）

由于数组可以保存任何有效的 JavaScript 值，因此数组可以包含其他数组。完成此操作后，包含封装数组的数组将被视为多维数组。访问封装的数组是通过括号链接完成的。在下面的示例中，我们创建一个包含一个数组的数组文字，在其中创建另一个数组文字，在其中创建另一个数组文字，其中包含索引 0 处的字符串值。

示例：sample141.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [[[['4th dimension']]]];
	console.log(myArray[0][0][0][0]); // Logs '4th dimension'.

</script></body></html>

登录后复制

这个代码示例相当愚蠢，但您会明白数组可以包含其他数组，并且您可以无限期地访问封装的数组。

前后循环数组

循环数组的最简单且可以说是最快的方法是使用 while 循环。

在下面的代码中，我们从索引的开头循环到结尾。

示例：sample142.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	var myArrayLength = myArray.length; // Cache array length to avoid unnecessary lookup.
	var counter = 0; // Set up counter.

	while (counter < myArrayLength) { // Run if counter is less than array length.
		console.log(myArray[counter]); // Logs 'blue', 'green', 'orange', 'red'.
		counter++; // Add 1 to the counter.
	}

</script></body></html>

登录后复制

现在我们从索引末尾循环到开头。

示例：sample143.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['blue', 'green', 'orange', 'red'];

	var myArrayLength = myArray.length;
	while (myArrayLength--) {                // If length is not zero, loop and subtract 1.
		console.log(myArray[myArrayLength]);  // Logs 'red', 'orange', 'green', 'blue'.
	}

</script></body></html>

登录后复制