logo

TechCodeview

¿Cómo eliminar un par clave-valor de un objeto JavaScript?

El objeto JavaScript es una poderosa estructura de datos que combina llaves y valores . A veces, necesitamos eliminar un valor-clave específico de un objeto. Se puede hacer utilizando los enfoques que se detallan a continuación.

eliminar-un-valor-clave-de-javascript-obj

¿Cómo eliminar un valor-clave de un objeto JavaScript?



Existen varios métodos que se pueden utilizar para eliminar una clave de un objeto JavaScript:

Tabla de contenidos

1. Usando los métodos reduce() y filter()

El reducir() y el filtrar() Los métodos de JavaScript se pueden utilizar juntos para eliminar una clave de un objeto JavaScript.



Sintaxis del método reduce() y filter():

Object.keys(object_name).filter(()=>{}).reducir(()=>{});>

Ejemplo:

El siguiente ejemplo de código implementa los métodos de filtro y reducción juntos para eliminar la clave de un objeto.

JavaScript 
let details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'age').reduce((newObj, clave) => { newObj[key] = detalles[key]; return newObj; }, {} ); console.log(detalles);>
Producción 
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explicación :



notas a pie de página de rebajas
  • El originaldetails>El objeto contiene propiedades para nombre, edad y país.
  • ElObject.keys(details)>El método devuelve una matriz que contiene las claves deldetails>objeto.
  • El.filter()>El método filtra la propiedad de edad de la matriz de claves.
  • El.reduce()>El método crea un nuevo objeto (newObj>) iterando sobre las claves filtradas y asignándolas al nuevo objeto.
  • Finalmente, el nuevo objeto sin la propiedad de edad se asigna nuevamente aldetails>variable y se registra en la consola.

2. Usando el operador de eliminación

El eliminar operador en JavaScript se puede utilizar para eliminar una propiedad (par clave-valor) de un objeto.

Sintaxis del operador de eliminación: 

delete objectName.propertyName;>

Ejemplo:

El siguiente código elimina la clave 'edad' del objeto, dejando solo las claves 'nombre' y 'país' en el objeto.

JavaScript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('Original Object:', details); delete details.age; console.log('Object after deleting age key:', details);>
Producción 
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }>

Explicación :

  • El originaldetails>El objeto contiene propiedades para nombre, edad y país.
  • Eldelete>El operador se utiliza para eliminar la propiedad de edad deldetails>objeto.
  • Después de eliminar la propiedad de edad, la modificacióndetails>El objeto se registra en la consola.

3. Desestructuración con el operador Rest

Desestructurando un objeto que utiliza el operador rest crea un nuevo objeto sin una propiedad especificada, manteniendo las propiedades restantes del objeto original.

Sintaxis para destruir con operador de descanso: 

const { propertyToRemove, ...rest } = objectName;>

Ejemplo:

El siguiente código utiliza la sintaxis de desestructuración para eliminar claves de un objeto en JavaScript.

JavaScript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('orignal object', details) // after using destructuring and rest operator  const { age, ...rest } = details; console.log(rest);>
Producción 
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explicación :

  • El originaldetails>El objeto contiene propiedades para nombre, edad y país.
  • La tarea desestructurante{ age, ...rest } = details;>extrae la propiedad de edad deldetails>objeto y lo asigna alage>variable. El resto de las propiedades se recopilan en un nuevo objeto llamadorest>.
  • Como resultado, elrest>El objeto contiene todas las propiedades del original.details>objeto excepto la propiedad de edad.
  • Elrest>Luego, el objeto se registra en la consola y muestra el objeto sin la propiedad de edad.

4. Usando Objeto.assign()

Usando Objeto.asignar() le permite crear un nuevo objeto sin una propiedad especificada copiando todas las propiedades excepto la que desea eliminar.

Sintaxis de object.assign(): 

const { age, ...rest } = Object.assign({}, details);>

Ejemplo:

.siguiente java

El siguiente código implementa el método Object.assign() para eliminar propiedades de un objeto.

