path: root/files/pt-br/web/javascript/guide/indexed_collections/index.html

---
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 &lt; 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 =&gt; 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] &lt; b[b.length - 1]) return -1;
  if (a[a.length - 1] &gt; 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 &lt; 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j &lt; 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>