ES6解构：如何创建一个新对象，该对象忽略了动态引用的键

Question

Is there an ES6 (and upwards) solution using destructuring and the spread operator to create a new object with a key and value deleted from the original object, when the key reference is dynamic, so:

const state = {
   12344: {
      url: 'http://some-url.com',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.com',
      id: '12345'
   }
}

const idToDelete = 12344

const { [idToDelete], ...newState } = state // dynamic key

console.log('newState:', newState)

// desired newState would only have the key 12345 and its value

Unless it's my present Babel setup, I can't figure out the clean ES6 way of doing this (if it exists).

Many thanks in advance

Answer 1

when destructuring using dynamic id you need to set a var with the remove value : the doc about this

 const state = { 12344: { url: 'http://some-url.com', id: '12344' }, 12345: { url: 'http://some-other-url.com', id: '12345' } } const idToDelete = 12344 // the removed object will go to unusedVar const { [idToDelete]: unusedVar, ...newState } = state // dynamic key console.log('newState:', newState) 

a better way if you don't need to keep the deleted object is to use the keyword delete

 const state = { 12344: { url: 'http://some-url.com', id: '12344' }, 12345: { url: 'http://some-other-url.com', id: '12345' } } const idToDelete = 12344 delete state[idToDelete] console.log('newState:', state) 

Answer 2

I don't think it's possible to cleanly achieve with ES6 destructuring. Since other answers include mutating the state, try this instead:

 const state = { 12344: { url: 'http://some-url.com', id: '12344' }, 12345: { url: 'http://some-other-url.com', id: '12345' } } const idToDelete = 12344 const newState = Object.assign({}, state); delete newState[idToDelete]; console.log('newState:', newState) console.log('old state:', state);