Cómo usar la destrucción de matrices en JavaScript

En este tutorial, aprenderemos a usar destrucción de mesas en JavaScript ES6 con ejemplos.

Misión de desestructuración es una sintaxis especial introducida en JavaScript ES6 que nos permite extraer múltiples elementos de una matriz u objeto y asignarlos a variables, en una sola declaración.

Lea también: Desestructuración de objetos

Índice
  1. Desestructuración básica de arreglos
  2. Valores predeterminados
  3. Destrucción de tablas anidadas
  4. Omitir elementos usando comas
  5. Resto de elementos
  6. Operadores de descanso y propagación
  7. Destrucción de la declaración de retorno
  8. Destrucción de argumentos de función
  9. Casos prácticos de uso
    1. Al interior for-of lazo
    2. Al interior forEach Una función
    3. Dentro de la iteración del mapa
    4. Intercambio de valores
    5. expresión regular

Desestructuración básica de arreglos

Podemos extraer múltiples elementos de una matriz y asignarlos a variables usando destrucción de mesas en una sola declaración.

destrucción de mesas la sintaxis abreviada es bastante conveniente en comparación con nuestra forma tradicional de asignar elementos a las variables uno por uno.

const numbers = [1, 2, 3];

//const one   = numbers[0];         //Traditional Way
//const two   = numbers[1];
//const three = numbers[2];

const [one, two, three] = numbers;  //Array Destructuring

console.log(one);   //1
console.log(two);   //2
console.log(three); //3

También podemos declarar las variables antes asignadas:

let one, two, three;
const numbers = [1, 2, 3];

[one, two, three] = numbers;

console.log(one);   //1
console.log(two);   //2
console.log(three); //3

o podemos declararlos en línea:

const [one, two, three] = [1, 2, 3];

console.log(one);   //1
console.log(two);   //2
console.log(three); //3

Valores predeterminados

Podemos dar valores predeterminados a los elementos de la matriz que son indefinido o no existe.

const numbers = [1, undefined, 3];

const [one = "I", two = "II", three = "III", four = "IV"] = numbers;

console.log(one);   //1
console.log(two);   //II  <- default value since 'undefined'
console.log(three); //3 
console.log(four);  //IV  <- default value since doesn't exist

Vemos que el segundo elemento es indefinido y el cuarto elemento no existe. El valor predeterminado se asigna a la variable en ambos casos.

Destrucción de tablas anidadas

También podemos realizar anidados destrucción de mesas para obtener elementos de una matriz anidada en niveles más profundos:

const numbers = [1, 2, [9, 10, [11, 12]]];

const [one, two, [nine, ten, [eleven, twelve]]] = numbers

console.log(one)    //1
console.log(nine)   //9
console.log(eleven) //11

Una alternativa para anidado destrucción de mesas es usar ES9 Array.flat() método, que aplana la matriz anidada en una matriz normal:

const numbers = [1, 2, [9, 10, [11, 12]]];

const flattenNumbers = numbers.flat().flat();

const [one, two, nine, ten, eleven, twelve] = flattenNumbers;

console.log(one)    //1
console.log(nine)   //9
console.log(eleven) //11

Note que Array.flat() El método aplana la matriz anidada un nivel de profundidad. Es por eso que llamamos a este método dos veces numbers.flat().flat() aplanar dos niveles de profundidad.

También tenga en cuenta que Array.flat() El método es una versión más corta de Array.flatMap() método, ambos funcionan de la misma manera:

const numbers = [1, 2, [9, 10, [11, 12]]];

const flat = numbers.flat();
const flatMap = numbers.flatMap(x => x);

console.log(flat);        // [1, 2, 9, 10, [11, 12]]
console.log(flatMap);     // [1, 2, 9, 10, [11, 12]]

// flatten one more level deeper
const flatDeep = flat.flat();
const flatMapDeep = flatMap.flatMap(x => x);

console.log(flatDeep);    // [1, 2, 9, 10, 11, 12]
console.log(flatMapDeep); // [1, 2, 9, 10, 11, 12]

