Arrays și obiecte- Curs Javascript

Crearea și Accesarea Tablourilor (Arrays)

Un array este o colecție ordonată de valori. Poți stoca orice tip de date: numere, stringuri, obiecte, chiar și alte array-uri. Elementele sunt accesate prin index, care începe de la 0.

Crearea unui array

let fructe = ["mere", "pere", "prune"];

Accesarea elementelor

console.log(fructe[0]); // "mere"
console.log(fructe[2]); // "prune"

Modificarea unui element

fructe[1] = "banane";
console.log(fructe); // ["mere", "banane", "prune"]

Exemplu Live: Accesarea unui array

  document.getElementById("afiseazaFructe").addEventListener("click", function () {
    const fructe = ["mere", "pere", "prune"];
    const lista = document.getElementById("listaFructe");
    lista.innerHTML = "";
    fructe.forEach(function (fruct) {
      const item = document.createElement("li");
      item.textContent = fruct;
      lista.appendChild(item);
    });
  });

Metode utile pentru Arrays

JavaScript oferă o mulțime de metode pentru a manipula array-urile. Iată cele mai frecvent folosite:

push()

Adaugă un element la finalul array-ului.

let culori = ["roșu", "verde"];
culori.push("albastru");
console.log(culori); // ["roșu", "verde", "albastru"]

pop()

Elimină ultimul element din array.

culori.pop();
console.log(culori); // ["roșu", "verde"]

splice()

Poți adăuga, elimina sau înlocui elemente într-un array.

// Elimină 1 element de la indexul 0
culori.splice(0, 1);
console.log(culori); // ["verde"]

// Adaugă "galben" la indexul 1
culori.splice(1, 0, "galben");
console.log(culori); // ["verde", "galben"]

Exemplu Live: push, pop și splice

  let culori = ["roșu", "verde", "albastru"];
  const lista = document.getElementById("listaCulori");

  function afiseazaCulori() {
    lista.innerHTML = "";
    culori.forEach(function (culoare) {
      const item = document.createElement("li");
      item.textContent = culoare;
      lista.appendChild(item);
    });
  }

  document.getElementById("btnPush").addEventListener("click", function () {
    culori.push("galben");
    afiseazaCulori();
  });

  document.getElementById("btnPop").addEventListener("click", function () {
    culori.pop();
    afiseazaCulori();
  });

  document.getElementById("btnSplice").addEventListener("click", function () {
    culori.splice(0, 1, "mov");
    afiseazaCulori();
  });

  afiseazaCulori();

Obiecte și Proprietăți

Un obiect este o colecție de perechi cheie: valoare. Poți stoca orice tip de date și le accesezi prin punct sau paranteze pătrate.

Crearea unui obiect

let persoana = {
  nume: "Ioan",
  varsta: 30,
  ocupatie: "developer"
};

Accesarea proprietăților

console.log(persoana.nume); // "Ioan"
console.log(persoana["varsta"]); // 30

Exemplu Live: Obiect simplu

  document.getElementById("btnObiect").addEventListener("click", function () {
    const persoana = {
      nume: "Ioan",
      varsta: 30,
      ocupatie: "developer"
    };
    document.getElementById("outputObiect").innerText =
      persoana.nume + " are " + persoana.varsta + " ani și este " + persoana.ocupatie + ".";
  });

Metode în Obiecte și Cuvântul cheie this

Obiectele pot avea metode — funcții stocate ca proprietăți. Cuvântul this se referă la obiectul curent.

Exemplu

let masina = {
  marca: "Dacia",
  porneste: function() {
    console.log("Pornim " + this.marca);
  }
};

masina.porneste(); // "Pornim Dacia"

Exemplu Live: Metodă cu this

  const masina = {
    marca: "Dacia",
    porneste: function () {
      document.getElementById("outputMasina").innerText = "Pornim " + this.marca;
    }
  };

  document.getElementById("btnMasina").addEventListener("click", function () {
    masina.porneste();
  });

Iterarea Obiectelor și Array-urilor

Poți parcurge array-uri cu for, forEach, iar obiectele cu for...in.

Array

let numere = [1, 2, 3];
numere.forEach(function(n) {
  console.log(n);
});

Obiect

let carte = { titlu: "Ion", autor: "Rebreanu" };
for (let cheie in carte) {
  console.log(cheie + ": " + carte[cheie]);
}

Array-uri și Obiecte Imbricate

Poți avea array-uri în obiecte și obiecte în array-uri. Structurile pot fi complexe.

Obiect cu array

let student = {
  nume: "Ana",
  note: [9, 10, 8]
};

console.log(student.note[1]); // 10

Array cu obiecte

let produse = [
  { nume: "Laptop", pret: 3000 },
  { nume: "Mouse", pret: 100 }
];

console.log(produse[0].nume); // "Laptop"

Array în Obiect / Obiect în Array

Combinațiile sunt utile pentru structuri de date complexe, cum ar fi liste de utilizatori, coșuri de cumpărături etc.

Exemplu: Array în obiect

let echipa = {
  membri: ["Ioan", "Maria", "Alex"]
};

console.log(echipa.membri[2]); // "Alex"

Exemplu: Obiect în array

let animale = [
  { specie: "pisică", sunet: "miau" },
  { specie: "câine", sunet: "ham" }
];

console.log(animale[1].sunet); // "ham"

🧠 Quiz - Arrays și Obiecte în JavaScript