JavaScript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);>
Producción 
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explicación :

  • ElObject.assign({}, details)>El método crea una copia superficial deldetails>objeto. Esto evita la modificación del original.details>objeto.
  • Luego, la desestructuración de objetos se utiliza para extraer la propiedad de edad del objeto copiado y asignarla alage>variable. El resto de las propiedades se recopilan en un nuevo objeto llamadorest>.
  • Como resultado, elrest>El objeto contiene todas las propiedades del original.details>objeto excepto la propiedad de edad.
  • Elrest>Luego, el objeto se registra en la consola y muestra el objeto sin la propiedad de edad.

5. Usando Object.fromEntries() y Object.entries()

El Entradas de objetos() se utilizará para convertir el objeto en una matriz de pares clave-valor. Entonces, usamos matriz.filtro() para excluir el par clave-valor con la clave especificada. Finalmente, usamos Object.fromEntries() para convertir la matriz filtrada nuevamente en un objeto.

Ejemplo:

El siguiente código implementa los métodos anteriores para eliminar la clave de un objeto en JavaScript.

milivecricket
JavaScript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; const { age, ...rest } = Object.fromEntries(  Object.entries(details).filter(([key]) =>clave !== 'edad')); consola.log(descanso);>
Producción 
{ name: 'Alex', country: 'Canada' }>

Explicación:

  • Object.entries(details)>convierte eldetails>objeto en una matriz de pares clave-valor.
  • .filter(([key]) =>clave !== 'edad')>filtra los pares clave-valor donde la clave no es igual a 'edad', eliminando efectivamente la propiedad de edad.
  • Object.fromEntries()>convierte la matriz filtrada de pares clave-valor nuevamente en un objeto.
  • Finalmente, la desestructuración de objetos se utiliza para extraer la propiedad de edad del resultado, que se asigna alage>variable, mientras que el resto de las propiedades se recopilan en un nuevo objeto llamadorest>.
  • Elrest>Luego, el objeto se registra en la consola y muestra el objeto sin la propiedad de edad.

6. Uso del método _.omit de la biblioteca Underscore.js para eliminar una clave del objeto

El guión bajo.js es una biblioteca de JavaScript que se puede incluir en un documento HTML a través de su enlace CDN y luego se le permite utilizar sus funciones incorporadas.

Sintaxis del método _.omit de la biblioteca Underscore.js:

objName = _.omit(objName, 'ketToRemove');>

Ejemplo:

El siguiente código explicará el uso de _.omitir() función para eliminar una clave del objeto JavaScript.

