Usando la programación de React (JSX) y he encontrado el siguiente código:

range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)

Quiero saber qué hace la longitud: { length: max - min + 1 } y el subrayado: (_, i) => min + i) hace y regresa.

He intentado leer los documentos de Array.from y todavía no entiendo qué significan la longitud y el subrayado.

¿Hay páginas en las que pueda aprender esos dos length y _?

¡Gracias!

0
MaakuD 2 oct. 2019 a las 06:15

1 respuesta

La mejor respuesta

Aquí hay una buena explicación de Array.from. De los documentos, podemos ver que Array.from toma 1-3 argumentos.

Array.from (arrayLike [, mapFn [, thisArg]])

Con un argumento, intenta convertir lo que se pasó como argumento en una matriz. Entonces: Array.from("foo") se convierte en ["f", "o", "o"]. ¡Fresco!

Con dos argumentos, Array.from usa el segundo argumento como una función e intenta aplicarlo a cada elemento de la matriz que se creó a partir del primer argumento.

Entonces, si tuviera Array.from("foo", el => el.toUpperCase());, convertiría la cadena "foo" en ["f", "o", "o"] y luego ejecutaría la función el => el.toUpperCase() en cada letra y terminaría con ["F", "O", "O"]. ¡Limpio!

Tienes esto:

Array.from({ length: max - min + 1 }, (_, i) => min + i)

Es similar a nuestro ejemplo de Foo. El primer argumento se convierte en una matriz y el segundo argumento es una función que se aplica a cada elemento de la nueva matriz.

Esto es como Array.map !

Entonces, primero, averigüemos qué sucede si hacemos Array.from con un objeto: Array.from({ length: 3 }). ¡Guau! Obtenemos [undefined, undefined, undefined].

Para cada elemento, ejecuta la función dada en el segundo argumento: (_, i) => min + i). Mirando la documentación del mapa podemos ver

arr.map (función de devolución de llamada (valorActual [, índice [, matriz]])

De modo que _ es una variable que contiene el valor actual del elemento en la matriz. El valor de cada elemento es undefined, por lo que utilizaron un guión bajo. No les importa el valor. Lo que les importa es el índice. Y ese es el segundo argumento de la función de mapa.

Probémoslo: Array.from({ length: 3 }, (_, i) => i) nos da [0, 1, 2]. ¡Impresionante! Entonces toma el objeto, crea una matriz a partir de él y luego lo usa para asignar el índice de cada elemento a una nueva matriz.

Aún así, hay algunas cosas mínimas / máximas allí. Creo que puedes ver por donde está yendo.

Envuelven la función cool en otra función y pasan en el min (el valor inicial) y el max (el valor final). Luego crean una matriz de valores indefinidos de esa longitud. ENTONCES llene la matriz con los índices ajustados desde el mínimo. Entonces, range(5, 10) probablemente nos da [5...10]. Vamos a intentarlo.

const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i); nos da [5, 6, 7, 8, 9, 10]. ¡Dulce!

Ahora, tenías range: (min, max) => ... no const range = (min, max) => .... Probablemente se deba a que su rango es un método de un objeto. Probablemente haya algún código en alguna parte que diga const somelibrary = { range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)} o algo similar. Y para llamar al método de rango, necesitas hacer somelibrary.range(5, 10). Pero el resultado es el mismo.

Termina con una matriz llena de valores que comienzan en min y terminan en max.

¡Espero que esto ayude!

4
Will 2 oct. 2019 a las 04:11