perché una mappa js su un array modifica l'array originale?

Question

Sono abbastanza confuso dal comportamento di map().

Ho un array di oggetti simili:

const products = [{ 
    ..., 
    'productType' = 'premium', 
    ... 
}, ...] 

e sto passando questa matrice a una funzione che deve restituire la stessa matrice, ma con tutti i prodotti resi liberi:

[{ 
    ..., 
    'productType' = 'free', 
    ... 
}, ...] 

la funzione è:

const freeProduct = function(products){ 
    return products.map(x => x.productType = "free") 
} 

che restituisce il seguente array:

["free", "free", ...] 

Così ho riscritto la mia funzione di essere:

const freeProduct = function(products){ 
    return products.map(x => {x.productType = "free"; return x}) 
} 

che restituisce l'array come previsto.

MA! E questo è il momento in cui mi perdo la testa, in entrambi i casi il mio array di prodotti originali viene modificato.

La documentazione sulla mappa() dice che non dovrebbe (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).

Ho anche cercato di creare un clone del mio schieramento trasformare la mia funzione come questa

const freeProduct = function(products){ 
    p = products.splice() 
    return p.map(x => {x.productType = "free"; return x}) 
} 

Ma ho ancora ottenere lo stesso risultato (che inizia a farmi impazzire).

Sarei molto grato a chiunque possa spiegarmi cosa sto sbagliando!

Grazie

Answer 1

Non stai modificando l'array originale. Stai modificando gli oggetti nella matrice. Se si vuole evitare mutando gli oggetti nel vostro array, è possibile utilizzare Object.assign per creare un nuovo oggetto con le proprietà del originali più eventuali modifiche necessarie:

const freeProduct = function(products) { 
    return products.map(x => { 
    return Object.assign({}, x, { 
     productType: "free" 
    }); 
    }); 
}; 

Answer 2

di approfondire la risposta di SimpleJ - se si dovesse == = i due array, si troverà che non sarebbero uguali (non lo stesso indirizzo in memoria) confermando che l'array mappato è in realtà una nuova matrice. Il problema è che stai restituendo un nuovo array, che è pieno di riferimenti agli oggetti SAME nell'array originale (non restituisce nuovi letterali dell'oggetto, ma restituisce riferimenti allo stesso oggetto). Quindi è necessario creare nuovi oggetti che sono copie dei vecchi oggetti, ovvero, l'esempio Object.assign fornito da SimpleJ.