Diferencias Entre Matrices Y Destrucción De Objetos En JavaScript

Las asignaciones de descarte en JavaScript proporcionan una forma SECA ordenada de extraer valores de matrices y objetos.

El propósito de este artículo es mostrar exactamente cómo funcionan las asignaciones no estructuradas de matrices y objetos en JavaScript.

Así que comencemos a descartar la matriz sin más problemas.

¿Qué es la destrucción de matrices?

Descartar una matriz es una técnica única que le permite extraer correctamente los valores de una matriz en una nueva variable.

Por ejemplo, en lugar de utilizar la técnica de asignación no estructurada de la matriz, copie los valores de la matriz en una nueva variable de la siguiente manera:

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const firstName = profile[0];
const lastName = profile[1];
const website = profile[2];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Tenga en cuenta que el fragmento anterior contiene una gran cantidad de código repetido que no es un método de codificación DRY ( D on't R epeat Y sí mismo).

Ahora veamos cómo la descomposición de la matriz hace que las cosas estén limpias y secas.

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const [firstName, lastName, website] = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Verá, como por arte de magia, tenemos tres nuevas variables (en, colocando nuestro código se ha limpiado firstName, lastNamey, websiteobjeto de matriz (a) [...]). Luego les profileasigné valores de matriz.

Es decir, le indiqué a la computadora que extrajera los valores de la matriz en las variables a laprofile izquierda del operador de asignación .

Por lo tanto, JavaScript profileanaliza la matriz y copia su primer valor ( "Oluwatobi") a la primera variable ( firstName) en la matriz no estructurada .

De manera similar, la computadora extrae el segundo profilevalor ( "Sofela") de la matriz en la segunda variable ( lastName) de la matriz no estructurada .

Finalmente, JavaScript copia el tercer profilevalor ( "codesweetly.com") de la matriz a la tercera variable ( website) de la matriz no estructurada .

Tenga en cuenta que el fragmento anterior se profilerefiere a la matriz y descompone la matriz. Sin embargo, también puede destruir la matriz directamente. Veamos como.

Cómo destruir la matriz directamente

Puede usar JavaScript para descomponer la matriz directamente de la siguiente manera:

const [firstName, lastName, website] = [
  "Oluwatobi", 
  "Sofela", 
  "codesweetly.com"
];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Suponga que desea separar las declaraciones de variables de esas asignaciones. En ese caso, puede manejarlo con JavaScript. Veamos como.

Cómo utilizar la descomposición de matrices al separar las declaraciones de variables de las asignaciones

Siempre que use una matriz no estructurada, puede usar JavaScript para separar las declaraciones de variables de sus asignaciones.

Aquí hay un ejemplo:

let firstName, lastName, website;

[firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

"Oluwatobi"¿Qué sucede si quiero asignarlo a una variable firstNamey quiero asignar el resto de los elementos de la matriz a otra variable? ¿Cómo lo haces? Averigüemos a continuación.

Cómo usar la descomposición de matriz para asignar el resto de una matriz literal a una variable

Con JavaScript, puede usar el operador rest en una matriz rota para asignar el resto de una matriz regular a una variable.

Aquí hay un ejemplo:

const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // ["Sofela", "codesweetly.com"]

Pruébelo con StackBlitz

Nota: Utilice siempre el operador rest como último elemento de la matriz de descarte para que no obtenga SyntaxError.

Ahora, ¿qué pasa si solo quieres extraer "codesweetly.com"? Las técnicas que se pueden utilizar se describen a continuación.

Cómo extraer el valor de cualquier índice mediante la descomposición de matrices

A continuación, se explica cómo utilizar el descarte de matriz para extraer valores en cualquier posición de índice en una matriz regular:

const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

En el fragmento anterior, utilicé una coma para omitir las variables en la primera y segunda posiciones de índice de la matriz que se va a destruir.

Al hacerlo, pude vincular la websitevariable al tercer valor de índice (es decir "codesweetly.com") de la matriz regular a la derecha del operador de asignación .

Sin embargo, puede haber valores que desee extraer de la matriz undefined. En ese caso, JavaScript proporciona una forma de establecer valores predeterminados para las matrices que desea destruir. Echemos un vistazo más de cerca a esto a continuación.

Cómo funcionan los valores predeterminados con las asignaciones de destrucción de matrices

Establecer un valor predeterminado es undefinedútil si el valor que desea extraer de la matriz no existe (o está configurado ).

A continuación, se explica cómo configurarlo en una matriz destructiva:

const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"];

console.log(firstName); // "Oluwatobi"
console.log(website); // "CodeSweetly"

Pruébelo con StackBlitz

El fragmento anterior "Tobi"establece y como valor predeterminado para la variable "CodeSweetly".firstNamewebsite

Por lo tanto, si intenta extraer el primer valor de índice de la matriz de la derecha, la computadora toma de forma predeterminada "CodeSweetly"- porque solo hay un valor de índice cero en - ["Oluwatobi"].

Entonces, firstName¿qué pasa si hay una necesidad de valorar el valor del intercambio websiteo? Nuevamente, puede usar Discard Array para completar su trabajo. Veamos como.

Cómo intercambiar los valores de las variables mediante la descomposición de matrices

Puede utilizar asignaciones de destrucción de matrices para intercambiar los valores de dos o más variables diferentes.

Aquí hay un ejemplo:

let firstName = "Oluwatobi";
let website = "CodeSweetly";

[firstName, website] = [website, firstName];

console.log(firstName); // "CodeSweetly"
console.log(website); // "Oluwatobi"

Pruébelo con StackBlitz

En el fragmento anterior, usamos la descomposición directa de matrices para reasignar variables firstNamey websitevariables con los valores de los literales de matriz a la derecha del operador de asignación .

Por lo tanto, firstNameel valor de "Oluwatobi"cambia a "CodeSweetly". Por otro lado, websiteel contenido de se "CodeSweetly"cambia a "Oluwatobi".

Tenga en cuenta que también puede usar el descarte de matriz para extraer valores de una matriz regular a los parámetros de una función. Esto se explica en detalle a continuación.

Cómo utilizar la descomposición de matrices para extraer valores de una matriz a parámetros de función

A continuación, se explica cómo utilizar el descarte de matriz para extraer valores de matriz en parámetros de función:

// Define an array with two items:
const profile = ["Oluwatobi", "Sofela"];

// Define a function with one destructuring array containing two parameters:
function getUserBio([firstName, lastName]) {
  return `My name is ${firstName} ${lastName}.`;
}

// Invoke getUserBio while passing the profile array as an argument:
getUserBio(profile);

// The invocation above will return:
"My name is Oluwatobi Sofela."

Pruébelo con StackBlitz

En el fragmento anterior, usando un parámetro de destrucción matriz, profileel valor de la matriz getUserBio's firstNamey lastNamese extrajo parámetros.

Nota: los parámetros no estructurados de la matriz, por lo general, la no estructura de los parámetros se llama voluntad .

Aquí hay otro ejemplo:

// Define an array with two string values and one nested array:
const profile = ["codesweetly.com", "Male", ["Oluwatobi", "Sofela"]];

// Define a function with two destructuring arrays containing a parameter each:
function getUserBio([website, , [userName]]) {
  return `${userName} runs ${website}`;
}

// Invoke getUserBio while passing the profile array as an argument:
getUserBio(profile);

// The invocation above will return:
"Oluwatobi runs codesweetly.com"

Pruébelo con StackBlitz

En el fragmento anterior, utilizando dos secuencias de parámetros de destrucción, profilelos valores de la matriz getUserBio's websitey userNamese extrajo parámetros.

Es posible que deba llamar a una función que contenga parámetros de destrucción sin pasar ningún argumento. En ese caso, debe utilizar una técnica que evite que el navegador lance TypeError.

Conozca las siguientes técnicas:

Cómo llamar a una función que contiene un parámetro de destrucción de matriz sin argumentos

Considere la siguiente función.

function getUserBio([firstName]) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Ahora getUserBiollamemos a la función sin pasar ningún argumento a los parámetros de destrucción.

getUserBio();

Pruébelo con CodeSandBox

getUserBioDespués de llamar a la función anterior, el navegador TypeError: undefined is not iterable. Lanza un error como.

Este TypeErrormensaje se produce porque la función que contiene el parámetro de destrucción espera especificar al menos un argumento.

Por lo tanto, puede evitar estos mensajes de error asignando argumentos predeterminados al parámetro de desestructuración.

Aquí hay un ejemplo:

function getUserBio([firstName] = []) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Observe que el fragmento de código anterior asigna una matriz vacía como argumento predeterminado para el parámetro de destrucción.

Ahora getUserBiollamemos a la función sin pasar ningún argumento a los parámetros de destrucción.

getUserBio();

Las salidas de la función:

"Do something else that does not need the destructuring parameter."
"My name is undefined."

Pruébelo con CodeSandBox

Tenga en cuenta que no tiene que utilizar una matriz vacía como argumento predeterminado para los parámetros de destrucción. nullO puede utilizar otros valores que no lo sean undefined.

Ahora que sabe cómo funciona el descarte de matrices, hablemos del descarte de objetos para que pueda ver la diferencia.

¿Qué es la destrucción de objetos en JavaScript?

Descartar un objeto es una técnica única que le permite extraer correctamente el valor de un objeto en una nueva variable.

Por ejemplo, en lugar de utilizar una técnica de asignación que destruye un objeto, extraiga el valor del objeto en una nueva variable de la siguiente manera:

const profile = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
};

const firstName = profile.firstName;
const lastName = profile.lastName;
const website = profile.website;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Tenga en cuenta que el fragmento anterior contiene una gran cantidad de código repetido que no es un método de codificación DRY ( D on't R epeat Y sí mismo).

Ahora veamos cómo las cosas se vuelven más limpias y secas con una tarea de destrucción de objetos.

const profile = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
};

const { firstName: firstName, lastName: lastName, website: website } = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Como puede ver, limpiamos mágicamente el código {...}colocando tres nuevas variables en la propiedad objeto ( ) profiley asignándoles los valores del objeto.

Es decir, le indiqué a la computadora que extrajera profileel valor del objeto en la variable a la izquierda del operador de asignación .

Por lo tanto, JavaScript profileanaliza "Oluwatobi"el objeto firstNamey copia su primer valor ( ) a la primera variable ( ) del objeto que lo destruye .

De manera similar, la computadora extrae el segundo profilevalor "Sofela"del objeto ( ) en la segunda variable del objeto de destrucción ( lastName).

Finalmente, JavaScript copia el tercer profilevalor "codesweetly.com"del objeto ( ) a la tercera variable del objeto de destrucción ( website).

Tenga en cuenta que { firstName: firstName, lastName: lastName, website: website }la clave es una referencia a profilela propiedad del objeto; el valor de la clave representa una nueva variable.

Estructura del objeto JavaScript Estructura de la asignación de destrucción

Alternativamente, puede usar una sintaxis abreviada para que su código sea más fácil de leer.

Aquí hay un ejemplo:

const profile = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
};

