javascript - numeros - eliminar duplicados array typescript

Eliminar una propiedad en un objeto inmutable

Question

Estoy usando Redux En mi reductor estoy tratando de eliminar una propiedad de un objeto como este:

const state = {
    a: ''1'',
    b: ''2'',
    c: {
       x: ''42'',
       y: ''43''
    },
}

Y quiero tener algo como esto sin tener que mutar el estado original:

const newState = {
    a: ''1'',
    b: ''2'',
    c: {
       x: ''42'',
    },
}

Lo intenté:

let newState = Object.assign({}, state);
delete newState.c.y

pero por alguna razón, elimina la propiedad de ambos estados.

¿Podría ayudarme a hacer eso?

Answer 1

¿Qué tal usar la sintaxis de asignación de desestructuración ?

const original = {
  foo: ''bar'',
  stack: ''overflow'',
};

// If the name of the property to remove is constant
const { stack, ...withoutFirst } = original;
console.log(withoutFirst); // Will be { "foo": "bar" }

// If the name of the property to remove is from a variable
const key = ''stack''
const { [key]: value, ...withoutSecond } = original;
console.log(withoutSecond); // Will be { "foo": "bar" }

// To do a deep removal with property names from variables
const deep = {
  foo: ''bar'',
  c: {
   x: 1,
   y: 2
  }
};

const parentKey = ''c'';
const childKey = ''y'';
// Remove the ''c'' element from original
const { [parentKey]: parentValue, ...noChild } = deep;
// Remove the ''y'' from the ''c'' element
const { [childKey]: removedValue, ...childWithout } = parentValue;
// Merge back together
const withoutThird = { ...noChild, [parentKey]: childWithout };
console.log(withoutThird); // Will be { "foo": "bar", "c": { "x": 1 } }

Answer 2

A partir de 2019, otra opción es usar el método Object.fromEntries . Ha alcanzado la etapa 4.

const newC = Object.fromEntries(
    Object.entries(state.c).filter(([key]) => key != ''y'')
)
const newState = {...state, c: newC}

Lo bueno de esto es que maneja bien las teclas enteras.

Answer 3

Como ya se insinuó en algunas de las respuestas, es porque está intentando modificar un estado anidado, es decir. Un nivel más profundo. Una solución canónica sería agregar un reductor en el nivel de estado x :

const state = {
    a: ''1'',
    b: ''2'',
    c: {
       x: ''42'',
       y: ''43''
    },
}

Reductor de nivel más profundo

let newDeepState = Object.assign({}, state.c);
delete newDeepState.y;

Reductor de nivel original

let newState = Object.assign({}, state, {c: newDeepState});

Answer 4

El problema que tiene es que no está clonando profundamente su estado inicial. Entonces tienes una copia superficial.

Podría usar el operador de propagación

  const newState = { ...state, c: { ...state.c } };
  delete newState.c.y

O siguiendo tu mismo código

let newState = Object.assign({}, state, { c: Object.assign({}, state.c) });
delete newState.c.y

Answer 5

Encuentro que los métodos de matriz ES5 como filter , map y reduce útiles porque siempre devuelven nuevas matrices u objetos. En este caso, usaría Object.keys para iterar sobre el objeto, y Array#reduce para convertirlo nuevamente en un objeto.

return Object.assign({}, state, {
    c: Object.keys(state.c).reduce((result, key) => {
        if (key !== ''y'') {
            result[key] = state.c[key];
        }
        return result;
    }, {})
});

Answer 6

Es fácil con Immutable.js :

const newState = state.deleteIn([''c'', ''y'']);

descripción de deleteIn ()

Answer 7

Esto se debe a que está copiando el valor de state.c en el otro objeto. Y ese valor es un puntero a otro objeto javascript. Entonces, ambos punteros apuntan al mismo objeto.

Prueba esto:

let newState = Object.assign({}, state);
console.log(newState == state); // false
console.log(newState.c == state.c); // true
newState.c = Object.assign({}, state.c);
console.log(newState.c == state.c); // now it is false
delete newState.c.y;

También puede hacer una copia profunda del objeto. Vea esta pregunta y encontrará lo que es mejor para usted.

Answer 8

Normalmente uso

Object.assign({}, existingState, {propToRemove: undefined})

Me doy cuenta de que esto no está eliminando la propiedad, sino que para casi todos los propósitos es funcionalmente equivalente. La sintaxis para esto es mucho más simple que las alternativas, que creo que es una muy buena compensación.

¹ Si está utilizando hasOwnProperty() , deberá utilizar la solución más complicada.

Answer 9

Puede usar _.omit(object, [paths]) de la biblioteca lodash

la ruta se puede anidar, por ejemplo: _.omit(object, [''key1.key2.key3''])

Answer 10

Puede usar el ayudante de Inmutabilidad para desarmar un atributo, en su caso:

import update from ''immutability-helper'';

const updatedState = update(state, {
  c: {
    $unset: [''y'']
  }
});    

Answer 11

Qué tal esto:

function removeByKey (myObj, deleteKey) {
  return Object.keys(myObj)
    .filter(key => key !== deleteKey)
    .reduce((result, current) => {
      result[current] = myObj[current];
      return result;
  }, {});
}

Filtra la clave que debe eliminarse y luego crea un nuevo objeto a partir de las claves restantes y el objeto inicial. La idea fue robada del increíble programa de reacciones de Tyler McGinnes.

JSBin

Answer 12

Solo use la función de desestructuración de objetos ES6

const state = {
    c: {
       x: ''42'',
       y: ''43''
    },
}

const { c: { y, ...c } } = state // generates a new ''c'' without ''y''

console.log({...state, c }) // put the new c on a new state

Answer 13

Yo uso este patron

const newState = Object.assign({}, state);
      delete newState.show;
      return newState;

pero en el libro vi otro patrón

return Object.assign({}, state, { name: undefined } )

Answer 14

utilidad;))

const removeObjectField = (obj, field) => {

    // delete filter[selectName]; -> this mutates.
    const { [field]: remove, ...rest } = obj;

    return rest;
}

tipo de acción

const MY_Y_REMOVE = ''MY_Y_REMOVE'';

creador de acción

const myYRemoveAction = (c, y) => {

    const result = removeObjectField(c, y);

        return dispatch =>
            dispatch({
                type: MY_Y_REMOVE,
                payload: result
            })
    }

reductor

export default (state ={}, action) => {
  switch (action.type) {
    case myActions.MY_Y_REMOVE || :
      return { ...state, c: action.payload };
    default:
      return state;
  }
};

Answer 15

function dissoc(key, obj) {
  let copy = Object.assign({}, obj)
  delete copy[key]
  return copy
}

Además, si busca un kit de herramientas de programación funcional, mire a Ramda .