¿Porqué razón no funciona el mapeo de una matriz construida en JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar plus?
Stage
For the sake of demonstration, let's say you need to generate an array of numbers from 0 to 99. How could you do this? Here is an option:
const arr = []; for (let i = 0; i <100; i ++) {arr [i] = i; }
Si eres como yo, ver un bucle tradicional en JavaScript te hace sentir un poco incómodo. De hecho, no he escrito un bucle tradicional en años gracias a las funciones de orden superior como mapa, filtro y reducción. Tal vez no has tenido contacto con la programmingConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura plus funcional y estás pensando que la solución anterior parece estar perfectamente bien. Técnicamente lo es, pero después de haber probado la magia de las funciones de orden superior, probablemente estás pensando, "There must be a better way". My first reaction to this problem was: "I know! I will create an empty array of length 100 and map the indices of each element ». JavaScript allows you to create an empty array of length n with the array constructor, like this:
const arr = Array (100);
Perfect, right? I have an array of length 100, so now I just need to map the index of each element.
const array = Array (100) .map ((_, i) => i); console.log (arr [0] === undefined); // true
What happen!? The first element of the array should be 0, but it is actually undefined!
Explanation
There is an important technical distinction that I need to make here to explain why this happened. Internally, JavaScript arrays are objects, with numbers as keys. For example:
['a', 'b', 'c']
is essentially equivalent to this object:
{0: 'a', 1: 'b', 2: 'c', length: 3}
When accessing the element at index 0 of an array, you are actually only accessing an object property whose key is 0. This is important because when you think of arrays as objects in conjunction with how these are implemented higher-order functions (don't worry, I did that part for you), the cause of our problem makes sense.
When a new array is created with the array constructor, a new array object is created with its length property set to the value you passed in, but otherwise the object is a void. There are no index keys in the object representation of the array.
{// No index keys! length: 100}
You get undefined when you try to access the value of the array at index 0, but it is not that the undefined value is stored at index 0, it is that the default behavior in JavaScript is to return undefined if you try to access the value of an object for a key that does not exist.
It happens that higher-order functions map, reduce, filter and iterate over the index keys of the array object from 0 to length, but the callback is only executed if the key exists in the object. This explains why our callback is never called and nothing happens when we call the map function on the array - there are no index keys!
Solution
As you already know, what we need is an array whose internal representation of objects contains a key for each number from 0 to length. The best way to do this is to spread the array into an empty array.
const arr = [... Array (100)]. map ((_, i) => i); console.log (arr [0]); // 0
Spreading the array into an empty array results in an array that is filled with undefined elements at each index.
{0: undefined, 1: undefined, 2: undefined, ... 99: undefined, length: 100}
This is because the extent operator is simpler than the map function. It just loops the array (or any other iterable, really) from 0 to length and creates a new index key on the attached array with the value returned by the scatter array at the current index. Since JavaScript returns undefined information from our hash array in each of its indexes (remember that it does this by default because it doesn't have the index key for that value), we end up with a new array that is actually filled with keys of index and therefore mappable (and reducible, filterable, and fit for each).
conclusion
We discovered some of the implications of arrays being represented internally as objects in Javascript, and we learned the best way to create arbitrary length arrays filled with whatever value you need.
As always, you can continue browsing this website where you will find the best courses in JavaScript.