const { firstName, lastName, website } = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

En el fragmento de arriba, se redujo { firstName: firstName, age: age, gender: gender }a { firstName, age, gender }. Obtenga más información sobre las técnicas de taquigrafía aquí .

Tenga en cuenta que el fragmento anterior muestra cómo asignar el valor de un objeto a una variable cuando tanto la propiedad del objeto como la variable tienen el mismo nombre.

Sin embargo, también puede asignar el valor de la propiedad a una variable con un nombre diferente. Veamos como.

Cómo utilizar la destrucción de objetos cuando el nombre de la propiedad es diferente del nombre de la variable

En JavaScript, puede usar la destrucción de objetos para extraer el valor de una propiedad en una variable, incluso si tanto la propiedad como el nombre de la variable son diferentes.

Aquí hay un ejemplo:

const profile = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
};

const { firstName: forename, lastName: surname, website: onlineSite } = profile;

console.log(forename); // "Oluwatobi"
console.log(surname); // "Sofela"
console.log(onlineSite); // "codesweetly.com"
console.log(website); // "ReferenceError: website is not defined"

Pruébelo con CodeSandBox

En el fragmento anterior, la computadora extrajo con éxito profileel valor del objeto en una variable con un nombre forename, surnamey la onlineSitepropiedad -even y la variable tienen nombres diferentes.

