diff options
Diffstat (limited to 'files/es/web/javascript/reference/global_objects/array/slice/index.html')
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/slice/index.html | 287 |
1 files changed, 287 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/global_objects/array/slice/index.html b/files/es/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..e3ddd7e8a5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,287 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/slice +tags: + - Arreglo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p><code><font face="Open Sans, Arial, sans-serif">El método </font><strong>slice()</strong></code> devuelve una copia de una parte del array dentro de un nuevo array empezando por <em>inicio </em>hasta <em>fin</em> (<em>fin </em>no incluido). El array original no se modificará.</p> + +<p>El código fuente de esta demostración interactiva está alojado en un repositorio Github. Si desea contribuir con ella, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un <em>"pull request"</em>.</p> + +<h2 id="Sintaxis">Sintaxis </h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>inicio </var>[, <var>fin</var>]])</code></pre> + +<h2 id="Parámetros">Parámetros</h2> + +<dl> + <dt><code>inicio</code></dt> + <dd>Índice donde empieza la extracción. El primer elemento corresponde con el índice 0.</dd> + <dd>Si el índice especificado es negativo, indica un desplazamiento desde el final del array.<code> slice(-2)</code>extrae los dos últimos elementos del array</dd> + <dd>Si <code>inicio</code> es omitido el valor por defecto es <code>0</code>.</dd> + <dd>Si <code>inicio</code> es mayor a la longitud del array, se devuelve un array vacío.</dd> + <dt><code>fin</code></dt> + <dd>Índice que marca el final de la extracción. <code>slice</code> extrae hasta, pero sin incluir el final.</dd> + <dd><code>slice(1,4)</code> extrae desde el segundo elemento hasta el cuarto (los elementos con índices 1, 2, y 3).</dd> + <dd>Con un índice negativo, <code>fin</code> indica un desplazamiento desde el final de la secuencia. <code>slice(2,-1)</code> extrae desde el tercer hasta el penúltimo elemento en la secuencia.</dd> + <dd>Si <code>fin</code> es omitido, slice extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd> + <dd>Si <code>fin</code> es mayor a la longitud del array, <code>slice</code> extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h3 id="Valor_de_retorno"><code>Valor de retorno</code></h3> + +<p>Un nuevo array con los valores extraídos.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>slice</code> <strong>no modifica</strong> el array original. Devuelve una copia plana (<em>shallow copy</em>) de los elementos especificados del array original. Los elementos del array original son copiados en el array devuelto de la siguiente manera:</p> + +<ul> + <li>Para referencias de objeto ( <strong>no</strong> el objeto en sí ), <code>slice copia la referencia dentro del nuevo array</code>. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.</li> + <li>Para strings, numbers y boolean (<strong>no</strong> objetos {{jsxref("Global_Objects/String", "String")}} y {{jsxref("Global_Objects/Number", "Number")}}), <code>slice</code> copia los valores en el nuevo array. Los cambios a los string, numbers y boolean en un array no afectan a los del otro array.</li> +</ul> + +<p>Si un nuevo elemento es agregado a cualquiera de los arrays, el otro array no es afectado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Devolver_una_porción_de_un_array_existente">Ejemplo: Devolver una porción de un array existente</h3> + +<pre class="brush: js">var nombres = ['Rita', 'Pedro', 'Miguel', 'Ana', 'Vanesa']; +var masculinos = nombres.slice(1, 3); + +// masculinos contiene ['Pedro','Miguel'] +</pre> + +<h3 id="Ejemplo_Utilizando_slice">Ejemplo: Utilizando slice</h3> + +<p><span style="font-size: 14px; line-height: 1.5;">Presta especial atención a:</span></p> + +<ul> + <li>Valores de tipos básicos, como string o number, son copiados al nuevo array. Cambiar estos valores en la copia no afecta al array original.</li> + <li>Las referencias también se copian. Mismas referencias acceden al mismo objeto destino. Cambios en el objeto destino son compartidos por todos sus accesos.</li> +</ul> + +<p>En el siguiente ejemplo, <code>slice</code> crea un nuevo array, <code>nuevoCoche</code>, de <code>myCoche</code>. Los dos incluyen una referncia al objecto <code>miHonda</code> se cambia a púrpura, ambas matrices reflejan el cambio.</p> + +<pre class="brush: js"><code>var miHonda = { color: 'red', ruedas: 4, motor: { cilindros: 4, cantidad: 2.2 } }; +var miCoche = [miHonda, 2, 'Buen estado', 'comprado 1997']; +var nuevoCoche = miCoche.slice(0, 2);</code> + +// Muestra los valores de myCar, newCar y el color de myHonda.<code> +console.log('miCoche = ' + JSON.stringify(miCoche)); +console.log('nuevoCoche = ' + JSON.stringify(nuevoCoche)); +console.log('miCoche[0].color = ' + miCoche[0].color); +console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</code> + +// Cambia el color de miHonda. +miHonda.color = 'azul'; +console.log('El nuevo color de mi Honda es ' + miHonda.color); + +// Muestra el color de myHonda referenciado desde ambos arrays. <code> +console.log('miCoche[0].color = ' + miCoche[0].color);</code> + +console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</pre> + +<p>Este script escribe:</p> + +<pre class="brush: js"><code>miCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2, + 'buen estado', 'comprado 1997'] +nuevoCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2] +miCoche[0].color = rojo +nuevoCoche[0].color = rojo +El nuevo color de miHonda es azul +miCoche[0].color = azul +nuevoCoche[0].color = azul</code></pre> + +<h2 id="Objetos_array-like">Objetos array-like</h2> + +<div class="note"> +<p>Se dice que un objeto es <strong>array-like</strong> ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son <strong>números</strong> y en particular tiene una propiedad llamada <strong>length</strong>. Este hecho hace suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo. </p> +</div> + +<p>El método <code>slice</code> puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el método al objeto. El {{jsxref("Functions_and_function_scope/arguments", "arguments")}} dentro de una función es un ejemplo de un objeto parecido a arrays.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>El enlazado puede realizarse con la función <code>.call</code> de {{jsxref("Function.prototype")}} y puede ser abreviado también usando <code>[].slice.call(arguments)</code> en lugar de <code>Array.prototype.slice.call</code>. En cualquier caso, puede ser simplificado usando {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Coordinación_del_comportamiento_entre_navegadores">Coordinación del comportamiento entre navegadores</h2> + +<p> </p> + +<p>La especificación permite a los objetos del host ( entre ellos los objetos del DOM ) ser dependientes de la implementación. Esta <strong>NO</strong> obligatoriedad, origina diferencias en el comportamiento entre aquellos comprometidos con los estándares, como Mozilla, y los que no. En lo que concierne a <code>Array.prototype.slice</code> , por lo tanto, existen importantes incompatibilidades en IE < 9 . Versiones de IE a partir de la 9 permiten un comportamiento compatible más fiable. Se puede recurrir al “<em>shimming</em>” para alcanzar la compatibilidad en otros casos. Mientras otros navegadores modernos continúan mejorando para soportar esta habilidad, en la forma en que actualmente lo hacen Mozilla, Chrome, Safari, Opera e IE, los desarrolladores de código preocupados por el soporte DOM que confíen en este <em>shim</em> no deben dejarse engañar por la semántica, deben confiar de forma segura en ella para proporcionar el comportamiento estándar que aparentemente ahora es la norma.</p> + +<p>El <em>shim</em> también soluciona que IE pueda tratar con el caso de que el segundo argumento de <code>slice()</code> pueda ser un valor {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}} explícito. Esto era un problema en versiones anteriores de IE, pero todos los navegadores modernos, incluído IE >= 9, lo hacen actualmente.</p> + +<pre class="brush: js">/** + * <em>Shim</em> para "solucionar" la falta de soporte de IE (IE < 9) para aplicar slice + * sobre objetos del host, tal como NamedNodeMap, NodeList, y HTMLCollection + * (técnicamente, al ser los objetos del host dependientes de la implementación, + * al menos anteriormente a ES2015, IE no tenía la necesidad de trabajar de este modo). + * También funciona sobre strings, solucionando que IE < 9 admita un undefined explícito + * como segundo argumento (igual que en Firefox), y previniendo errores cuando se llama + * sobre otros objetos del DOM. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Fallará al usarse con elementos DOM en IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // Funcionará con arrays genuinos, objetos array-like, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // A IE < 9 no le gustan los undefined como argumento end. + end = (typeof end !== 'undefined') ? end : this.length; + + // Con objetos Array nativos, podemos usar la función slice + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Con objetos array-like debemos manejarlo por nuestra cuenta. + var i, cloned = [], + size, len = this.length; + + // Maneja valores negativos para el argumento "inicio" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Maneja valores negativos para el argumento "fin" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Tamaño esperado para el slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + <tr> + <td>ECMAScript 3ª edición</td> + <td>Estandar</td> + <td>Definición inicial Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>La tabla de compatibilidad en esta página esta generada desde datos estructurados. Si desea contribuir con los datos, por favor <em>"checkout" </em><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a> y envíenos un <em>"pull request"</em>.</p> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome para Android</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también </h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> |