Corso di JavaScript & Programmazione Web: 5 – Oggetti e Array

5 – Oggetti e Array

Obiettivi

• Creare e manipolare array in JavaScript.

• Usare i metodi principali: push, pop, map, filter, reduce.

• Definire oggetti e proprietà.

• Convertire dati in JSON e viceversa.

• Realizzare una rubrica di contatti in array di oggetti.

---

1. Array: creazione e gestione

// Creazione
const a = [];                     // array vuoto
const nums = [1, 2, 3, 4];        // array con elementi
const mixed = ['ciao', 10, true]; // tipi diversi

// Accesso
console.log(nums[0]);   // 1
console.log(nums.length); // 4

Metodi principali

const nums = [1, 2, 3, 4];

// push: aggiunge in fondo
nums.push(5); // [1,2,3,4,5]

// pop: rimuove ultimo
nums.pop();   // [1,2,3,4]

// unshift: aggiunge in testa
nums.unshift(0); // [0,1,2,3,4]

// shift: rimuove primo
nums.shift();   // [1,2,3,4]

// splice: inserisce/rimuove
nums.splice(2, 1);    // rimuove elemento all’indice 2 → [1,2,4]
nums.splice(2, 0, 2.5); // inserisce 2.5 all’indice 2 → [1,2,2.5,4]

// slice: crea copia parziale
const part = nums.slice(1,3); // [2,2.5]

---

2. Metodi funzionali: map, filter, reduce

const nums = [1, 2, 3];

// map: trasforma
const squares = nums.map(n => n*n); // [1,4,9]

// filter: seleziona
const evens = nums.filter(n => n%2===0); // [2]

// reduce: aggrega
const sum = nums.reduce((acc, n) => acc+n, 0); // 6

Esempio pratico:

const contacts = [
  { id: 'c1', name: 'Luca', email: 'luca@example.com' },
  { id: 'c2', name: 'Anna', email: 'anna@example.com' }
];
const emails = contacts.map(c => c.email);
// ['luca@example.com', 'anna@example.com']

---

3. Oggetti e proprietà

const contact = {
  id: 'c1',
  firstName: 'Luca',
  lastName: 'Bianchi',
  phones: ['+39 333 111222'],
  address: { city: 'Firenze', zip: '50100' },
  favorite: true
};

// Accesso
console.log(contact.firstName);   // Luca
console.log(contact['lastName']); // Bianchi

// Destructuring
const { firstName, address: { city } } = contact;
console.log(firstName, city); // Luca Firenze

---

4. JSON: cos’è e a cosa serve

JSON = JavaScript Object Notation.
Formato testuale per scambio di dati.

// Oggetto → JSON
const s = JSON.stringify(contact, null, 2);

// JSON → Oggetto
const obj = JSON.parse(s);

---

5. Esercizio pratico: rubrica contatti

Implementiamo funzioni CRUD (Create, Read, Update, Delete).

const contacts = [
  {
    id: 'c1',
    firstName: 'Luca',
    lastName: 'Bianchi',
    email: 'luca@example.com',
    city: 'Firenze'
  },
  {
    id: 'c2',
    firstName: 'Anna',
    lastName: 'Rossi',
    email: 'anna@example.com',
    city: 'Milano'
  }
];

function genId() {
  return Date.now().toString(36) + Math.random().toString(36).slice(2,8);
}

function addContact(list, data) {
  const newContact = { id: genId(), ...data };
  list.push(newContact);
  return newContact;
}

function removeContactById(list, id) {
  const idx = list.findIndex(c => c.id === id);
  if (idx === -1) return false;
  list.splice(idx, 1);
  return true;
}

function updateContact(list, id, updates) {
  const idx = list.findIndex(c => c.id === id);
  if (idx === -1) return null;
  list[idx] = { ...list[idx], ...updates };
  return list[idx];
}

function findContactsByName(list, term) {
  const t = term.toLowerCase();
  return list.filter(c =>
    (c.firstName + ' ' + c.lastName).toLowerCase().includes(t)
  );
}

Esempio di uso:

console.log("Lista iniziale:", contacts);

const newC = addContact(contacts, { firstName: 'Marco', lastName: 'Verdi', email: 'marco@example.com' });
console.log("Dopo add:", contacts);

removeContactById(contacts, newC.id);
console.log("Dopo remove:", contacts);

console.log("Cerca 'Anna':", findContactsByName(contacts, 'Anna'));

---

6. Esportazione / Importazione JSON

function exportToJSON(list) {
  return JSON.stringify(list, null, 2);
}

function importFromJSON(jsonStr) {
  return JSON.parse(jsonStr);
}

---

7. Esercizi

1. Scrivi deduplicateByEmail(list) che elimina contatti con la stessa email.

2. Scrivi groupByInitial(list) che raggruppa contatti per iniziale del cognome.

3. Trova le prime 3 città con più contatti.

4. Crea una mini interfaccia HTML che mostri la rubrica in tabella.