Nota:const { firstName: forename } = profile es equivalente const forename = profile.firstNamea.

Aquí hay otro ejemplo:

const profile = {
  lastName: { familyName: "Sofela" }
};

const { lastName: { familyName: surname } } = profile;

console.log(surname); // "Sofela"

Pruébelo con StackBlitz

En el fragmento anterior, la computadora extrajo con éxito profileel valor del objeto en la surnamevariable, aunque la propiedad y la variable se nombraron de manera diferente .

Nota:const { lastName: { familyName: surname } } = profile es equivalente const surname = profile.lastName.familyNamea.

profileObserve que hemos estado haciendo referencia al objeto y desestructurando hasta ahora . Sin embargo, también puede destruir el objeto directamente. Veamos como.

Cómo destruir un objeto directamente

En JavaScript, puede destruir directamente el objeto de propiedad de la siguiente manera:

const { firstName, lastName, website } = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
};

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Suponga que desea separar las declaraciones de variables de esas asignaciones. En ese caso, puede manejarlo con JavaScript. Veamos como.

Cómo utilizar la descomposición de objetos al separar las declaraciones de variables de las asignaciones

Siempre que use la destrucción de objetos, puede usar JavaScript para separar las declaraciones de variables de sus asignaciones.

Aquí hay un ejemplo:

// Declare three variables:
let firstName, lastName, website;

// Extract values to the three variables above:
({ firstName, lastName, website } = {
  firstName: "Oluwatobi", 
  lastName: "Sofela", 
  website: "codesweetly.com"
});

// Invoke the three variables:
console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Pruébelo con StackBlitz

Nota:

Incluya la asignación que destruye el objeto entre paréntesis. Al hacerlo, la computadora reconoce que la destrucción del objeto es un objeto literal, no un bloque.
;Coloque un punto y coma () después del paréntesis de la asignación de destrucción del objeto. Si lo hace, evitará que la computadora interprete el paréntesis como el llamador de una función que puede estar en la línea anterior.

"Oluwatobi"¿Qué sucede si quiero asignarlo a una variable firstNamey quiero asignar los valores restantes de un objeto a otra variable? ¿Cómo puedo hacer esto? Averigüemos a continuación.

Cómo usar destruir objeto para asignar el resto del objeto a una variable

Con JavaScript, puede utilizar el operador rest dentro de un objeto destruido para asignar el resto del literal del objeto a una variable.

Aquí hay un ejemplo:

const { firstName, ...otherInfo } = {
  firstName: "Oluwatobi",
  lastName: "Sofela",
  website: "codesweetly.com"
};

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // {lastName: "Sofela", website: "codesweetly.com"}

Pruébelo con StackBlitz

Nota: Utilice siempre el operador de descanso como último elemento del objeto de descarte para que no lo obtenga SyntaxError.

En algunos casos, el valor a extraer del objeto de propiedad undefinedes. En ese caso, JavaScript proporciona una forma de establecer valores predeterminados para el objeto de destrucción. Echemos un vistazo más de cerca a esto a continuación.

Cómo funcionan los valores predeterminados con asignaciones que destruyen objetos

Establecer un valor predeterminado es undefinedútil si el valor que desea extraer del objeto no existe (o está configurado ).

A continuación, se explica cómo configurarlo dentro del objeto Propiedades de destrucción:

const { firstName = "Tobi", website = "CodeSweetly" } = {
  firstName: "Oluwatobi"
};

console.log(firstName); // "Oluwatobi"
console.log(website); // "CodeSweetly"

Pruébelo con StackBlitz

El fragmento anterior "Tobi"establece y como valor predeterminado para la variable "CodeSweetly".firstNamewebsite

Por lo tanto, si intenta extraer el valor de la segunda propiedad del objeto de la derecha, la computadora toma el valor predeterminado "CodeSweetly", porque solo hay una propiedad en , de manera predeterminada {firstName: "Oluwatobi"}.

Entonces, firstName¿qué pasa si hay una necesidad de valorar el valor del intercambio websiteo? Nuevamente, puede ejecutar el trabajo mediante la destrucción de objetos. Veamos el siguiente método.

Cómo intercambiar valores mediante la destrucción de objetos

Puede utilizar asignaciones de destrucción de objetos para intercambiar los valores de dos o más variables diferentes.

Aquí hay un ejemplo:

let firstName = "Oluwatobi";
let website = "CodeSweetly";

({ firstName, website } = {firstName: website, website: firstName});

console.log(firstName); // "CodeSweetly"
console.log(website); // "Oluwatobi"

Pruébelo con StackBlitz

El fragmento anterior utilizó la descomposición directa de objetos para reasignar variables firstNamey websitevariables con el valor del objeto literal a la derecha del operador de asignación .

Por lo tanto, firstNameel valor de "Oluwatobi"cambia a "CodeSweetly". Por otro lado, websiteel contenido de se "CodeSweetly"cambia a "Oluwatobi".

Tenga en cuenta que también puede utilizar la destrucción de objetos para extraer valores de propiedades a parámetros de función. Esto se explica en detalle a continuación.

Cómo utilizar la descomposición de objetos para extraer valores de propiedades a parámetros de función

A continuación, se explica cómo utilizar la destrucción de objetos para copiar el valor de una propiedad en el parámetro de una función:

// Define an object with two properties:
const profile = {
  firstName: "Oluwatobi",
  lastName: "Sofela",
};

// Define a function with one destructuring object containing two parameters:
function getUserBio({ firstName, lastName }) {
  return `My name is ${firstName} ${lastName}.`;
}

// Invoke getUserBio while passing the profile object as an argument:
getUserBio(profile);

// The invocation above will return:
"My name is Oluwatobi Sofela."

Pruébelo con StackBlitz

El fragmento de arriba, utiliza parámetros no estructurales del objeto para copiar profileel valor del objeto a la getUserBioSra. firstNameY los lastNameparámetros.

Nota: el parámetro no estructurado del objeto es, por lo general, la no estructura de los parámetros se llama voluntad .

Aquí hay otro ejemplo:

// Define an object with three-parent properties:
const profile = {
  website: "codesweetly.com",
  gender: "Male",
  fullName: {
    firstName: "Oluwatobi",
    lastName: "Sofela"
  }
};

// Define a function with two destructuring objects containing a parameter each:
function getUserBio({ website, fullName: { firstName: userName } }) {
  return `${userName} runs ${website}`;
}

// Invoke getUserBio while passing the profile object as an argument:
getUserBio(profile);

// The invocation above will return:
"Oluwatobi runs codesweetly.com"

Pruébelo con StackBlitz

En el fragmento de arriba, para copiar, usamos dos parámetros no estructurales profileel valor del objeto a la getUserBioSra. websiteY los userNameparámetros.

Nota: Si tiene alguna pregunta sobre los parámetros de destrucción anteriores, puede tener una mejor idea al revisar esta sección .

Es posible que deba llamar a una función que contenga parámetros de destrucción sin pasar ningún argumento. En ese caso, debe utilizar una técnica que evite que el navegador lance TypeError.

Conozca las siguientes técnicas:

Cómo llamar a una función que contiene parámetros no estructurados sin argumentos

Considere la siguiente función.

function getUserBio({ firstName }) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Ahora getUserBiollamemos a la función sin pasar ningún argumento a los parámetros de destrucción.

getUserBio();

Pruébelo con CodeSandBox

getUserBioDespués de llamar a la función anterior, el navegador TypeError: (destructured parameter) is undefined. Lanza un error como.

Este TypeErrormensaje se produce porque la función que contiene el parámetro de destrucción espera especificar al menos un argumento.

Por lo tanto, puede evitar estos mensajes de error asignando argumentos predeterminados al parámetro de desestructuración.

Aquí hay un ejemplo:

function getUserBio({ firstName } = {}) {
  console.log(
    "Do something else that does not need the destructuring parameter."
  );
  return `My name is ${firstName}.`;
}

Tenga en cuenta que el fragmento de código anterior asigna un objeto vacío como argumento predeterminado para el parámetro de destrucción.

Ahora getUserBiollamemos a la función sin pasar ningún argumento a los parámetros de destrucción.

getUserBio();

Las salidas de la función:

"Do something else that does not need the destructuring parameter."
"My name is undefined."

Pruébelo con CodeSandBox

Tenga en cuenta que no tiene que utilizar un objeto vacío como argumento predeterminado para el parámetro de destrucción. nullO puede utilizar otros valores que no lo sean undefined.

resumen

Descartar matrices y objetos también funciona. Las principales diferencias entre las dos asignaciones destructivas son:

Descartar una matriz extrae valores de la matriz. Sin embargo, destruir el objeto extrae el valor del objeto JavaScript.

Descripción general

En este artículo, expliqué cómo funciona la destrucción de matrices y objetos en JavaScript. También analizamos las principales diferencias entre las dos asignaciones destructivas.

¡gracias por leer!

Enlace: https://www.freecodecamp.org/news/array-vs-object-destructuring-in-javascript/

#javascript

What is GEEK

Buddha Community

Diferencias Entre Matrices Y Destrucción De Objetos En JavaScript

Lic. Adria Sepúlveda

1640928732