diff options
Diffstat (limited to 'files/es/web/javascript/reference/global_objects/array/map/index.html')
| -rw-r--r-- | files/es/web/javascript/reference/global_objects/array/map/index.html | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/global_objects/array/map/index.html b/files/es/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..8b958a4945 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,360 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/map +tags: + - Array + - Arreglo + - Callback + - ECMAScript5 + - Polifill + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>map()</strong></code> crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.</p> + +<pre class="brush: js">var numbers = [1, 5, 10, 15]; +var doubles = numbers.map(function(x) { + return x * 2; +}); +// doubles is now [2, 10, 20, 30] +// numbers is still [1, 5, 10, 15] + +var numbers = [1, 4, 9]; +var roots = numbers.map(function(num) { + return Math.sqrt(num); +}); +// roots is now [1, 2, 3] +// numbers is still [1, 4, 9] +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>var nuevo_array = arr</var>.map(function <var>callback(currentValue, index, array) { + // Elemento devuelto de nuevo_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que producirá un elemento del nuevo array, recibe tres argumentos:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>El elemento actual del array que se está procesando.</dd> + <dt><code>index</code></dt> + <dd>El índice del elemento actual dentro del array.</dd> + <dt><code>array</code></dt> + <dd>El array sobre el que se llama <code>map.</code></dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Valor a usar como <code>this </code>al ejecutar <code>callback</code>.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>map</code> llama a la función <code>callback</code> provista <strong>una vez por elemento</strong> de un array, en orden, y construye un nuevo array con los resultados. <code>callback</code> se invoca sólo para los índices del array que tienen valores asignados; no se invoca en los índices que han sido borrados o a los que no se ha asignado valor.</p> + +<p><code>callback</code> es llamada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array que se está recorriendo.</p> + +<p>Si se indica un parámetro <code>thisArg</code> a un <code>map</code>, se usará como valor de <code>this</code> en la función <code>callback</code>. En otro caso, se pasará {{jsxref("Global_Objects/undefined", "undefined")}} como su valor <code>this</code>. El valor de <code>this</code> observable por el <code>callback</code> se determina de acuerdo a las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">reglas habituales para determinar el valor this visto por una función.</a></p> + +<p><code>map</code> no modifica el array original en el que es llamado (aunque <code>callback</code>, si es llamada, puede modificarlo).</p> + +<p>El rango de elementos procesado por <code>map</code> es establecido antes de la primera invocación del <code>callback</code>. Los elementos que sean agregados al array después de que la llamada a <code>map </code>comience no serán visitados por el <code>callback</code>. Si los elementos existentes del array son modificados o eliminados, su valor pasado al <code>callback</code> será el valor en el momento que el <code>map</code> lo visita; los elementos que son eliminados no son visitados.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Procesar un array de números aplicándoles la raíz cuadrada</h3> + +<p>El siguiente código itera sobre un array de números, aplicándoles la raíz cuadrada a cada uno de sus elementos, produciendo un nuevo array a partir del inicial.</p> + +<pre class="brush: js">var numeros= [1, 4, 9]; +var raices = numeros.map(Math.sqrt); +// raices tiene [1, 2, 3] +// numeros aún mantiene [1, 4, 9] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Usando map para dar un nuevo formato a los objetos de un array</h3> + +<p>El siguiente código toma un array de objetos y crea un nuevo array que contiene los nuevos objetos formateados.</p> + +<pre class="brush: js">var kvArray = [{clave:1, valor:10}, + {clave:2, valor:20}, + {clave:3, valor: 30}]; + +var reformattedArray = kvArray.map(function(obj){ + var rObj = {}; + rObj[obj.clave] = obj.valor; + return rObj; +}); + +// reformattedArray es ahora [{1:10}, {2:20}, {3:30}], + +// kvArray sigue siendo: +// [{clave:1, valor:10}, +// {clave:2, valor:20}, +// {clave:3, valor: 30}] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapear un array de números usando una función con un argumento</h3> + +<p>El siguiente código muestra cómo trabaja <code>map </code>cuando se utiliza una función que requiere de un argumento. El argumento será asignado automáticamente a cada elemento del arreglo conforme <code>map </code>itera el arreglo original.</p> + +<pre class="brush: js">var numeros = [1, 4, 9]; +var dobles = numeros.map(function(num) { + return num * 2; +}); + +// dobles es ahora [2, 8, 18] +// numeros sigue siendo [1, 4, 9] +</pre> + +<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Usando <code>map</code> de forma genérica</h3> + +<p>Este ejemplo muestra como usar <code>map </code>en {{jsxref("Global_Objects/String", "String")}} para obtener un arreglo de bytes en codifcación ASCII representando el valor de los caracteres:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var valores = map.call('Hello World', function(char) { return char.charCodeAt(0); }); +// valores ahora tiene [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Usando <code>map</code> genérico con <code>querySelectorAll</code></h3> + +<p>Este ejemplo muestra como iterar sobre una colección de objetos obtenidos por <code>querySelectorAll</code>. En este caso obtenemos todas las opciones seleccionadas en pantalla y se imprimen en la consola:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = [].map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<h3 id="Usando_map_para_invertir_una_cadena">Usando <code>map</code> para invertir una cadena</h3> + +<pre class="brush: js">var str = '12345'; +[].map.call(str, function(x) { + return x; +}).reverse().join(''); + +// Salida: '54321' +// Bonus: usa'===' para probar si la cadena original era un palindromo +</pre> + +<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Caso de uso engañoso</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirado por este artículo)</a></p> + +<p>Es común utilizar el callback con un argumento (el elemento siendo pasado). Ciertas funciones son también usadas comunmente con un argumento, aún cuando toman argumentos adicionales opcionales. Estos hábitos pueden llevar a comportamientos confusos.</p> + +<pre class="brush: js">// Considera: +['1', '2', '3'].map(parseInt); +// Mientras uno esperaría [1, 2, 3] +// en realidad se obtiene [1, NaN, NaN] + +// parseInt se usa comúnmente con un argumento, pero toma dos. +// El primero es una expresión y el segundo el radix. +// a la función callback, Array.prototype.map pasa 3 argumentos: +// el elemento, el índice y el array. +// El tercer argumento es ignorado por parseInt, pero no el segundo, +// de ahí la posible confusión. Véase el artículo del blog para más detalles + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// El resultado es un arreglo de números (como se esperaba) + +// Un modo más simple de lograr lo de arriba, mientras de evita el "gotcha": +['1', '2', '3'].map(Number); // [1, 2, 3] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>map</code> fue agregado al estandar ECMA-262 en la 5th edición; por lo tanto podría no estar presente en todas la implementaciones del estándar. Puedes sobrepasar esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>map</code> en implementaciones que no lo soportan de forma nativa. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5th edición, asumiendo {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, y {{jsxref("Global_Objects/Array", "Array")}} tienen sus valores originales y que el <code>callback.call</code> evalua el valor original de <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> |