Heim > Web-Frontend > js-Tutorial > Hauptteil

Rekonstruieren Sie ein Array

PHPz
Freigeben: 2023-09-03 08:37:11
Original
671 Leute haben es durchsucht

Rekonstruieren Sie ein Array

Ein Array ist eine geordnete Liste von Werten, die normalerweise für die Schleife über numerisch indizierte Werte erstellt wird, beginnend bei Index Null. Sie müssen wissen, dass ein Array eine Sammlung in numerischer Reihenfolge ist und kein Objekt mit Eigenschaftsnamen, die mit Werten verknüpft sind, die nicht in numerischer Reihenfolge vorliegen. Im Wesentlichen verwenden Arrays Zahlen als Suchschlüssel, während Objekte benutzerdefinierte Eigenschaftsnamen haben. JavaScript verfügt nicht über ein echtes assoziatives Array, Sie können jedoch Objekte verwenden, um die Funktionalität eines assoziativen Arrays zu implementieren.

Im folgenden Beispiel vergleiche und kontrastiere ich vier in myArray 中,我可以使用数字索引访问它们。我将 myArray gespeicherte Zeichenfolgen mit Objektliteralen, die assoziative Arrays nachahmen.

Beispiel: 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>
Nach dem Login kopieren

Arrays können Werte jeglicher Art enthalten und diese Werte können jederzeit aktualisiert oder gelöscht werden.

Wenn Sie Hashes (auch assoziative Arrays genannt) benötigen, sind Objekte die beste Lösung.

Array() 只是 Object() 的一种特殊类型。也就是说, Array() 实例基本上是 Object() 实例,带有几个额外的函数(.length und eingebauter numerischer Index).

Die in einem Array enthaltenen Werte werden normalerweise als Elemente bezeichnet.


Array() Parameter

Sie können den Wert einer Array-Instanz als durch Kommas getrennte Argumente an den Konstruktor übergeben (new Array('foo', 'bar');). new Array('foo', 'bar');)。 Array() Ein Konstruktor kann bis zu 4.294.967.295 Parameter annehmen.

Wenn jedoch nur ein Argument an den Konstruktor Array() 构造函数,并且该值为整数('1'、'123' 或 '1.0'),则它将用于设置 数组的length gesendet wird und dieser Wert eine Ganzzahl ('1', '123' oder '1.0') ist, wird es zum Festlegen der Länge des Arrays und des Willens verwendet nicht als im Array enthaltener Wert verwendet werden.

Beispiel: 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>
Nach dem Login kopieren

Array() Eigenschaften und Methoden

Array() Das Objekt verfügt über die folgenden Eigenschaften (ausgenommen geerbte Eigenschaften und Methoden):

Eigenschaften (Array.prototype):

  • 原型

Array-Objektinstanzeigenschaften und -methoden

Array-Objektinstanzen verfügen über die folgenden Eigenschaften und Methoden (ausgenommen geerbte Eigenschaften und Methoden):

Instanzeigenschaften (var myArray = ['foo', 'bar']; myArray.length;):

  • 构造函数
  • 长度

Instanzmethoden (var myArray = ['foo']; myArray.pop();):

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

Array erstellen

Wie die meisten Objekte in JavaScript können Array-Objekte mithilfe des new-Operators in Verbindung mit new 运算符结合 Array()-Konstruktoren oder mithilfe der Literalsyntax erstellt werden.

Im folgenden Beispiel verwende ich den Konstruktor Array() 构造函数创建具有预定义值的 myArray1 数组,然后使用文字表示法创建 myArray2, um ein Array von myArray1 mit vordefinierten Werten zu erstellen, und verwende dann die Literalnotation, um myArray2 zu erstellen.

Beispiel: 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>
Nach dem Login kopieren

Es ist üblicher, Arrays mithilfe der Literalsyntax zu definieren, es ist jedoch zu beachten, dass diese Verknüpfung lediglich die Verwendung des Konstruktors Array() verbirgt.

Tatsächlich ist ein Array-Literal normalerweise alles, was Sie brauchen.

Egal wie das Array definiert ist: Wenn Sie dem Array keine vordefinierten Werte bereitstellen, wird es trotzdem erstellt, enthält jedoch keine Werte.


Werte in Arrays hinzufügen und aktualisieren

Ein Wert kann jederzeit und an jedem Index zu einem Array hinzugefügt werden. Im folgenden Beispiel fügen wir einen Wert zum numerischen Index 50 eines leeren Arrays hinzu. Was ist mit allen Indizes vor 50? Nun, wie gesagt, Sie können einem Array jederzeit und an jedem Index einen Wert hinzufügen. Wenn Sie jedoch einen Wert zum numerischen Index 50 eines leeren Arrays hinzufügen, füllt JavaScript alle erforderlichen Indizes davor mit undefined-Werten.

Beispiel: 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>
Nach dem Login kopieren

Angesichts der dynamischen Natur von JavaScript und der Tatsache, dass JavaScript nicht stark typisiert ist, können Array-Werte jederzeit aktualisiert werden und die im Index enthaltenen Werte können beliebige zulässige Werte sein. Im folgenden Beispiel ändere ich den Wert am numerischen Index 50 in ein Objekt.

Beispiel: 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>
Nach dem Login kopieren

Länge und Index

Arrays Indexwerte beginnend bei Null. Das bedeutet, dass der erste Zahlenplatz im Array, der den Wert enthält, wie folgt aussieht: myArray[0]. Das kann etwas verwirrend sein, wenn ich ein Array erstelle, das einen einzelnen Wert enthält, der Index des Werts 0 und die Länge des Arrays 1 ist. Stellen Sie sicher, dass Sie verstehen, dass die Länge eines Arrays die Anzahl der im Array enthaltenen Werte darstellt und dass die numerische Indizierung von Arrays bei Null beginnt.

Im folgenden Beispiel befindet sich der Zeichenfolgenwert blue 包含在 myArray am Zahlenindex 0 im Array, aber da das Array einen Wert enthält, beträgt die Länge des Arrays 1.

Beispiel: 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>
Nach dem Login kopieren

使用预定义的 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>
Nach dem Login kopieren

提供预定义的 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>
Nach dem Login kopieren

包含其他数组的数组(又名多维数组)

由于数组可以保存任何有效的 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>
Nach dem Login kopieren

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


前后循环数组

循环数组的最简单且可以说是最快的方法是使用 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>
Nach dem Login kopieren

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

示例: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>
Nach dem Login kopieren

结论

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

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

Das obige ist der detaillierte Inhalt vonRekonstruieren Sie ein Array. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage