JavaMetody tablicy skryptu: Utwórz z przykładem

Co to jest tablica w JavaScenariusz?

Tablica to obiekt, w którym można przechowywać: zbiór przedmiotówTablice stają się bardzo przydatne, gdy trzeba przechowywać duże ilości danych tego samego typu. Załóżmy, że chcesz przechowywać dane 500 pracowników. Jeśli używasz zmiennych, będziesz musiał utworzyć 500 zmiennych, podczas gdy to samo możesz zrobić z pojedynczą tablicą. Dostęp do elementów w tablicy można uzyskać, odwołując się do jej… numer indeksu, a indeks pierwszego elementu tablicy jest równy zero.

W przeciwieństwie do tablic w językach ściśle typowanych, JavaTablica skryptów jest dynamiczna. Jej długość rośnie automatycznie po przypisaniu nowego elementu, a pojedyncza tablica może zawierać jednocześnie ciągi znaków, liczby, wartości logiczne, obiekty, a nawet inne tablice. Ta elastyczność sprawia, że ​​tablice są domyślnym kontenerem dla danych list zarówno w skryptach przeglądarki, jak i w kodzie po stronie serwera.

Jak utworzyć tablicę w JavaScenariusz

Możesz utworzyć tablicę w JAVASCRIPT jak podano poniżej.

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

Tutaj inicjujesz tablicę w momencie jej tworzenia, wartościami „John”, „Ann” i „Kevin”. Indeks „John”, „Ann” i „Kevin” wynosi odpowiednio 0, 1 i 2. Jeśli chcesz dodać więcej elementów do tablicy studentów, możesz to zrobić w następujący sposób:

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

Można również utworzyć tablicę za pomocą konstruktora Array w następujący sposób:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Jak uzyskać dostęp do elementów tablicy i je modyfikować

Każdy element znajduje się na ponumerowanej pozycji. Notacja w nawiasach kwadratowych odczytuje wartość, przypisuje nową wartość lub dodaje nowy wpis, gdy indeks jest równy bieżącej długości.

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

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaMetody tablicy skryptów

Obiekt Array ma wiele właściwości i metod, które pomagają programistom łatwo i efektywnie obsługiwać tablice. Wartość właściwości można uzyskać, określając nazwa_tablicy.właściwość, a wynik metody, określając nazwę_tablicy.method().

1. właściwość długości –> Jeśli chcesz poznać liczbę elementów w tablicy, możesz skorzystać z właściwości długości.
2. własność prototypu –> Jeśli chcesz dodać nowe właściwości i metody, możesz skorzystać z właściwości prototype.
3. metoda odwrotna –> Możesz odwrócić kolejność elementów w tablicy, stosując metodę odwrotną.
4. metoda sortowania –> Elementy w tablicy można sortować za pomocą metody sort.
5. metoda popowa –> Możesz usunąć ostatni element tablicy za pomocą metody pop.
6. metoda przesunięcia –> Możesz usunąć pierwszy element tablicy używając metody shift.
7. metoda pchania –> Możesz dodać wartość jako ostatni element tablicy.

Poniższa tabela referencyjna grupuje najczęściej używane metody, dzięki czemu można na pierwszy rzut oka sprawdzić, które z nich zmieniają oryginalną tablicę, a które zwracają nową wartość.

Dodawanie i usuwanie elementów

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Wyszukiwanie, kopiowanie i łączenie

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Metody iteracji: forEach, map, filter i reduce

Nowoczesne technologie JavaSkrypt preferuje metody sterowane wywołaniem zwrotnym nad ręcznymi pętlami indeksowania, ponieważ cel operacji jest określony bezpośrednio w nazwie metody.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaPrzykład tablicy skryptu ze źródłem Code

Poniższy skrypt tworzy tablicę uczniów, dodaje niestandardową metodę wyświetlania za pomocą właściwości prototype, a następnie demonstruje sekwencję operacji: długość, sortowanie, odwracanie, wysuwanie i wstawianie. Spróbuj sam:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Oczekiwany wynik:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Zauważ, że sortowanie umieszcza „Aaron” przed „Ann”, ponieważ wielkie i małe litery są porównywane według kodów znaków. Zauważ również, że pop usunął „Aaron” z odwróconej tablicy, co potwierdza, że ​​zarówno sortowanie, jak i odwrócenie zmieniły oryginalną tablicę w miejscu.

Jak przejść przez pętlę JavaTablica skryptów

Cztery toaletyping Dostępne są style, z których każdy pasuje do innej sytuacji. Klasyczna pętla for daje pełną kontrolę nad indeksem, for…of odczytuje wartości bezpośrednio, forEach jasno wyraża intencję, a for…in powinna być zarezerwowana dla właściwości obiektów.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Bardziej szczegółowe omówienie składni pętli, w tym while i do…while, znajduje się w artykule na jak używać pętli w JavaScenariusz.

Tablice wielowymiarowe w JavaScenariusz

JavaSkrypt nie ma dedykowanego typu macierzy. Siatka to po prostu tablica, której elementy same w sobie są tablicami, a do dotarcia do pojedynczej komórki używane są dwa wyrażenia indeksowe.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Wyjście:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Tablice pojawiają się w niemal każdym skrypcie praktycznym, od walidacji formularzy po renderowanie danych. Kontynuuj praktyczny JavaPrzykłady kodu skryptu, przejrzeć JavaCiągi skryptów do obsługi tekstu i przeczytaj o wewnętrzny i zewnętrzny JavaScenariusz aby zdecydować, gdzie te skrypty powinny znaleźć się na stronie. Programiści, którzy chcą, aby zawartość tablicy była sprawdzana pod kątem statycznego typu, mogą przejść do TypeScript Tutorial.

FAQ