immutabilité suppression clé de l'objet par déstructurer

Question

J'ai un objet avec une structure simplifiée comme ceci:

state = { 
    todo: { 
    1: {text: 'Buy apples'}, 
    2: {text: 'Buy milk'} 
    } 
} 

Si je voulais supprimer un élément de todo immuabilité, selon d'autres réponses sur Stack Overflow je pourrais déstructurer de l'todo liste:

const idToDelete = 2 

let { 
    [idToDelete]: deleted, 
    ...newTodo 
} = state.todo 

Si je console.log(newTodo), il a la même valeur de state.todo, ce qui signifie qu'il n'a pas supprimé Todo élément avec id 2. Si je console.log(deleted) il renvoie le contenu du todo I vouloir del ete: {text: 'Buy milk'}.

Je suis conscient qu'il serait un peu plus facile de gérer cela en utilisant une bibliothèque comme Immutable.js, mais je voudrais savoir pourquoi la déstructuration de l'objet ne supprime pas l'élément todo. Merci.

Answer 1

Vous aurez besoin de l'étape-0 pour réaliser ce que vous voulez. Si vous vérifiez mon code, vous verrez que si vous utilisez une chaîne pour détruire les paramètres, cela fonctionnera comme prévu, mais si vous utilisez une variable numérique, le résultat sera l'objet complet. Je suppose que cela devrait être un bug dans la mise en œuvre.

const state = { 
 
    todo: { 
 
    1: {text: 'Buy apples'}, 
 
    2: {text: 'Buy milk'} 
 
    } 
 
} 
 
const id = 1 
 
const { [id]: deleted, ...newTodo } = state.todo 
 

 
console.log(deleted) 
 
console.log(newTodo) 
 

 
/********* GOOD EXAMPLE *********/ 
 

 
const { [id.toString()]: del, ...goodNewTodo } = state.todo 
 

 
console.log(del) 
 
console.log(goodNewTodo)

Answer 2

Il semble y avoir une différence dans la façon dont cette gère les clés de chaîne par rapport aux touches numériques. Pour ma façon de penser, cela ne semble pas correct, alors je me demande s'il y a un bug quelque part.

const orig = { 
 
    a:1, 
 
    b:2, 
 
    1:'a', 
 
    2:'b' 
 
}; 
 

 
const {2:val_for_2, ...rest_for_2} = orig; 
 
const {b:val_for_b, ...rest_for_b} = orig; 
 

 
console.log('val_for_2:', val_for_2); 
 
console.log('rest_for_2:', rest_for_2); 
 
console.log('val_for_b:', val_for_b); 
 
console.log('rest_for_b:', rest_for_b); 
 

 
// output (as of late Feb, 2017): 
 
// val_for_2: b 
 
// rest_for_2: { 
 
// "1": "a", 
 
// "2": "b", 
 
// "a": 1, 
 
// "b": 2 
 
// } 
 
// val_for_b: 2 
 
// rest_for_b: { 
 
// "1": "a", 
 
// "2": "b", 
 
// "a": 1 
 
// }