Omitir elementos usando comas

También podemos ignorar ciertos elementos usando un separador de coma. Considere el primer y cuarto elemento de la matriz:

let [one, , , four] = [1, 2, 3, 4];

console.log(one);   //1
console.log(four);  //4

Aquí, dos separadores de coma adicionales , , dentro destrucción de mesas omita el segundo y tercer elemento. Del mismo modo, saltemos el primer y tercer elemento:

let [ , two , , four] = [1, 2, 3, 4];

console.log(two);   //2
console.log(four);  //4

Resto de elementos

También podemos usar operador de descanso ... para obtener el resto de los elementos de una matriz como esta:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [one, two, three, ...others] = numbers;
console.log(one);    //1
console.log(two);    //1
console.log(three);  //1
console.log(others); //[4, 5, 6, 7, 8, 9]

Note que operador de descanso todavía se puede usar finalmente, de lo contrario arroja un error.

Operadores de descanso y propagación

A menudo nos confundimos con el operador Descanso y Extensión porque ambos usan el mismo ... sintaxis. Los operadores Rest y Spread se pueden usar juntos en destrucción de mesas declaración:

  • Operador de descanso: Usado en el la izquierda lado de la declaración a obtener el resto de los elementos de una mesa
  • Operador de transmisión: Usado en el correcto lado de la declaración a copiar elementos a una mesa
const tens      = [10, 20, 30];
const hundreds  = [100, 200];
const thousands = [1000];

      // Rest operator                     // Spread Operator
const [one, two, ten, twenty, ...others] = [1, 2, ...tens, ...hundreds, ...thousands];;

console.log(one);      //1
console.log(two);      //2
console.log(ten);      //10
console.log(twenty);   //20
console.log(others);   //[30, 100, 200, 1000]

Destrucción de la declaración de retorno

Podemos extraer datos de una matriz devuelta por una función usando destrucción de mesas de esta manera:

function getNumberArray() {
    return [1, 2, 3, 4, 5];
} 

var [one, ...others] = getNumberArray();

console.log(one);    //1
console.log(others); //[2, 3, 4, 5]

Destrucción de argumentos de función

Incluso podemos pasar una matriz a una función y luego extraer solo los elementos que queremos usando destrucción de mesas de esta manera:

const numbers = [1, 2, 3, 4, 5];

function getNumberArray( [ one, ...others ] ) {
  console.log(one);    //1
  console.log(others); //[2, 3, 4, 5]
}

getNumberArray(numbers);

Casos prácticos de uso

Al interior for-of lazo

Nosotros podemos usar destrucción de mesas al interior for-of bucle como este:

const numbers = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ];
for (let [ a, b, c ] of numbers) {
  console.log(a, b, c);
}
// 1 2 3
// 4 5 6
// 7 8 9

Al interior forEach Una función

Podemos iterar fácilmente sobre objetos usando destrucción de mesas.

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"

Vemos eso Object.entries devuelve una matriz con pares clave-valor extraídos usando [key, value] desestructurando

Dentro de la iteración del mapa

También podemos destruir pares clave-valor de un Mapa usando [key, value] desestructurando

var map = new Map();
map.set("one", 1);
map.set("two", 2);

for (var [key, value] of map) {
  console.log(key + " is " + value);
}
// one is 1
// two is 2

Iterar solo sobre claves:

for (var [key] of map) {
  // ...
}

O iterar solo sobre valores:

for (var [,value] of map) {
  // ...
}

Intercambio de valores

Es bastante interesante intercambiar valores usando destrucción de mesas:

let one = 1;
let two = 2;

[one, two] = [two, one];

console.log(one);  //2
console.log(two);  //1

expresión regular

Funciones de expresiones regulares como match devuelve una matriz de elementos coincidentes, que se pueden asignar a variables usando destrucción de mesas:

const [a, b, c, d] = 'one two three'.match(/w+/g);

// a = 'one', b = 'two', c = 'three', d = undefined

Si quieres conocer otros artículos parecidos a Cómo usar la destrucción de matrices en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas