Tablica w JavaScript to struktura danych używana do przechowywania wielu wartości w jednej zmiennej. Może przechowywać różne typy danych i umożliwia dynamiczną zmianę rozmiaru. Dostęp do elementów odbywa się poprzez ich indeks, zaczynając od 0.

Tablica JavaScript

Istnieją dwa sposoby tworzenia tablic JavaScript: za pomocą konstruktora Array albo skrócona składnia literału tablicowego , czyli po prostu nawiasy kwadratowe. Tablice mają elastyczny rozmiar, więc mogą się zwiększać lub zmniejszać w miarę dodawania lub usuwania elementów.

Spis treści

• Co to jest tablica w JavaScript?
• Podstawowe terminologie dotyczące tablicy JavaScript
• Deklaracja tablicy
• Podstawowe operacje na tablicach JavaScript
• Różnica między tablicami JavaScript a obiektami
• Kiedy używać tablic i obiektów JavaScript?
• Rozpoznawanie tablicy JavaScript
• Pełne odniesienie do tablicy JavaScript
• Przykłady tablic JavaScript
• Ściągawka JavaScript

Podstawowe terminologie dotyczące tablicy JavaScript

• Szyk: Struktura danych w JavaScript, która umożliwia przechowywanie wielu wartości w jednej zmiennej.
• Element tablicy: Każda wartość w tablicy nazywana jest elementem. Dostęp do elementów uzyskuje się poprzez ich indeks.
• Indeks tablicy: Reprezentacja liczbowa wskazująca pozycję elementu w tablicy. Tablice JavaScript są indeksowane zerem, co oznacza, że ​​pierwszy element ma indeks 0.
• Długość tablicy: Liczba elementów w tablicy. Można go pobrać za pomocą właściwości długości.

Deklaracja tablicy

Istnieją zasadniczo dwa sposoby deklarowania tablicy, tj. Array Literal i Array Constructor.

1. Tworzenie tablicy za pomocą literału tablicowego

Tworzenie tablicy przy użyciu literału tablicowego wymaga użycia nawiasów kwadratowych [] w celu zdefiniowania i zainicjowania tablicy. Metoda ta jest zwięzła i powszechnie preferowana ze względu na swoją prostotę.

Składnia:

let arrayName = [value1, value2, ...]; 

Przykład:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); 

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] 

2. Tworzenie tablicy za pomocą konstruktora tablic (nowe słowo kluczowe JavaScript)

Konstruktor Array odnosi się do metody tworzenia tablic poprzez wywołanie funkcji konstruktora Array. Takie podejście pozwala na dynamiczną inicjalizację i może być użyte do tworzenia tablic o określonej długości lub elementach.

Składnia:

let arrayName = new Array(); 

Przykład:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr); 

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ] 

Notatka: Obie powyższe metody działają dokładnie tak samo. Użyj metody literału tablicowego, aby uzyskać wydajność, czytelność i szybkość.

Podstawowe operacje na tablicach JavaScript

1. Dostęp do elementów tablicy

Dostęp do dowolnego elementu tablicy można uzyskać za pomocą numeru indeksu. Indeks w tablicach zaczyna się od 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]); 

HTML CSS Javascript React 

2. Dostęp do pierwszego elementu tablicy

Indeksowanie tablicy rozpoczyna się od 0, więc dostęp do pierwszego elementu tablicy możemy uzyskać za pomocą numeru indeksu.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem); 

First Item: HTML 

3. Dostęp do ostatniego elementu tablicy

Dostęp do ostatniego elementu tablicy możemy uzyskać za pomocą numeru indeksu [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem); 

First Item: React 

4. Modyfikowanie elementów tablicy

Elementy tablicy można modyfikować, przypisując nową wartość do odpowiadającego im indeksu.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses); 

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ] 

5. Dodawanie elementów do tablicy

Elementy można dodawać do tablicy za pomocą metod takich jak push() i unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses); 

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ] 

6. Usuwanie elementów z tablicy

Usuń elementy za pomocą metod takich jak pop(), shift() lub splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses); 

Wyjście

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS 

7. Długość tablicy

Uzyskaj długość tablicy za pomocą właściwości długości.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len); 

Array Length: 5 

8. Zwiększaj i zmniejszaj długość tablicy

Możemy zwiększać i zmniejszać długość tablicy za pomocą właściwości długości JavaScript.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses) 

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ] 

9. Iteracja po elementach tablicy

Możemy iterować tablicę i uzyskiwać dostęp do elementów tablicy za pomocą pętli for i forEach.

Przykład: To jest przykład pętli for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i  < courses.length; i++) {  console.log(courses[i]) } 

HTML CSS JavaScript React 

Przykład: To jest przykład Tablica.forEach() pętla.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); }); 

HTML CSS JavaScript React 

10. Konkatenacja tablic

Połącz dwie lub więcej tablic za pomocą metody concat(). Ir zwraca nową tablicę zawierającą połączone elementy tablic.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray); 

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ] 

11. Konwersja tablicy na ciąg

Mamy wbudowaną metodę doString() to konwertuje tablicę na ciąg znaków.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString()); 

HTML,CSS,JavaScript,React 

12. Sprawdź typ tablicy

JavaScript typ operator służy do sprawdzania typu tablicy. Zwraca obiekt dla tablic.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses); 

object 

Różnica między tablicami JavaScript a obiektami

• Tablice JavaScript używają indeksów jako liczb.
• obiekty używają indeksów jako nazw..

Kiedy używać tablic i obiektów JavaScript?

• Tablice są używane, gdy chcemy, aby nazwy elementów były numeryczne.
• Obiektów używamy, gdy chcemy, aby nazwy elementów były ciągami znaków.

Rozpoznawanie tablicy JavaScript

Istnieją dwie metody, dzięki którym możemy rozpoznać tablicę JavaScript:

• Używając Tablica.isArray() metoda
• Używając wystąpienie metoda

Poniżej znajduje się przykład pokazujący oba podejścia:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array) 

Using Array.isArray() method: true Using instanceof method: true 

Notatka: Podczas zapisywania tablic pojawia się częsty błąd:

const numbers = [5] // and const numbers = new Array(5) 

const numbers = [5] console.log(numbers) 

Powyższe dwa stwierdzenia nie są tożsame.

Wyjście: Ta instrukcja tworzy tablicę z elementem [5] .

[5] 

const numbers = new Array(5)  console.log(numbers) 

[ ] 

Pełne odniesienie do tablicy JavaScript

Mamy pełną listę tablic JavaScript. Aby ją sprawdzić, przejrzyj tę listę Odniesienie do tablicy JavaScript artykuł. Zawiera szczegółowy opis i przykłady wszystkich właściwości i metod tablicy.

Przykłady tablic JavaScript

Przykłady JavaScript Array zawierają listę pytań najczęściej zadawanych podczas rozmów kwalifikacyjnych. Proszę sprawdzić ten artykuł Przykłady tablic JavaScript aby uzyskać więcej szczegółów.

Ściągawka JavaScript

Mamy ściągawkę dotyczącą języka JavaScript, w której omówiliśmy wszystkie ważne tematy dotyczące języka JavaScript, aby je sprawdzić Ściągawka JavaScript — podstawowy przewodnik po JavaScript .