JavaScript-Array-Methoden: Mit Beispiel erstellen

Anonim

Was ist ein Array?

Ein Array ist ein Objekt, das eine Sammlung von Elementen speichern kann . Arrays sind sehr nützlich, wenn Sie große Datenmengen desselben Typs speichern müssen. Angenommen, Sie möchten Details von 500 Mitarbeitern speichern. Wenn Sie Variablen verwenden, müssen Sie 500 Variablen erstellen, während Sie dasselbe mit einem einzelnen Array tun können. Sie können auf die Elemente in einem Array zugreifen, indem Sie auf dessen Indexnummer verweisen. Der Index des ersten Elements eines Arrays ist Null.

JavaScript Array erstellen

Sie können ein Array in JavaScript wie unten angegeben erstellen.

var students = ["John", "Ann", "Kevin"];

Hier initialisieren Sie Ihr Array, sobald es mit den Werten "John", "Ann" und "Kevin" erstellt wird. Der Index von "John", "Ann" und "Kevin" ist 0, 1 bzw. 2. Wenn Sie dem Schülerarray weitere Elemente hinzufügen möchten, können Sie dies folgendermaßen tun:

students[3] = "Emma";students[4] = "Rose";

Sie können ein Array auch mit dem Array-Konstruktor wie folgt erstellen:

var students = new Array("John", "Ann", "Kevin");

ODER

var students = new Array();students[0] = "John";students[1] = "Ann";students[2] = "Kevin";

JavaScript-Array-Methoden

Das Array-Objekt verfügt über viele Eigenschaften und Methoden, mit denen Entwickler Arrays einfach und effizient handhaben können. Sie können den Wert einer Eigenschaft durch Angabe von arrayname.property und die Ausgabe einer Methode durch Angabe von arrayname.method () abrufen.

  1. Länge-Eigenschaft -> Wenn Sie die Anzahl der Elemente in einem Array wissen möchten, können Sie die Länge-Eigenschaft verwenden.
  2. Prototyp-Eigenschaft -> Wenn Sie neue Eigenschaften und Methoden hinzufügen möchten, können Sie die Prototyp-Eigenschaft verwenden.
  3. umgekehrte Methode -> Sie können die Reihenfolge der Elemente in einem Array mit einer umgekehrten Methode umkehren.
  4. Sortiermethode -> Sie können die Elemente in einem Array mithilfe der Sortiermethode sortieren.
  5. Pop-Methode -> Sie können das letzte Element eines Arrays mit einer Pop-Methode entfernen.
  6. Verschiebungsmethode -> Sie können das erste Element eines Arrays mithilfe der Verschiebungsmethode entfernen.
  7. Push-Methode -> Sie können einen Wert als letztes Element des Arrays hinzufügen.

Versuchen Sie dies selbst:

 Arrays !!! </ title><script type = "text />var Studenten = neues Array ("John", "Ann", "Aaron", "Edwin", "Elizabeth");Array.prototype.displayItems = function () {für (i = 0; i <this.length; i ++) {document.write (this [i] + "<br />");}}}}document.write ("Studentenarray<br />");students.displayItems ();document.write ("<br />Die Anzahl der Elemente im Schülerarray beträgt" + students.length + "<br />");document.write ("<br />Das SORTED-Studentenarray<br />");Studenten.Sort ();students.displayItems ();document.write ("<br />Das REVERSED-Studentenarray<br />");Studenten.umkehren ();students.displayItems ();document.write ("<br />DAS Schülerarray nach dem ENTFERNEN DES LETZTEN Elements<br />");Studenten.pop ();students.displayItems ();document.write ("<br />DAS Schülerarray nach PUSH<br />");students.push ("New Stuff");students.displayItems ();</ script></ head><body></ body></ html></pre> <form class="hidden" code-box" name="sample"> Dieser Code kann bearbeitet werden. Klicken Sie zum Ausführen auf Ausführen<textarea name="codeguru"> </textarea>
<p><input type="submit" value="Lauf" style="background-color:#df5035;" color:#ffffff;"></p>
										</div>
									</article>
									
<div id="container-5533149ee6411a5f99b370c693e87966"></div>								</div>
							</div>
						</div>
					</div>
				</div>
				
