"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Una guía para dominar las matrices de JavaScript

Una guía para dominar las matrices de JavaScript

Publicado el 2024-08-01
Navegar:221

A Guide to Master JavaScript Arrays

Las matrices son una de las estructuras de datos más utilizadas en JavaScript. Le permiten almacenar múltiples valores en una sola variable y vienen con un amplio conjunto de funciones integradas que hacen que manipular y trabajar con datos sea sencillo y eficiente. En este artículo, exploraremos las funciones de matriz de JavaScript en detalle, brindando explicaciones, ejemplos y comentarios para ayudarlo a dominarlas.

Introducción a las matrices en JavaScript

Una matriz es una colección ordenada de elementos que pueden contener diferentes tipos de datos, incluidos números, cadenas, objetos e incluso otras matrices.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Creando matrices

Las matrices se pueden crear usando literales de matriz o el constructor de matrices.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Propiedades de matriz

  • longitud: Devuelve el número de elementos de una matriz.
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Métodos de matriz

1. empujar()

Agrega uno o más elementos al final de una matriz y devuelve la nueva longitud.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. estallar()

Elimina el último elemento de una matriz y devuelve ese elemento.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. turno()

Elimina el primer elemento de una matriz y devuelve ese elemento.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. desactivar()

Agrega uno o más elementos al comienzo de una matriz y devuelve la nueva longitud.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concat()

Fusiona dos o más matrices y devuelve una nueva matriz.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. unirse ()

Une todos los elementos de una matriz en una cadena.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. revertir()

Invierte el orden de los elementos de una matriz.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. rebanada()

Devuelve una copia superficial de una parte de una matriz en un nuevo objeto de matriz.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. empalme()

Cambia el contenido de una matriz eliminando, reemplazando o agregando elementos.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. ordenar()

Ordena los elementos de una matriz en su lugar y devuelve la matriz ordenada.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. filtro()

Crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. mapa()

Crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz que llama.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. reducir()

Aplica una función contra un acumulador y cada elemento de la matriz para reducirlo a un solo valor.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14. buscar()

Devuelve el valor del primer elemento de la matriz que satisface la función de prueba proporcionada.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. buscaríndice()

Devuelve el índice del primer elemento de la matriz que satisface la función de prueba proporcionada.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. cada()

Prueba si todos los elementos de la matriz pasan la prueba implementada por la función proporcionada.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 



17. algunos()

Prueba si al menos un elemento de la matriz pasa la prueba implementada por la función proporcionada.

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

18. incluye()

Determina si una matriz incluye un determinado valor entre sus entradas.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

19. índice de()

Devuelve el primer índice en el que se puede encontrar un elemento determinado en la matriz, o -1 si no está presente.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

20. último índice de()

Devuelve el último índice en el que se puede encontrar un elemento determinado en la matriz, o -1 si no está presente.

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

21. plano()

Crea una nueva matriz con todos los elementos de la submatriz concatenados en ella de forma recursiva hasta la profundidad especificada.

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

22. mapa plano()

Primero asigna cada elemento usando una función de mapeo, luego aplana el resultado en una nueva matriz.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

23. de()

Crea una nueva instancia de matriz con copia superficial a partir de un objeto iterable o similar a una matriz.

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

24. esmatriz()

Determina si el valor pasado es una matriz.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

25. de()

Crea un

nueva instancia de Array con un número variable de argumentos, independientemente del número o tipo de argumentos.

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

Ejemplos prácticos

Ejemplo 1: eliminar duplicados de una matriz

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

Ejemplo 2: Sumar todos los valores en una matriz

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15

Ejemplo 3: aplanar una matriz profundamente anidada

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

Ejemplo 4: encontrar el valor máximo en una matriz

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

Ejemplo 5: creación de una matriz de pares clave-valor

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

Conclusión

Las matrices son una parte esencial de JavaScript y proporcionan una forma poderosa de administrar colecciones de datos. Al dominar las funciones de matriz, puede realizar manipulaciones de datos complejas con facilidad y escribir código más eficiente y legible. Esta guía completa ha cubierto las funciones de matriz más importantes en JavaScript, completa con ejemplos y explicaciones detalladas. Practique el uso de estas funciones y experimente con diferentes casos de uso para profundizar su comprensión y mejorar sus habilidades de codificación.

Declaración de liberación Este artículo se reproduce en: https://dev.to/imsushant12/a-guide-to-master-javascript-arrays-38bj?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3