重新构建一个数组-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>

结论

现在，如果您想知道为什么我没有在这里显示 for 循环，那是因为 while 循环的移动部分较少，而且我相信它们更容易阅读。

关于数组的这篇文章就这样结束了。

以上是重新构建一个数组的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。