Jak można dokładnie wykorzystać tablice

Question

Jak dokładnie wykorzystać tablice w js do czego użyć można jakie ma zastosowania jak ją używać ktoś może mi to wytłumaczyć?

Answer 1

Tablice są przydatne wtedy, gdy chcesz przechowywać różne dane w jednym miejscu. Na przykład imiona pracowników, kolory czy miasta.

Comments

Rozumiem ale chciałbym się dowiedzieć jak dokładnie z nich korzystać jak wyjąc te dane i nich użyć np

---

const names = ["James", "William", "Peter"];

No np. deklarujesz taką tablicę z imionami. I wypisujesz potem powiedzmy 2 imię

console.log(names[1]);

 

---

Aha no nie wiem czy rozumiem ale dzięki

---

Najprościej byłoby przerobić jakiś kurs js

---

Znaczy dajmy sytuacja że chciem żeby po wpisaniu danego numeru imienia w divę to imię sie pokazało jak użyć do tego tablic ?

---

Taki mam w połowie zrobiony ale chciem się dowiedzieć

Answer 2

@Infos;

sytuacja że chciem żeby po wpisaniu danego numeru imienia w divę to imię sie pokazało jak użyć do tego tablic ?

rozumiem, że masz na myśli input do wprowadzenia numeru (numeru indeksu) dla imienia w tablicy.

//   długość length: 5 elementów
//   indeks:        0        1          2          3          4
const imiona = [ 'Anna', 'Tomasz', 'Katarzyna', 'Piotr', 'Magdalena']; 

 

[ kod przykładu on-line ]

<label for="indeksInput">Wprowadź liczbę (1-10):</label>
<input type="number" id="indeksInput" min="1" max="10" value="1" />
<button id="pokazButton">Wyświetl imię</button>

<div id="wynikDiv">Imię: <span></span></div>

<script>
  const imiona = [
    'Anna', 'Tomasz', 'Katarzyna', 'Piotr', 'Magdalena', 
    'Jan', 'Małgorzata', 'Krzysztof', 'Agnieszka', 'Michał'
  ];

  const pokazButton = document.querySelector('#pokazButton');
  pokazButton.addEventListener('click', () => {
    const indeksElement = document.querySelector('#indeksInput');
    const wynikDiv = document.querySelector('#wynikDiv span');

    // Ponieważ indeksy w tablicy zaczynaja sie od zera (0), a dla ludzi
    // bardziej naturalne jest numerowanie od jeden (1) użyto triku z - 1. 
    // Dla 0 mamy 1, 1 mamy 2, 2 mamy 3 itd.
    // Użyj parseInt do konwersji wartości na liczbę
    const indeks = parseInt(indeksElement.value) - 1;

    // Sprawdź, czy wprowadzona wartość jest liczbą (isNaN)
    // i czy indeks mieści się w zakresie tablicy
    if (!isNaN(indeks) && (indeks >= 0 && indeks < imiona.length)) {
      // Pobierz imię z tablicy na podstawie indeksu
      const imie = imiona[indeks];

      // Wyświetl imię w div span
      wynikDiv.textContent = imie;
    } else {
      // Jeżeli wprowadzona wartość nie jest liczbą lub indeks jest poza zakresem,
      // poinformuj użytkownika
      wynikDiv.textContent = 'Nieprawidłowa wartość indeksu';
    }
  });  
</script>

 

---

 

zapoznaj się też z: Tablica obiektów (Tablica asocjacyjna*).

Każdy element tablicy jest obiektem, a obiekty te mają różne właściwości (klucze i wartości), takie jak w tym przypadku: 'imie', 'nazwisko' i 'wiek'.

const osoby = [
    { 'imie': 'Anna',      'nazwisko': 'Kowalska',  'wiek': 30 },
    { 'imie': 'Tomasz',    'nazwisko': 'Nowak',     'wiek': 25 },
    { 'imie': 'Katarzyna', 'nazwisko': 'Wójcik',    'wiek': 35 },
    { 'imie': 'Piotr',     'nazwisko': 'Jankowski', 'wiek': 40 },
    { 'imie': 'Magdalena', 'nazwisko': 'Dąbrowska', 'wiek': 28 }
];

* - W JavaScript termin "tablica asocjacyjna" nie jest powszechnie używany. W praktyce, termin ten często jest mylący, ponieważ w JavaScript tablice i obiekty spełniają rolę struktur asocjacyjnych.

 

W przypadku JavaScript, tablice są specjalnym rodzajem obiektu, a indeksy są traktowane jako ciągi znaków (lub symboli), nawet jeśli są to liczby. W związku z tym, można by powiedzieć, że tablice w JavaScript mają pewne cechy tablic asocjacyjnych.

 

Jednak bardziej powszechnie używane i dokładniejsze określenie dla struktury danych z kluczami i wartościami, jak w tym przypadku, to "obiekt". W JavaScript często używa się obiektów do reprezentowania struktur asocjacyjnych, gdzie klucze są ciągami znaków (lub symbolami), a wartościami mogą być różne typy danych.

 

[ kod przykładu on-line ]   <pre> [ 1 ] [ 2 ]

<label for="indeksInput">Wprowadź liczbę (1-5):</label>
<input type="number" id="indeksInput" min="1" max="5" value="1" />
<button id="pokazButton">Wyświetl dane</button>

<pre id="wynikPre"></pre>

<script>
  const osoby = [
    { 'imie': 'Anna', 'nazwisko': 'Kowalska', 'wiek': 30 },
    { 'imie': 'Tomasz', 'nazwisko': 'Nowak', 'wiek': 25 },
    { 'imie': 'Katarzyna', 'nazwisko': 'Wójcik', 'wiek': 35 },
    { 'imie': 'Piotr', 'nazwisko': 'Jankowski', 'wiek': 40 },
    { 'imie': 'Magdalena', 'nazwisko': 'Dąbrowska', 'wiek': 28 }
  ];


  const pokazButton = document.querySelector('#pokazButton');
  pokazButton.addEventListener('click', () => {
    const indeksElement = document.querySelector('#indeksInput');
    const wynikPre = document.querySelector('#wynikPre');

    // Ponieważ indeksy w tablicy zaczynaja sie od zera (0), a dla ludzi
    // bardziej naturalne jest numerowanie od jeden (1) użyto triku z - 1. 
    // Dla 0 mamy 1, 1 mamy 2, 2 mamy 3 itd.
    // Użyj parseInt do konwersji wartości na liczbę
    const indeks = parseInt(indeksElement.value) - 1;

    // Sprawdź, czy wprowadzona wartość jest liczbą (isNaN)
    // i czy indeks mieści się w zakresie tablicy
    if (!isNaN(indeks) && (indeks >= 0 && indeks < osoby.length)) {
      // Pobierz imię z tablicy na podstawie indeksu
      const dane = osoby[indeks];

      // Wyświetl dane w pre
      wynikPre.textContent = ` Imię: ${dane.imie}\n Nazwisko: ${dane.nazwisko}\n Wiek: ${dane.wiek}`;
    } else {
      // Jeżeli wprowadzona wartość nie jest liczbą lub indeks jest poza zakresem,
      // poinformuj użytkownika
      wynikPre.textContent = 'Nieprawidłowa wartość indeksu';
    }
  });  
</script>

 

Comments

Dziękuję bardzo