diff options
Diffstat (limited to 'files/pt-br/web/javascript/guide/indexed_collections/index.html')
| -rw-r--r-- | files/pt-br/web/javascript/guide/indexed_collections/index.html | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/guide/indexed_collections/index.html b/files/pt-br/web/javascript/guide/indexed_collections/index.html new file mode 100644 index 0000000000..5e9cea67f9 --- /dev/null +++ b/files/pt-br/web/javascript/guide/indexed_collections/index.html @@ -0,0 +1,452 @@ +--- +title: Coleções Indexadas +slug: Web/JavaScript/Guide/Indexed_collections +tags: + - Guia(2) + - JavaScript + - metodo +translation_of: Web/JavaScript/Guide/Indexed_collections +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div> + +<p class="summary">Este capítulo introduz coleções de dados que são ordenados por um valor indexado. Isso inclui construtores de arrays e array-like como objetos {{jsxref("Array")}} e {{jsxref("TypedArray")}}.</p> + +<h2 id="Objeto_Array">Objeto <code>Array</code></h2> + +<p>Um array é um conjunto de valores ordenados que você o referencia com um nome e um índice. Por exemplo, você pode ter um array chamado <code>emp</code> que contém nomes de funcionários indexados por seus números de funcionários. Então <code>emp[1]</code> poderia ser o funcionário número 1, <code>emp[2]</code> o funcionário número 2 e assim por diante.</p> + +<p>JavaScript não possui um tipo de dados array específico. No entanto, você pode usar o objeto predefinido <code>Array</code> e seus métodos para trabalhar com arrays em suas aplicações. O objeto <code>Array</code> tem métodos para manipular arrays de várias maneiras como join, reverse e sort. Ele tem uma propriedade para determinar o tamanho do array e outras propriedades para usar com expressões regulares.</p> + +<h3 id="Criando_um_array">Criando um array</h3> + +<p>As declarações a seguir criam arrays equivalentes:</p> + +<pre class="brush: js notranslate">var arr = new Array(elemento0, elemento1, ..., elementoN); +var arr = Array(elemento0, elemento1, ..., elementoN); +var arr = [elemento0, elemento1, ..., elementoN]; +</pre> + +<p><code>elemento0, elemento1, ..., elementoN</code> é uma lista de valores para os elementos do array. Quando esses valores são especificados, o array é inicializado com eles como elementos deste array. A propriedade do comprimento do array é definida pelo número de argumentos.</p> + +<p>A sintaxe dos colchetes é chamada de "array literal" ou "inicializador de array". É uma abreviação de outras formas de criação de array e é a forma preferida de criação. Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literal">Array literal</a> para detalhes.</p> + +<p>Para criar um array com tamanho diferente de zero mas sem nenhum item, qualquer esquema abaixo pode ser utilizado:</p> + +<pre class="brush: js notranslate">var arr = new Array(comprimentoDoArray); +var arr = Array(comprimentoDoArray); + +// Estes produzem exatamente o mesmo efeito +var arr = []; +arr.length = comprimentoDoArray; +</pre> + +<div class="note"> +<p><strong>Nota :</strong> No código acima, <code>comprimentoDoArray</code> deve ser um <code>Número</code>. De outra maneira, um array com um único elemento (o valor passado) será criado. Chamar <code>arr.length</code> retornará <code>comprimentoDoArray</code>, mas o array na verdade, contem elementos vazios (undefined). Executar um loop {{jsxref("Statements/for...in","for...in")}} no array, não retornará nenhum dos elementos do array.</p> +</div> + +<p>Além de poderem ser definidos como uma nova variável, como mostrado acima, arrays também podem ser atribuídos como uma propriedade de um novo objeto, ou de um objeto existente:</p> + +<pre class="brush: js notranslate">var obj = {}; +// ... +obj.prop = [elemento0, elemento1, ..., elementoN]; + +// OU +var obj = {prop: [elemento0, elemento1, ...., elementoN]} +</pre> + +<p>Se você deseja inicializar um array com um único elemento, e este elemento é um <code>Número</code>, você precisa usar a sintáxe dos colchetes. Quando um único valor de <code>Número</code> é passado para o construtor do Array(), ou para uma função, ele é interpretado como um <code>comprimentoDoArray</code>, e não como um elemento único.</p> + +<pre class="brush: js notranslate">var arr = [42]; // Cria um array com apenas um elemento: + // o número 42. + +var arr = Array(42); // Cria um array sem elementos + // e arr.length é definido como 42; isso é + // equivalente a: +var arr = []; +arr.length = 42; +</pre> + +<p>Chamar <code>Array(N)</code> resulta em um <code>RangeError</code>, se <code>N</code> é um número não inteiro cuja porção fracionária não é zero. O exemplo a seguir ilustra esse comportamento.</p> + +<pre class="brush: js notranslate">var arr = Array(9.3); // RangeError: Invalid array length +</pre> + +<p>Se o seu código precisa criar arrays com elementos singulares de um tipo de dados arbitrário, é mais seguro usar arrays literais. Ou então, crie um array vazio antes de adicionar um elemento singular nele.</p> + +<h3 id="Povoando_um_array">Povoando um array</h3> + +<p>Você pode povoar (inserir elementos) a um array atribuindo valores aos seus elementos. Por exemplo:</p> + +<pre class="brush: js notranslate">var emp = []; +emp[0] = 'Casey Jones'; +emp[1] = 'Phil Lesh'; +emp[2] = 'August West'; +</pre> + +<div class="note"> +<p><strong>Nota :</strong> se você fornece um valor não inteiro ao operador do array, como no código acima, a propriedade será criada no objeto representando o array, ao invés do elemento do array.</p> +</div> + +<pre class="brush: js notranslate">var arr = []; +arr[3.4] = 'Oranges'; +console.log(arr.length); // 0 +console.log(arr.hasOwnProperty(3.4)); // verdadeiro +</pre> + +<p>Você também pode povoar o array quando o cria:</p> + +<pre class="brush: js notranslate">var myArray = new Array('Olá', myVar, 3.14159); +var myArray = ['Manga', 'Maçã', 'Laranja'] +</pre> + +<h3 id="Referenciando_os_elementos_do_array">Referenciando os elementos do array</h3> + +<p>Você referencia os elementos do array através do uso de elementos numéricos ordinais. Por exemplo, suponha que você definiu o seguinte array:</p> + +<pre class="brush: js notranslate">var myArray = ['Vento', 'Chuva', 'Fogo']; +</pre> + +<p>Você então se refere ao primeiro elemento do array como em <code>myArray[0]</code> e ao segundo elemento do array como em <code>myArray[1]</code>. O índice do elemento começa com zero.</p> + +<div class="note"> +<p><strong>Nota :</strong> o operador do array (colchetes) também é usado para acessar as propriedades do array (arrays também são objetos em JavaScript). Por exemplo,</p> +</div> + +<pre class="brush: js notranslate">var arr = ['um', 'dois', 'três']; +arr[2]; // três +arr['length']; // 3 +</pre> + +<h3 id="Compreendendo_o_comprimento">Compreendendo o comprimento</h3> + +<p>Sobe o ponto de vista da implementação, arrays JavaScript armazenam na realidade elementos como propriedades de objetos padrões, usando o índice do array como o nome da propriedade. O comprimento da propriedade é especial: ele sempre retorna o índice do último mais um (no exemplo seguinte Dusty é indexado no 30, então cats.length retorna 30 + 1). Lembre-se, índices de arrays JavaScript são baseados no zero: eles começam no 0, não no 1. Isso significa que o comprimento da propriedade será um a mais que o maior índice armazenado no array:</p> + +<pre class="brush: js notranslate">var gatos = []; +gatos[30] = ['Dusty']; +console.log(gatos.length); // 31 +</pre> + +<p>Você também pode atribuir um valor à propriedade <code>length</code>. Ao escrever um valor menor que o número de itens armazenados, trunca o array: escrevendo zero limpa-o completamente:</p> + +<pre class="brush: js notranslate">var gatos = ['Dusty', 'Misty', 'Twiggy']; +console.log(gatos.length); // 3 + +gatos.length = 2; +console.log(gatos); // mostra "Dusty, Misty" - Twiggy foi removido + +gatos.length = 0; +console.log(gatos); // nada é apresentado; o array gatos está vazio + +gatos.length = 3; +console.log(gatos); // [undefined, undefined, undefined] +</pre> + +<h3 id="Iteração_em_arrays">Iteração em arrays</h3> + +<p>Uma operação comum é a de iterar sobre os valores de um array, processando cada elemento de alguma maneira. A maneira mais simples para fazer isso é como segue:</p> + +<pre class="brush: js notranslate">var cores = ['vermelho', 'verde', 'azul']; +for (var i = 0; i < cores.length; i++) { + console.log(cores[i]); +} +</pre> + +<p>Se você sabe que nenhum dos elemnetos no seu array é avaliado como <code>false</code> em um contexto booleano — se o seu array consiste apenas de nodos do <a href="/pt-BR/docs/DOM/Referencia_do_DOM" title="en-US/docs/DOM">DOM</a>, como exemplo, você pode usar um idioma mais eficiente:</p> + +<pre class="brush: js notranslate">var divs = document.getElementsByTagName('div'); +for (var i = 0, div; div = divs[i]; i++) { + /* Processa div de alguma forma */ +} +</pre> + +<p>Isso evita a sobrecarga da checagem do comprimento do array, e garante que a variável div seja reatribuida ao item atual cada vez que o loop for adicionado por conveniência.</p> + +<p>O método {{jsxref("Array.forEach", "forEach()")}} disponibiliza um outro jeito de iterar sobre/em um array:</p> + +<pre class="brush: js notranslate">var cores = ['vermelho', 'verde', 'azul']; +cores.forEach(function(cor) { + console.log(cor); +}); +// vermelho +// verde +// azul +</pre> + +<p>Alternativamente, você pode encurtar o código para o parâmetro do <code>forEach</code> com Arrow Functions ES6.</p> + +<pre class="notranslate"><code>var cores = ['vermelho', 'verde', 'azul']; +cores.forEach(cor => console.log(cor)); +// vermelho +// verde +// azul</code></pre> + +<p>A função passada para o <code>forEach</code> é executada uma vez para cada item no array, com o item do array passado como o argumento para a função. Valores não atribuídos não são iterados no loop <code>forEach</code>.</p> + +<p>Note que os elementos de um array que foram omitidos quando o array foi definido, não são listados quando iterados pelo <code>forEach</code>, mas são listados quando <code>undefined</code> foi manualmente atribuído ao elemento:</p> + +<pre class="brush: js notranslate">var array = ['primeiro', 'segundo', , 'quarto']; + +array.forEach(function(elemento) { + console.log(elemento); +}) +// primeiro +// segundo +// quarto + +if (array[2] === undefined) { + console.log('array[2] is undefined'); // verdadeiro +} + +array = ['primeiro', 'segundo', undefined, 'quarto']; + +array.forEach(function(elemento) { + console.log(elemento); +}); +// primeiro +// segundo +// undefined +// quarto</pre> + +<p>Como elementos JavaScript são salvos como propriedades de objetos padronizados, não é aconselhável iterar sobre arrays JavaScript usando loops {{jsxref("Statements/for...in","for...in")}}, porque elementos normais e todas as propriedades numeráveis serão listadas.</p> + +<h3 id="Métodos_dos_arrays">Métodos dos arrays</h3> + +<p>O objeto {{jsxref("Array")}} possui os seguintes métodos:</p> + +<p>{{jsxref("Array.concat", "concat()")}} une dois arrays e retorna um novo array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3'); +myArray = myArray.concat('a', 'b', 'c'); +// myArray agora é ["1", "2", "3", "a", "b", "c"] +</pre> + +<p>{{jsxref("Array.join", "join(deliminator = ',')")}} une todos os elementos de um array dentro de um string.</p> + +<pre class="brush: js notranslate">var myArray = new Array('Vento', 'Chuva', 'Fogo'); +var lista = myArray.join(' - '); // lista é "Vento - Chuva - Fogo" +</pre> + +<p>{{jsxref("Array.push", "push()")}} adiciona um ou mais elementos no fim de um array e retorna o comprimento resultante do array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2'); +myArray.push('3'); // myArray é agora ["1", "2", "3"] +</pre> + +<p>{{jsxref("Array.pop", "pop()")}} remove o último elemento de um array e retorna esse elemento.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3'); +var ultimo = myArray.pop(); +// myArray é agora ["1", "2"], ultimo = "3" +</pre> + +<p>{{jsxref("Array.shift", "shift()")}} remove o primeiro elemento de um array e retorna esse elemento.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3'); +var primeiro = myArray.shift(); +// myArray agora é ["2", "3"], primeiro é "1" +</pre> + +<p>{{jsxref("Array.unshift", "unshift()")}} adiciona um ou mais elementos ao início do array e retorna o novo comprimento do array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3'); +myArray.unshift('4', '5'); +// myArray torna-se ["4", "5", "1", "2", "3"]</pre> + +<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extrai uma seção de um array e retorna um novo array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('a', 'b', 'c', 'd', 'e'); +myArray = myArray.slice(1, 4); // inicia no índice 1 e extrai todos os elementos + // até o índice 3, retornado [ "b", "c", "d"] +</pre> + +<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} remove elementos de um array e (opcionalmente) o substitui, e retorna os itens que foram removidos do array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3', '4', '5'); +myArray.splice(1, 3, 'a', 'b', 'c', 'd'); +// myArray é agora ["1", "a", "b", "c", "d", "5"] +// Este código iniciou no índice um (ou onde o "2" estava), +// removeu 3 elementos a partir dali, e então inseriu todos os elementos +// consecutivos em seus lugares. +</pre> + +<p>{{jsxref("Array.reverse", "reverse()")}} transpõe (inverte) os elementos de um array, <em>in situ</em>: o primeiro elemento do array se torna o último e o último torna-se o primeiro, e retorna uma referência para o array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('1', '2', '3'); +myArray.reverse(); +// transpõe o array de modo que myArray = [ "3", "2", "1" ] +</pre> + +<p>{{jsxref("Array.sort", "sort()")}} ordena os elementos de um array <em>in situ</em>, e retorna uma referência para o array.</p> + +<pre class="brush: js notranslate">var myArray = new Array('Neve', 'Chuva', 'Fogo'); +myArray.sort(); +// ordena o array de modo que myArray = [ "Chuva", "Fogo", "Neve" ] +</pre> + +<p><code>sort()</code> também pode 'pegar' uma função callback para determinar como os elementos do array são comparados.</p> + +<p>O método sort, assim como outros métodos abaixo que tomam um callback são conhecidos como <em>métodos iterativos</em>, porque eles iteram sobre o array de alguma forma. Cada um pega um segundo argumento opcional chamado <code>thisObject</code>. Se fornecido, <code>thisObject</code> se torna o valor da palavra chave <code>this</code> dentro do corpo da função callback. Se não fornecido, como em outros casos onde uma função é invocada fora do contexto explícito de um objeto, <code>this</code> fará referência ao objeto global ({{domxref("window")}}).</p> + +<p>A função callback é na verdade chamada com três argumentos. O primeiro é o valor do item corrente, o segundo é o índice do array e o terceiro é uma referência ao próprio array. Funções javaScript ignoram qualquer argumento que não são nomeados na lista de parâmetros, portanto é seguro prover uma função callback que toma somente um único argumento, como a função <code>alert</code>.</p> + +<p>A função abaixo compara dois valores e retorna um dos tres valores: -1, 0 ou 1.</p> + +<p>Por exemplo, o seguinte trecho de código vai ordenar pela última letra da string:</p> + +<pre class="brush: js notranslate">var sortFn = function(a, b){ + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; +} +myArray.sort(sortFn); +// ordena o array de modo que myArray = ["Chuva","Neve","Fogo"]</pre> + +<ul> + <li>se <code>a</code> for menor que <code>b</code> pelo sistema de ordenação, retorna -1 (ou qualquer número negativo)</li> + <li>se <code>a</code> for maior que <code>b</code> pelo sistema de ordenação, retorna 1 (ou qualquer número positivo)</li> + <li>se <code>a</code> e <code>b</code> forem considerados equivalentes, returnará 0.</li> +</ul> + +<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} busca <code>searchElement</code> no array e retorna o índice da primeira ocorrência.</p> + +<pre class="brush: js notranslate">var a = ['a', 'b', 'a', 'b', 'a']; +console.log(a.indexOf('b')); // mostra 1 +// Agora tente novamente, iniciando após o último resultado de busca +console.log(a.indexOf('b', 2)); // mostra 3 +console.log(a.indexOf('z')); // mostra -1, porque 'z' não foi encontrado +</pre> + +<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} funciona como <code>indexOf</code>, mas começa no fim e busca de trás para a frente.</p> + +<pre class="brush: js notranslate">var a = ['a', 'b', 'c', 'd', 'a', 'b']; +console.log(a.lastIndexOf('b')); // mostra 5 +// Agora tente novamente, iniciando antes do último resultado de busca +console.log(a.lastIndexOf('b', 4)); // mostra 1 +console.log(a.lastIndexOf('z')); // mostra -1 +</pre> + +<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} executa um <code>callback</code> em cada item do array e retorna undefined.</p> + +<pre class="brush: js notranslate">var a = ['a', 'b', 'c']; +a.forEach(function(element) { console.log(elemento); }); +// mostra cada item por vez +</pre> + +<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} retorna um novo array do valor retornado da execução do callback em cada item do array.</p> + +<pre class="brush: js notranslate">var a1 = ['a', 'b', 'c']; +var a2 = a1.map(function(item) { return item.toUpperCase(); }); +console.log(a2); // logs ['A', 'B', 'C'] +</pre> + +<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} retorna um novo array contendo os items verdadeiros ao executar o callback.</p> + +<pre class="brush: js notranslate">var a1 = ['a', 10, 'b', 20, 'c', 30]; +var a2 = a1.filter(function(item) { return typeof item === 'number'; }); +console.log(a2); // mostra [10, 20, 30] +</pre> + +<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} retorna verdadeiro se o <code>callback</code> retornar verdadeiro para cada item no array.</p> + +<pre class="brush: js notranslate">function isNumber(valor) { + return typeof valor === 'number'; +} +var a1 = [1, 2, 3]; +console.log(a1.every(isNumber)); // mostra true +var a2 = [1, '2', 3]; +console.log(a2.every(isNumber)); // mostra false +</pre> + +<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} retorna verdadeiro se o <code>callback</code> retornar verdadeiro para pelo menos um item no array.</p> + +<pre class="brush: js notranslate">function isNumber(valor) { + return typeof valor === 'number'; +} +var a1 = [1, 2, 3]; +console.log(a1.some(isNumber)); // mostra true +var a2 = [1, '2', 3]; +console.log(a2.some(isNumber)); // mostra true +var a3 = ['1', '2', '3']; +console.log(a3.some(isNumber)); // mostra false +</pre> + +<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} aplica <code>callback(firstValue, secondValue)</code> para reduzir a lista de itens para um único valor e retorna este valor.</p> + +<pre class="brush: js notranslate">var a = [10, 20, 30]; +var total = a.reduce(function(primeiro, segundo) { return primeiro + segundo; }, 0); +console.log(total) // mostra 60 +</pre> + +<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} funciona como <code>reduce()</code>, mas inicia com o último elemento.</p> + +<p><code>reduce</code> e <code>reduceRight</code> são os métodos iterativos menos óbvios dos arrays. Eles devem ser usados para algorítmos que combinam dois valores de maneira recursiva com a finalidade de reduzir uma sequência para um único valor.</p> + +<h3 id="Arrays_multidimensionais">Arrays multidimensionais</h3> + +<p>Arrays podem ser aninhados, significando que um array pode conter outro array como seu elemento. Usando essa característica dos arrays JavaScript, arrays multidimensionais pode ser criados.</p> + +<p>O código a seguir cria dois arrays multidimensionais:</p> + +<pre class="brush: js notranslate">var a = new Array(4); +for (i = 0; i < 4; i++) { + a[i] = new Array(4); + for (j = 0; j < 4; j++) { + a[i][j] = '[' + i + ',' + j + ']'; + } +} +</pre> + +<p>Esse exemplo cria um array com as seguintes linhas:</p> + +<pre class="notranslate">Linha 0: [0,0] [0,1] [0,2] [0,3] +Linha 1: [1,0] [1,1] [1,2] [1,3] +Linha 2: [2,0] [2,1] [2,2] [2,3] +Linha 3: [3,0] [3,1] [3,2] [3,3] +</pre> + +<h3 id="Arrays_e_expressões_regulares">Arrays e expressões regulares</h3> + +<p>Quando um array é o resultado de uma equivalência entre uma expressão regular e um string, o array retorna propriedades e elementos que disponibilizam a informação sobre a correspondência. Um array é o valor retornado de {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, e {{jsxref("Global_Objects/String/split","String.split()")}}. Para informações sobre o uso de arrays com expressões regulares, veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">Expressões Regulares</a>.</p> + +<h3 id="Trabalhando_com_objetos_array-like">Trabalhando com objetos array-like</h3> + +<p>Alguns objetos JavaScript, como a {{domxref("NodeList")}} retornada pelo {{domxref("document.getElementsByTagName()")}} ou o objeto acessível dentro do {{jsxref("Functions/arguments","arguments")}} de uma função, se parecem e se comportam superficialmente como arrays, mas não compartilham de todos os seus métodos. O objeto <code>arguments</code> fornece um atributo {{jsxref("Global_Objects/Function/length","length")}} mas não implementa o método {{jsxref("Array.forEach", "forEach()")}}, por exemplo.</p> + +<p>Métodos Array prototype podem ser chamados contra outros objetos array-like. Por exemplo:</p> + +<pre class="brush: js notranslate">function printArguments() { + Array.prototype.forEach.call(arguments, function(item) { + console.log(item); + }); +} +</pre> + +<p>Métodos Array prototype também podem ser usados em strings, desde que eles forneçam acesso sequencial a seus caracteres de maneira similar às arrays:</p> + +<pre class="brush: js notranslate">Array.prototype.forEach.call('uma string', function(chr) { + console.log(chr); +});</pre> + +<h2 id="Arrays_Tipados">Arrays Tipados</h2> + +<p><a href="/pt-BR/docs/Web/JavaScript/Typed_arrays">Arrays tipados no JavaScript</a> são objetos array-like e provêm um mecanismo para acessar dados binários crus. Como você já sabe, objetos {{jsxref("Array")}} crescem e encolhem dinamicamente e podem ter um valor JavaScript. O motor do JavaScript executa otimizações para que os arrays sejam rápidos. Contudo, à medida que as aplicações web se tornam cada vez mais poderosas, com a adição de funcionalidades como manipulação de áudio e vídeo, acesso a dados crus usando <a href="/pt-BR/docs/WebSockets">WebSockets</a>, etc., ficou claro que existem momentos em que seria útil para o código JavaScript ser capaz de rapida e facilmente manipular dados binários crus em arrays tipados.</p> + +<h3 id="Buffers_e_views_arquitetura_do_array_tipado">Buffers e views: arquitetura do array tipado</h3> + +<p>Para alcançar máxima flexibilidade e eficiência, as views de array tipado do JavaScript dividem a implementação em <strong>buffers</strong> e <strong>views.</strong> Um buffer (implementado pelo objeto {{jsxref("ArrayBuffer")}}) é um objeto que representa um monte de dados; não possui nenhum formato específico e não oferece nenhum mecanismo para acessar seu conteúdo. Para acessar a memória contida em um buffer, você precisa usar uma view. Uma view provê um contexto — ou seja, um tipo de dado, um offset inicial e número de elementos — que transforma o dado em um array tipado real.</p> + +<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> + +<h3 id="ArrayBuffer">ArrayBuffer</h3> + +<p>O {{jsxref("ArrayBuffer")}} é um tipo de dado usado para representar um buffer de dados binários de tamanho fixo genérico. Você não pode manipular diretamente o conteúdo de um <code>ArrayBuffer;</code> ao invés disso, você deve criar uma view de array tipado ou uma {{jsxref("DataView")}} que represente o buffer em um formato específico, e use esta view para ler e modificar o conteúdo do buffer.</p> + +<h3 id="Views_de_arrays_tipados">Views de arrays tipados</h3> + +<p>Views de arrays tipados possuem nomes autodescritivos e provêm views para todos os tipos numéricos usuais como <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> e assim por diante. Existe uma view de array tipado especial, o <code>Uint8ClampedArray</code>. Ela fixa os valores entre 0 e 255. Isto é útil para <a href="/en-US/docs/Web/API/ImageData">Canvas data processing</a>, por exemplo.</p> + +<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p> + +<p>Para mais informações, veja <a href="/pt-BR/docs/Web/JavaScript/Typed_arrays">Arrays tipados no JavaScript</a> e documentos de referência para os diferentes objetos {{jsxref("TypedArray")}}.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p> |