El autor del material, cuya traducción publicamos hoy, dice que en los últimos meses, al verificar las solicitudes de extracción, se encontró constantemente con las mismas cuatro deficiencias asociadas con el uso irracional de los métodos de matriz en JavaScript. Para reducir las fallas de código que aparecieron anteriormente en sus programas, escribió este artículo.
Reemplazar indexOf () con incluye ()
"Si está buscando algo en una matriz, use el método
indexOf() ". Conocí tal recomendación en uno de los cursos cuando estudié JavaScript. Esta recomendación es bastante normal, no se puede decir nada malo al respecto.
En MDN, puede descubrir que el método
indexOf() devuelve el primer índice por el cual se puede encontrar cierto elemento en la matriz. Esto significa que si planeamos usar este índice en el programa, el método
indexof() es ideal para encontrar elementos en matrices.
Pero, ¿qué sucede si solo necesitamos averiguar si hay un cierto elemento en la matriz o no? Es decir, no nos interesa el índice de este elemento, si está en la matriz, sino el hecho de su presencia o ausencia. Con este enfoque, nos sentimos bastante cómodos con un comando que devuelve
true o
false . En tales casos, recomiendo no usar el método
indexOf() , sino el método
indexOf() , que devuelve un valor booleano. Considere un ejemplo:
'use strict'; const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor', ]; console.log(characters.indexOf('hulk'));
Usando el método find () en lugar del método filter ()
El método
filter() es una herramienta muy útil. Sobre la base de una matriz, crea otra matriz que contiene los elementos de la matriz original que coinciden con la condición especificada. Como se puede entender por el nombre de este método, está destinado a filtrar matrices, durante las cuales generalmente se obtienen matrices que son más cortas que las originales.
¿Qué pasa si sabemos que después de filtrar la matriz, solo quedará un elemento? Por ejemplo, esto puede suceder cuando intenta filtrar elementos de la matriz en función de algún identificador único. En tal situación, no recomendaría usar el método
filter() , ya que la matriz que forma contendrá solo un elemento. Si estamos interesados en un elemento de matriz con un valor único, entonces vamos a trabajar con un valor único, y no se necesita una matriz para representar dicho valor.
Si hablamos sobre el rendimiento del método
filter() , resulta que para formar una lista de elementos correspondientes a la condición especificada cuando se llamó, tendría que mirar toda la matriz. Además, imagine que hay cientos de elementos en una matriz que satisfacen una condición dada. Esto dará como resultado que la matriz resultante sea bastante grande.
Para evitar entrar en tales situaciones, recomendaría usar el método
find() . Cuando se llama, recibe una devolución de llamada que describe la condición, muy similar a la utilizada con el método
filter() , pero el método
find() devuelve solo el primer elemento que coincide con la condición. Al mismo tiempo, este método deja de funcionar inmediatamente después de encontrar dicho elemento. Como resultado, no tiene que navegar por toda la matriz.
'use strict'; const characters = [ { id: 1, name: 'ironman' }, { id: 2, name: 'black_widow' }, { id: 3, name: 'captain_america' }, { id: 4, name: 'captain_america' }, ]; function getCharacter(name) { return character => character.name === name; } console.log(characters.filter(getCharacter('captain_america'))); // [ // { id: 3, name: 'captain_america' }, // { id: 4, name: 'captain_america' }, // ] console.log(characters.find(getCharacter('captain_america'))); // { id: 3, name: 'captain_america' }
Reemplazar el método find () con el método some ()
Debo admitir que la supervisión que discutiremos ahora, me he comprometido muchas veces. Luego me aconsejaron mirar
MDN y ver cómo mejorar lo que hice irracionalmente. En pocas palabras, esto es muy similar a lo que acabamos de ver cuando hablamos de los
indexOf() e
includes() .
En el caso anterior, vimos que el método
find() , como argumento, toma una devolución de llamada y devuelve un elemento de matriz. ¿Se puede llamar al método
find() la solución más exitosa si necesitamos averiguar si la matriz contiene un cierto valor o no? Quizás no, ya que este método devuelve el valor de un elemento de matriz, no un valor booleano.
En tal situación, recomendaría usar el método
some() , que devuelve un valor booleano.
'use strict'; const characters = [ { id: 1, name: 'ironman', env: 'marvel' }, { id: 2, name: 'black_widow', env: 'marvel' }, { id: 3, name: 'wonder_woman', env: 'dc_comics' }, ]; function hasCharacterFrom(env) { return character => character.env === env; } console.log(characters.find(hasCharacterFrom('marvel')));
Usar el método reduce () en lugar de una combinación de métodos filter () y map ()
Vale la pena decir que el método
reduce() no puede clasificarse como fácil de entender. Sin embargo, si lo que se puede hacer con él se realiza en dos pasos, utilizando los métodos
filter() y
map() combinados en una cadena, parece que algo en este enfoque está mal.
Digo que con este enfoque, hay que mirar la matriz dos veces. La primera pasada, realizada por el método
filter() , implica ver toda la matriz y crear una nueva matriz filtrada. Después de la segunda pasada, realizada por el método
map() , nuevamente, se crea una nueva matriz que contiene los resultados de la transformación de los elementos de la matriz obtenidos después de que se ejecutó el método
filter() . Como resultado, para llegar a la matriz terminada, se utilizan dos métodos. Cada método tiene su propia devolución de llamada, y durante la ejecución de dicha operación utilizando el método
filter() , se crea una matriz con la que ya no podemos trabajar.
Para reducir la carga en el sistema creado mediante el uso de dos métodos y aumentar la productividad de los programas, en tales casos, recomendaría usar el método
reduce() . El resultado será el mismo, pero el código será mejor. Este método le permite filtrar los elementos que nos interesan y agregarlos a la batería. La batería puede ser una variable numérica que almacena, por ejemplo, la suma de los elementos de la matriz, puede ser un objeto, una cadena o una matriz en la que podemos acumular los elementos que necesitamos.
En nuestro caso, dado que estamos hablando de usar el método
map() , recomendaría usar el método
reduce() con una matriz como acumulador. En el siguiente ejemplo, filtramos los elementos de la matriz que son objetos por el valor del campo
env y realizamos su conversión.
'use strict'; const characters = [ { name: 'ironman', env: 'marvel' }, { name: 'black_widow', env: 'marvel' }, { name: 'wonder_woman', env: 'dc_comics' }, ]; console.log( characters .filter(character => character.env === 'marvel') .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) ); // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ] console.log( characters .reduce((acc, character) => { return character.env === 'marvel' ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) : acc; }, []) ) // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ]
Resumen
En este artículo, examinamos algunos enfoques para el uso eficaz de los métodos de matriz en la resolución de diversos problemas. Creemos que las ideas en las que se basan las recomendaciones dadas por el autor de este artículo pueden ayudar a mejorar el código JS en otras situaciones.
Estimados lectores! ¿Alguna vez ha encontrado ejemplos de mala asignación de mecanismos de JavaScript?
