Las matrices son una de las estructuras de datos más populares en JavaScript porque se utilizan para almacenar datos. Además, las matrices brindan muchas oportunidades para trabajar con estos mismos datos. Entendiendo que para aquellos que están al principio de la forma de aprender JavaScript, las matrices son uno de los temas más básicos, en este artículo me gustaría presentarles algunos trucos útiles que quizás no conozcan. Empecemos
1. Cómo dejar solo valores únicos en la matriz
Esta es una pregunta muy popular durante una entrevista para el puesto de desarrollador de Javascript. Aquí hay una solución rápida y fácil a este problema. Primero debe obtener los valores únicos de la matriz, para esto puede usar el
new Set() (
aprox. Re .: la estructura de datos Set almacena solo valores únicos ). A continuación, debe convertir la estructura de datos Establecer en una matriz. Quiero presentarles dos maneras de hacer esto: la primera, usando el método
from() , la segunda, usando el operador spread (
"…" ).
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];
Fácil, verdad?
2. Cómo reemplazar valores en una matriz
Hay situaciones en las que necesita reemplazar los valores de la matriz con otros valores. Hay un buen método para esto que quizás no haya conocido: el método de
splice(start, value to remove, values to add) , donde
start es el número de índice del que queremos eliminar los elementos de la matriz, el
value to remove es el número de elementos que queremos eliminar, y los
values to add son los elementos que queremos insertar en lugar de los eliminados:
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits);
3. Cómo transformar una matriz sin usar el método map()
Probablemente todos conocen el método de matriz
map() , pero hay otra solución que se puede usar para obtener un efecto similar y limpiar el código. Para hacer esto, podemos usar el método
from() :
const friends = [ { name: 'John', age: 22 }, { name: 'Peter', age: 23 }, { name: 'Mark', age: 24 }, { name: 'Maria', age: 22 }, { name: 'Monica', age: 21 }, { name: 'Martha', age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames);
4. Cómo borrar rápidamente una matriz
Por ejemplo, tenemos una matriz en la que hay muchos elementos. Necesitamos limpiarlo (no importa para qué propósito), mientras que no queremos eliminar elementos uno por uno. Esto es muy simple de hacer con una línea de código. Para borrar la matriz, necesitamos establecer la longitud de la matriz en 0, ¡y eso es todo!
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits);
5. Cómo convertir una matriz a un objeto
Esta situación ocurre: tenemos una matriz, pero necesitamos un objeto (nuevamente, no importa para qué propósito) con estos datos, y la forma más rápida de convertir una matriz en un objeto es usar el operador de propagación (
"..." ):
const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj);
6. Cómo llenar una matriz con los mismos valores
Existen diferentes situaciones en las que queremos crear una matriz y llenarla con algunos valores, o necesitamos una matriz con los mismos valores. El método
fill() para tales tareas es una gran solución:
const newArray = new Array(10).fill('1'); console.log(newArray);
7. Cómo combinar más de dos matrices
¿Sabes cómo combinar matrices en una sin usar el método
concat() ? Hay una manera fácil de combinar cualquier número de matrices en una matriz con una línea de código. Como probablemente ya haya entendido, el operador de propagación (
"..." ) es una herramienta bastante útil cuando se trabaja con matrices, como en este caso:
const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food);
8. Cómo encontrar la intersección de dos matrices
Puede enfrentar esta tarea en cualquier entrevista de JavaScript, porque su solución muestra su conocimiento de los métodos de matriz, así como su forma de pensar. Para encontrar los valores comunes de las dos matrices, utilizaremos uno de los métodos discutidos anteriormente en este artículo para asegurarnos de que los valores en la matriz que estamos verificando no estén duplicados. Además, utilizaremos los métodos
filter() e
includes() . Como resultado, obtenemos una matriz con elementos que están representados en ambas matrices:
const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues);
9. Cómo eliminar valores falsos de una matriz
Para comenzar, definamos valores falsos. En Javascript, los valores falsos son:
false ,
0 ,
"" ,
null ,
NaN e
undefined . Ahora podemos descubrir cómo eliminar dichos valores de nuestra matriz. Para lograr esto, necesitamos el método
filter() :
const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr);
10. Cómo obtener un valor de matriz aleatorio
A veces necesitamos seleccionar un valor de matriz aleatorio. Para hacer la solución simple, corta y rápida, podemos obtener un número de índice aleatorio de acuerdo con la longitud de la matriz. Echa un vistazo a este ejemplo:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor);
11. Cómo expandir la matriz en la dirección opuesta
Cuando necesitamos "voltear" nuestra matriz, no hay necesidad de crearla a través de bucles y funciones complejas, porque hay un método simple de matriz
reverse() que hace todo esto por nosotros, y con una línea de código podemos "voltear" nuestra matriz:
const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors);
12. método lastIndexOf()
JavaScript tiene un interesante
lastIndexOf(elem) que le permite encontrar el índice de la última aparición de un elemento
elem . Por ejemplo, si nuestra matriz tiene valores duplicados, podemos encontrar la posición de la última aparición en ella. Eche un vistazo al siguiente ejemplo de código:
const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex);
13. Cómo sumar todos los valores en una matriz
Otra pregunta popular durante una entrevista para un puesto de desarrollador de JavaScript. La suma de todos los elementos se puede encontrar en una línea de código, si conoce el método
reduce() :
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum);
Conclusión
En este artículo, te presenté 13 trucos útiles para ayudarte a escribir código limpio y conciso. Además, no olvide que hay muchos trucos diferentes que puede usar en Javascript y que vale la pena estudiar no solo para trabajar con matrices, sino también para otras estructuras de datos. Espero que les hayan gustado las soluciones presentadas en el artículo y las usen para mejorar el proceso de desarrollo.
¡Que tengas un buen código de escritura!