diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/global_objects/array/slice')
| -rw-r--r-- | files/pt-br/web/javascript/reference/global_objects/array/slice/index.html | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..daff58f51f --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,224 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>slice()</strong></code> retorna uma cópia de parte de um array a partir de um subarray criado entre as posições <code>início</code> e <code>fim</code> (<font face="consolas, Liberation Mono, courier, monospace"><span>fim</span></font> não é necessário) de um array original. O Array original não é modificado.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>início</var>[,<em>fim</em>]])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>início</code> {{optional_inline}}</dt> + <dd>Índice baseado em zero no qual se inicia a extração.</dd> + <dd>Como um índice negativo, <code>início</code> indica um deslocamento em relação ao fim da sequência. <code>slice(-2)</code> extrai os dois últimos elementos do array.</dd> + <dd>Se <font face="consolas, Liberation Mono, courier, monospace"><span>início</span></font> for omitido, <code>slice</code> inicia a partir do índice <font face="Consolas, Liberation Mono, Courier, monospace">0</font>.</dd> + <dd>Se <font face="consolas, Liberation Mono, courier, monospace"><span>início</span></font> for maior que o comprimento do array, é retornado um array vazio.</dd> + <dt><code>fim</code> {{optional_inline}}</dt> + <dd>Índice baseado em zero o qual é o final da extração. <code>slice</code> extrai até, não incluindo, <code>fim</code>.</dd> + <dd><code>slice(1,4)</code> extrai do segundo até o quarto elemento (elementos de índice 1, 2 e 3).</dd> + <dd>Como índice negativo, <code>fim</code> indica um deslocamento em relação ao fim do array. <code>slice(2,-1)</code> extrai o terceiro elemento através do segundo-para-o-último elemento no array.</dd> + <dd>Se <code>fim</code> for omitido ou for maior que o tamanho do array, <code>slice</code> considerará o último elemento do array como sendo o <code>fim </code>(<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Um novo array contendo os elementos extraídos.</p> + +<h2 id="Descrição">Descrição</h2> + +<p><code>slice</code> não altera o array original. Retorna uma cópia de elementos do array original. Elementos do array original são copiados para o array retornado da seguinte maneira:</p> + +<ul> + <li>Para referências de objeto (e não o objeto real), <code>slice</code> copia referencias de objeto em um novo array. Ambos, o original e o novo array referem-se ao mesmo objeto. Se um objeto referenciado é alterado, as alterações são visiveis em ambos, no novo array e no array original.</li> + <li>Para strings e números (não objetos {{jsxref("String")}} e {{jsxref("Number")}}), <code>slice</code> copia strings e números em um novo array. Alterações na string ou número em um array não afetam o outro array.</li> +</ul> + +<p>Se um novo elemento é adicionado a qualquer array, o outro não é afetado.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Retorna_uma_parte_de_um_array_existente">Retorna uma parte de um array existente</h3> + +<pre class="brush: js notranslate">// Exemplo para extrair 'Laranja' e 'Limao' do array frutas +var frutas = ['Banana', 'Laranja', 'Limao', 'Maçã', 'Manga']; +var citricos = frutas.slice(1, 3); + +// citricos contem ['Laranja','Limao'] +</pre> + +<h3 id="Usando_slice">Usando <code>slice</code></h3> + +<p>No exemplo seguinte, <code>slice</code> cria um novo array, <code>novoCarro</code>, do original <code>meuCarro</code>. Ambos incluem uma referência ao objeto, <code>meuHonda</code>. Quando a cor de <code>meuHonda</code> é alterada para roxo, ambos os arrays sofrem alteração.</p> + +<pre class="brush: js notranslate">// Usando slice para criar novoCarro a partir de meuCarro. +var meuHonda = { cor: 'vermelho', rodas: 4, motor: { cilindros: 4, tamanho: 2.2 } }; +var meuCarro = [meuHonda, 2, 'perfeitas condições', 'comprado em 1997']; +var novoCarro = meuCarro.slice(0, 2); + +// Exibe os valores de meuCarro, novoCarro, e a cor de meuHonda +// referenciado de ambos arrays. +console.log('meuCarro = ' + meuCarro.toSource()); +console.log('novoCarro = ' + novoCarro.toSource()); +console.log('meuCarro[0].cor = ' + meuCarro[0].cor); +console.log('novoCarro[0].cor = ' + novoCarro[0].cor); + +// Altera a cor de meuHonda. +meuHonda.cor= 'roxo'; +console.log('A nova cor do meu Honda é ' + meuHonda.cor); + +// Exibe a cor de meuHonda referenciado de ambos arrays. +console.log('meuCarro[0].cor = ' + meuCarro[0].cor); +console.log('novoCarro[0].cor = ' + novoCarro[0].cor); +</pre> + +<p>Esse script escreve:</p> + +<pre class="brush: js notranslate">meuCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}}, 2,'perfeitas condições', 'comprado em 1997'] +novoCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}},2] +meuCarro[0].cor = vermelho +novoCarro[0].cor = vermelho +A nova cor do meu Honda é roxo +meuCarro[0].cor = roxo +novoCarro[0].cor = roxo +</pre> + +<h2 id="Objetos_Array-like">Objetos Array-like</h2> + +<p>O método <code>slice</code> pode também ser chamado para converter objetos ou coleções Array-like em um novo Array. Você só precisa encadear o método no Array. Os {{jsxref("Functions/arguments", "arguments")}} dentro de uma função são um exemplo de 'objeto array-like'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Ligações podem ser feitas com a função .<code>call</code> de {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> ao invés de <code>Array.prototype.slice.call</code>. De qualquer forma, ela pode ser simplificada com {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Simplificando_o_comportamento_entre_navegadores"><span class="short_text" id="result_box" lang="pt"><span>Simplificando o comportamento entre navegadores</span></span></h2> + +<p><span id="result_box" lang="pt"><span>Embora os objetos de host (como objetos DOM) não sejam obrigados pela especificação a seguir o comportamento do Mozilla quando convertidos por Array.prototype.slice e IE <9 não o fazem</span></span>, versões do IE começando pela versão 9 permitem isso. “Shimming” pode permitir um comportamento confiável entre navegadores. Enquanto outros navegadores modernos continuem suportando essa habilidade, como atualmente IE, Mozilla, Chrome, Safari, e Opera fazem, desenvolvedores lendo (DOM-supporting) o código slice confiando neste shim não serão desencaminhados pela semântica; eles podem confiar seguramente na semântica para fornecer o agora aparentemente comportamento padrão de fato. (Isso também corrige o problema com IE < 9 onde o segundo argumento do <code>slice</code> era explicitamente {{jsxref("null")}}/{{jsxref("undefined")}})</p> + +<pre class="brush: js notranslate">(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Produzirá erro no IE < 9 + _slice.call(document.documentElement); + } catch (e) { + // Funciona para arrays, objetos array-like, + // NamedNodeMap (atributos, entidades, notações), + // NodeList (por exemplo, getElementsByTagName), HTMLCollection (por exemplo, childNodes), + // e não vai falhar em outros objetos do DOM (como falham no IE < 9) + Array.prototype.slice = function(begin, end) { + end = (typeof end !== 'undefined') ? end : this.length; + + // Para arrays, chamamos o método nativo + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Para array-like, o processo é manual. + var i, cloned = [], + size, len = this.length; + + // Lidando com valor negativo para "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Lidando com valor negativo para "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Tamanho real do corte feito pelo 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="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.slice")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> |