HTML 
     Eliminar clave del título del objeto JavaScript> encabezado> <body> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js' integrity= 'sha512-2V49R8ndaagCOnwmj8QnbT1Gz/rie17UouD9Re5WxbzRVUGoftCu5IuqqtAM9+UC3fwfHCSJR1hkzNQh/2wdtg==' crossorigin='anonymous' referrerpolicy='no-referrer'>guión><script>let detalles = { nombre: 'Alex', edad: 30, país: 'Canadá' };  console.log('Objeto antes de la eliminación: ', detalles);  detalles = _.omit(detalles, 'edad');  console.log('Objeto después de la eliminación: ', detalles);  secuencia de comandos> cuerpo> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Producción:</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-object/32/how-remove-key-value-pair-from-javascript-object-2.webp' alt="producción"></p> <p dir='ltr'>  <b>  <strong>Explicación</strong>  </b>  <span>:</span></p> <ul><li value='1'><span>La biblioteca Underscore.js se incluye en el archivo HTML mediante una etiqueta de secuencia de comandos.</span></li><li value='2'><span>Dentro de la etiqueta script, un objeto llamado</span><code class='hljs'>details></code><span>se define con propiedades para nombre, edad y país.</span></li><li value='3'><span>El</span><code class='hljs'>_.omit()></code><span>La función de Underscore.js se utiliza para eliminar la clave 'edad' del</span><code class='hljs'>details></code><span>objeto.</span></li><li value='4'><span>El</span><code class='hljs'>console.log()></code><span>Las declaraciones se utilizan para imprimir el objeto antes y después de la eliminación de la clave 'edad'.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Caso de uso de Eliminar una clave del objeto JavaScript</span></h2><h3><span>1.</span> <span>Método de claves de objeto JavaScript ()</span> </h3><p dir='ltr'><span>El</span>  <b><code class='hljs'> Object.keys()></code></b>   <b>  <strong>método</strong>  </b>  <span>en JavaScript se utiliza para recuperar una matriz de nombres de propiedades enumerables de un objeto. Devuelve una matriz que contiene las claves del objeto.</span></p> <h3><span>2.</span> <span>¿Cómo eliminar un objeto de una matriz de objetos usando JavaScript?</span> </h3><p dir='ltr'><span>Hay dos enfoques para resolver este problema que se analizan a continuación:</span></p> <ul><li value='1'> <span>Usando el método array.forEach()</span> </li><li value='2'> <span>Usando el método array.map()</span> </li></ul><h3><span>3.</span> <span>¿Cómo agregar y eliminar propiedades de objetos en JavaScript?</span> </h3><ul><li value='1'><span>Para agregar cualquier propiedad, se podría usar</span>  <i>  <em>nombre_objeto.nombre_propiedad = valor</em>  </i>   <b>  <strong> </strong>  </b>  <span>(o)</span>  <i>  <em>nombre_objeto[nombre_propiedad] = valor</em>  </i>  <span>.</span></li><li value='2'><span>Para eliminar cualquier propiedad, se podría utilizar fácilmente</span>  <i>  <em>eliminar nombre_objeto.nombre_propiedad (</em>  </i>  <span>o)</span>  <i>  <em>eliminar nombre_objeto[nombre_propiedad]</em>  </i>  <span>.</span></li></ul><p dir='ltr'>  <br></p>  <br>  <br></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Categoría</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/net-worth/">Valor Neto</a> </li><li> <a href="/dbms-tutorial/">Tutorial De Sgbd</a> </li><li> <a href="/docker-container/">Contenedor Acoplable</a> </li><li> <a href="/google-docs-tips/">Consejos Para Documentos De Google</a> </li><li> <a href="/gimp-tutorial/">Tutorial De Gimp</a> </li><li> <a href="/news/">Noticias</a> </li><li> <a href="/mysql-tutorial/">Tutorial De Mysql</a> </li><li> <a href="/mobile-phone-review/">Revisión Del Teléfono Móvil</a> </li><li> <a href="/linux-command/">Comando-Linux</a> </li><li> <a href="/dot-net/">Punto Net</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Diferencia entre VB.NET y Visual Basic</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Diferencia entre VB.NET y Visual Basic con Qué es VB.NET, VB.NET y Visual Basic, VB.NET vs C#, VB.NET vs Java, Palabras clave de VB.NET, Tipos de datos de VB.NET, Operadores de VB.NET, Bucles VB.NET, GUI VB.NET, etc.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/difference-between-vb"> <i class="fa fa-external-link"></i> Leer Más</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Artículos De Interés</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/combinational-logic-circuits">Circuitos lógicos combinacionales</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-10-100">¿Cuánto es el 10% de 100?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-centos">Diferencia entre el sistema operativo CentOS y Red Hat Enterprise Linux</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/python-program-check-prime-number">Programa Python para verificar números primos</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/rubina-dilaik">Rubina Dilaik</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Entradas Populares</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/c-string-find">cadena encontrar c ++</a>
</li><li><a href="/java-applet">subprograma subprograma</a>
</li><li><a href="/javascript-setinterval-method">establecer intervalo javascript</a>
</li><li><a href="/hibernate-tutorial">que es hibernar</a>
</li><li><a href="/latex-lists">lista de látex</a>
</li><li><a href="/java-string-format">cadena.formato java</a>
</li><li><a href="/abs-function-c">código c abs</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Todos Los Derechos Reservados |  <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>