<aside class="col-lg-4 sidebar sidebar--right">
	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Beliebte Beiträge</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8224722-palindrome-program-in-java-check-number-is-palindrome-or-not" title="Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht" rel="bookmark"><img src="https://cdn.css-code.org/7807096/palindrome_program_in_java_check_number_is_palindrome_or_not.png.webp" loading="lazy" alt="Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht" title="Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8224722-palindrome-program-in-java-check-number-is-palindrome-or-not" title="Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht" rel="bookmark">Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8224723-bubble-sort-program-in-java-sorting-algorithm-example" title="Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL" rel="bookmark"><img src="https://cdn.css-code.org/3652135/bubble_sort_program_in_java_sorting_algorithm_example.png.webp" loading="lazy" alt="Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL" title="Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8224723-bubble-sort-program-in-java-sorting-algorithm-example" title="Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL" rel="bookmark">Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8224724-how-to-reverse-a-string-in-java-using-recursion" title="So kehren Sie einen String in Java mithilfe der Rekursion um" rel="bookmark"><img src="https://cdn.css-code.org/6971774/how_to_reverse_a_string_in_java_using_recursion.png.webp" loading="lazy" alt="So kehren Sie einen String in Java mithilfe der Rekursion um" title="So kehren Sie einen String in Java mithilfe der Rekursion um" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8224724-how-to-reverse-a-string-in-java-using-recursion" title="So kehren Sie einen String in Java mithilfe der Rekursion um" rel="bookmark">So kehren Sie einen String in Java mithilfe der Rekursion um 2025</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Die besten Bewertungen für den Monat</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226040-process-vs-thread-whats-the-difference" title="Prozess gegen Thread: Was ist der Unterschied?" rel="bookmark">Prozess gegen Thread: Was ist der Unterschied?</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226041-mutex-vs-semaphore-whats-the-difference" title="Mutex vs Semaphore: Was ist der Unterschied?" rel="bookmark">Mutex vs Semaphore: Was ist der Unterschied?</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226042-ram-vs-rom-whats-the-difference" title="RAM vs ROM: Was ist der Unterschied?" rel="bookmark">RAM vs ROM: Was ist der Unterschied?</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226043-ddr3-vs-ddr4-must-know-differences" title="DDR3 vs DDR4: Unterschiede müssen bekannt sein" rel="bookmark">DDR3 vs DDR4: Unterschiede müssen bekannt sein</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226044-multithreading-vs-multiprocessing-whats-the-difference" title="Multithreading vs Multiprocessing: Was ist der Unterschied?" rel="bookmark">Multithreading vs Multiprocessing: Was ist der Unterschied?</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226045-paging-vs-segmentation-key-differences" title="Paging vs. Segmentierung: Hauptunterschiede" rel="bookmark">Paging vs. Segmentierung: Hauptunterschiede</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226046-preemptive-vs-non-preemptive-scheduling-key-differences" title="Preemptive vs Non-Preemptive Scheduling: Hauptunterschiede" rel="bookmark">Preemptive vs Non-Preemptive Scheduling: Hauptunterschiede</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226054-what-is-project-management-objectives-methodologies" title="Was ist Projektmanagement? Ziele, Methoden" rel="bookmark">Was ist Projektmanagement? Ziele, Methoden</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226056-project-integration-management-tutorial-definition-process-and-plan" title="Tutorial zum Projektintegrationsmanagement: Definition, Prozess & Planen" rel="bookmark">Tutorial zum Projektintegrationsmanagement: Definition, Prozess & Planen</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226057-project-scope-management-pmp-tutorial" title="Projektumfangsverwaltung: PMP-Lernprogramm" rel="bookmark">Projektumfangsverwaltung: PMP-Lernprogramm</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226058-project-cost-estimation-and-budget-management-techniques" title="Projektkostenschätzung & Techniken zur Budgetverwaltung" rel="bookmark">Projektkostenschätzung & Techniken zur Budgetverwaltung</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226059-phases-of-project-management-life-cycle" title="Phasen des Projektmanagement-Lebenszyklus" rel="bookmark">Phasen des Projektmanagement-Lebenszyklus</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226060-12-best-wrike-alternatives-for-project-management-in-2021" title="12 BEST Wrike-Alternativen für das Projektmanagement im Jahr 2021" rel="bookmark">12 BEST Wrike-Alternativen für das Projektmanagement im Jahr 2021</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226061-30-best-trello-alternatives-in-2021-freepaid" title="30 besten Trello-Alternativen im Jahr 2021 (kostenlos / bezahlt)" rel="bookmark">30 besten Trello-Alternativen im Jahr 2021 (kostenlos / bezahlt)</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8226062-20-best-free-microsoft-project-alternatives-2021-update" title="20 besten KOSTENLOSEN Microsoft-Projektalternativen (2021-Update)" rel="bookmark">20 besten KOSTENLOSEN Microsoft-Projektalternativen (2021-Update)</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
