Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Copia superficiale e profonda

Fa parte della sezione Logica e flusso del percorso JavaScript di Coddy. Lezione 25 di 65.

Quando copiamo gli oggetti, abbiamo due tipi di copie:

  1. Copia superficiale - copia solo il primo livello
  2. Copia profonda - copia tutti i livelli annidati

Metodi di copia superficiale:

Utilizzo dell'operatore spread:

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Usando Object.assign(), che crea un nuovo oggetto copiando le proprietà dall'oggetto sorgente a quello di destinazione:

const assignCopy = Object.assign({}, original);

Problema con la copia superficiale:

original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (gli oggetti annidati condividono lo stesso riferimento)

console.log(assignCopy.b.x); // 3

Capire i metodi JSON & la copia profonda

JSON.stringify() converte un oggetto JavaScript in una stringa JSON:

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() converte una stringa JSON di nuovo in un oggetto JavaScript:

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Copia profonda usando JSON:

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (completamente indipendente)
challenge icon

Sfida

Facile

Crea una funzione chiamata processCart che accetta una stringa JSON che rappresenta un carrello della spesa. Il carrello contiene un array di prodotti con nomi e prezzi. Il tuo compito è:

  1. Analizzare la stringa JSON e convertirla in un oggetto JavaScript
  2. Creare DUE carrelli separati a partire da essa
  3. Nel secondo carrello:
    1. Aggiungere a ogni elemento una proprietà discounted impostata su false
    2. Applicare uno sconto del 10% a tutti gli elementi che hanno price maggiore di 50
    3. Impostare 'discounted' su true per gli elementi che hanno ricevuto lo sconto
  4. Restituire un array contenente entrambi i carrelli

Provalo tu

function processCart(jsonString) {
    // Scrivi il codice qui
}
// Non scrivere nulla al di fuori della funzione
quiz iconMettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Logica e flusso

1Le stringhe in dettaglio

Fondamenti delle stringheIterare sulle stringheTemplate literalsMetodi delle stringheRiepilogo - Intrecciatore di stringhe

4JSON Parte 2

Iterare su JSONJSON annidatoOptional chaining in JSONCopia superficiale e profondaRipasso - Negozio di bicicletteRipasso - Sistema solare

7Sistema di gestione della biblioteca

Panoramica del progettoAggiungere libriLezione di progettoCercare per titoloLezione di progettoFiltrare per genereLezione di progettoSegnare come lettoLezione di progetto

10Gestire il sistema del festival

Panoramica del progettoAggiungere film e saleLezione di progettoAggiungere una proiezioneLezione di progettoAcquistare bigliettiLezione di progettoValutare i filmLezione di progettoAnnullare le proiezioniLezione di progetto

2Array multidimensionali

Nozioni di base sugli array 2DAccesso agli elementi di un array 2DCicli annidati con array 2DRipasso: array 2DAddizione e sottrazione di matriciArray frastagliatiArray 3D e oltreSchemi comuni con array 2DRipasso: tutto sugli array

5Insiemi Parte 1

Che cos'è un insieme?Iterare sugli insiemiAggiungere un elementoRimuovere un elementoVerificare se un elemento esisteDimensione e verifica del vuotoCopiare e svuotareRiepilogo - Nozioni di base sugli insiemi

8Argomenti interessanti sugli array

Destrutturazione degli arraySintassi spread negli arrayArray sparsiRiepilogo - Laboratorio sugli array

3JSON Parte 1

Che cos'è JSON?Verificare se una chiave esisteMetodi degli oggettiL'operatore spread Parte 1L'operatore spread Parte 2Rimuovere le chiaviRipasso - Manipolare le chiavi in JSON

6Insiemi Parte 2

Matematica - Unione di insiemiMatematica - Intersezione di insiemiMatematica - Differenza di insiemiMatematica - Differenza simmetricaSottoinsiemi e sovrainsiemiRiepilogo - Raggruppa gli amici

9Metodi avanzati degli array

I metodi Join e SplitIl metodo MapIl metodo FilterIl metodo ReduceConcatenare i metodi degli arrayForEach e Map sono uguali?Il metodo SortI metodi Find e FindIndexRipasso: il maestro delle concatenazioni

Esercitati da solo: Compilatore JavaScript online