diff options
Diffstat (limited to 'files/es/web/javascript/referencia/objetos_globales/array/slice/index.html')
| -rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/array/slice/index.html | 287 |
1 files changed, 0 insertions, 287 deletions
diff --git a/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html b/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html deleted file mode 100644 index e3ddd7e8a5..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -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> |