<div id="container-5533149ee6411a5f99b370c693e87966"></div>	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Top Artikel</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8004118-remove-the-28px-push-down-from-the-admin-bar" title="Entfernen Sie den 28px Push Down aus der Admin-Leiste - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/5253076/remove_the_28px_push_down_from_the_admin_bar_css-tricks.png.webp" loading="lazy" alt="Entfernen Sie den 28px Push Down aus der Admin-Leiste - CSS-Tricks" title="Entfernen Sie den 28px Push Down aus der Admin-Leiste - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8004118-remove-the-28px-push-down-from-the-admin-bar" title="Entfernen Sie den 28px Push Down aus der Admin-Leiste - CSS-Tricks" rel="bookmark">Entfernen Sie den 28px Push Down aus der Admin-Leiste - CSS-Tricks 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8004119-remove-width-and-height-attributes-from-inserted-images" title="Entfernen von Breiten- und Höhenattributen aus eingefügten Bildern - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3311203/remove_width_and_height_attributes_from_inserted_images_css-tricks.png.webp" loading="lazy" alt="Entfernen von Breiten- und Höhenattributen aus eingefügten Bildern - CSS-Tricks" title="Entfernen von Breiten- und Höhenattributen aus eingefügten Bildern - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8004119-remove-width-and-height-attributes-from-inserted-images" title="Entfernen von Breiten- und Höhenattributen aus eingefügten Bildern - CSS-Tricks" rel="bookmark">Entfernen von Breiten- und Höhenattributen aus eingefügten Bildern - CSS-Tricks 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8004120-removing-jetpack-css" title="Jetpack CSS entfernen - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6508724/removing_jetpack_css_css-tricks.png.webp" loading="lazy" alt="Jetpack CSS entfernen - CSS-Tricks" title="Jetpack CSS entfernen - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8004120-removing-jetpack-css" title="Jetpack CSS entfernen - CSS-Tricks" rel="bookmark">Jetpack CSS entfernen - CSS-Tricks 2025</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>
</aside>			</div>
		</div>
		
<footer class="footer footer--dark">
	<div class="container">
		<div class="footer__widgets">
			<div class="row">
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Beliebte Beiträge</h2>
						<ul class="post-list-small">
							<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003156-visited" title=": besucht - CSS-Tricks" rel="bookmark">: besucht - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003157-user-invalid" title=": Benutzer ungültig - CSS-Tricks" rel="bookmark">: Benutzer ungültig - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003158-draggable-elements" title="Ziehbare Elemente - CSS-Tricks" rel="bookmark">Ziehbare Elemente - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003159-flexible-grids" title="Flexible Gitter - CSS-Tricks" rel="bookmark">Flexible Gitter - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003160-a-striped-barberpole-animation" title="Eine gestreifte Barberpole Animation - CSS-Tricks" rel="bookmark">Eine gestreifte Barberpole Animation - CSS-Tricks</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Tipp Der Redaktion</h2>
						<ul class="post-list-small">
						<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004100-increase-custom-fields-dropdown-limit" title="Erhöhen Sie das Dropdown-Limit für benutzerdefinierte Felder - CSS-Tricks" rel="bookmark">Erhöhen Sie das Dropdown-Limit für benutzerdefinierte Felder - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004101-prevent-css-caching" title="CSS-Caching verhindern - CSS-Tricks" rel="bookmark">CSS-Caching verhindern - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004102-display-post-divider-in-between-posts" title="Beitragsteiler zwischen Beiträgen anzeigen - CSS-Tricks" rel="bookmark">Beitragsteiler zwischen Beiträgen anzeigen - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004103-remove-gallery-inline-styling" title="Galerie Inline Styling entfernen - CSS-Tricks" rel="bookmark">Galerie Inline Styling entfernen - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004104-remove-admin-bar-for-subscribers" title="Admin-Leiste für Abonnenten entfernen - CSS-Tricks" rel="bookmark">Admin-Leiste für Abonnenten entfernen - CSS-Tricks</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Top Artikel</h2>
						<ul class="post-list-small">
						<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222779-top-100-qtp-uft-interview-questions-and-answers" title="Top 100 QTP / UFT Interview Fragen & Antworten" rel="bookmark">Top 100 QTP / UFT Interview Fragen & Antworten</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222780-api-testing-using-qtpuft-complete-tutorial" title="API-Tests mit QTP / UFT: Vollständiges Tutorial" rel="bookmark">API-Tests mit QTP / UFT: Vollständiges Tutorial</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222781-what-is-hp-alm-quality-centerqc-testing-tool" title="Was ist HP ALM? QC-Testwerkzeug (Quality Center)" rel="bookmark">Was ist HP ALM? QC-Testwerkzeug (Quality Center)</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222782-hp-alm-administration-create-domain-project-and-user" title="HP ALM Administration: Domain, Projekt & Nutzer" rel="bookmark">HP ALM Administration: Domain, Projekt & Nutzer</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222784-management-tab-create-releases-and-cycles-in-hp-alm-quality-center" title="Registerkarte "Verwaltung": Releases erstellen & Zyklen in HP ALM (Quality Center)" rel="bookmark">Registerkarte "Verwaltung": Releases erstellen & Zyklen in HP ALM (Quality Center)</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<p>© Copyright de.css-code.org, 2025 April | 
				<a href="https://de.css-code.org/about-site" title="Über Site">Über Site</a> | 
				<a href="https://de.css-code.org/contacts" title="Kontakte">Kontakte</a> | 
				<a href="https://de.css-code.org/privacy-policy" title="Datenschutz-Bestimmungen">Datenschutz-Bestimmungen</a>.
			</p>
			
		</div>
	</div>
</footer>		
<link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" />	</body>
</html>