Coleções Indexadas

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 Array e TypedArray.

Objeto Array

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 emp que contém nomes de funcionários indexados por seus números de funcionários. Então emp[1] poderia ser o funcionário número 1, emp[2] o funcionário número 2 e assim por diante.

JavaScript não possui um tipo de dados array específico. No entanto, você pode usar  o objeto predefinido Array e seus métodos para trabalhar com arrays em suas aplicações. O objeto Array 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.

Criando um array

As declarações a seguir criam arrays equivalentes:

var arr = new Array(element0, element1, ..., elementN);
var arr = Array(element0, element1, ..., elementN);
var arr = [element0, element1, ..., elementN];

element0, element1, ..., elementN é 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.

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  Array literals para detalhes.

Para criar um array com tamanho diferente de zero mas sem nenhum item, qualquer esquema abaixo pode ser utilizado:

var arr = new Array(arrayLength);
var arr = Array(arrayLength);

// This has exactly the same effect
var arr = [];
arr.length = arrayLength;

Como acréscimo a nova váriavel definida como mostrado acima, arrays também podem ser atribuídos como uma propriedade de uma novo objeto, ou de um objeto existente :

var obj = {};
// ...
obj.prop = [element0, element1, ..., elementN];

// OR
var obj = {prop: [element0, element1, ...., elementN]}

Se você deseja inicializar um array com um único elemento, e acontece que o elemento é Number, você precisa usar a sintáxe  dos colchetes. Quando um único valor de Number é passado para o construtor do Array(), ou para uma função, é interpretado como um arrayLength, e não como um elemento único.

var arr = [42];      // Cria um array com apenas um elemento:
                     // o número 42.

var arr = Array(42); // Cria um an array sem elementos
                     // e arr.length é definido como 42; isso é
                     // equivalente a:
var arr = [];
arr.length = 42;

Chamar Array(N) resulta  em um RangeError, se N é um número não inteiro cuja porção fracionária não é zero. O exemplo a seguir ilustra esse comportamento.

var arr = Array(9.3);  // RangeError: Invalid array length

Se o seu código precisa criar arrays com elementos singulares de um tipo de dados arbitrário, é mais seguro usar arrays literais. Ou, crie um array vazio antes de adicionar um elemento singular nele.

Populando um array

Você pode popular, inserir elementos, a um array através da passagem de  valores aos seus elementos. Por exemplo,

var emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

var arr = [];
arr[3.4] = "Oranges";
console.log(arr.length);                // 0
console.log(arr.hasOwnProperty(3.4));   // true

Você também pode povoar o array quando o cria:

var myArray = new Array("Hello", myVar, 3.14159);
var myArray = ["Mango", "Apple", "Orange"]

Referenciando os elementos do array

Você referencia os elementos do array através do uso de elementos numéricos ordinais. Por exemplo, suponha que você definiu o seguinte array:

var myArray = ["Wind", "Rain", "Fire"];

Você então se refere ao primeiro elemento do array como em myArray[0] e ao segundo elemento do array como em myArray[1]. O índice do elemnto começa com zero.

var arr = ["one", "two", "three"];
arr[2];  // three
arr["length"];  // 3

Compreendendo o comprimento

Sobe o ponto de vista da implementação, arranjos 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 seguintem exemplo Dusty é indexado no 30, então  cats.length retorna 30 + 1). Relembre, índices de arranjos 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 índices armazenado no arranjo:

var cats = [];
cats[30] = ['Dusty'];
console.log(cats.length); // 31

Você também pode atribuir a propriedade do comprimento. Escrevendo um valor que é menor que o número de itens armazenados trunca o arranjo: escrevendo zero limpa-o completamente:

var cats = ['Dusty', 'Misty', 'Twiggy'];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // logs "Dusty,Misty" - Twiggy has been removed

cats.length = 0;
console.log(cats); // logs nothing; the cats array is empty

cats.length = 3;
console.log(cats); // [undefined, undefined, undefined]

Iteração em arranjos

Uma operação comum é a de iterar sobre os valores de um arranjo, proecessando cada elemento de uma maneira. A maneira mais simples para fazer isso é como segue:

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

Se você sabe que nenhum dos elemnetos no seu array é avaliado como false em um contexto booleano  — se o seu array consiste apenas de nodos do DOM, como exemplo, você pode usar um idioma mais eficiente:

var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
  /* Process div in some way */
}

Isso evita a sobrecarga da checagem do comprimento do array, e garante que a variável div é reatribuida ao item atual cada  vez que que o loop for adicionado por convenência.

O método forEach() disponibiliza um outro jeito de iterar sobre/em um arranjo:

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
  console.log(color);
});

A função passada para o forEach é executada uma vez para cada item no arranjo, 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 forEach.

Note que os elementos de um array omitidos quando o array é é definido não são listados quando iterados pelo forEach, mas são listados quando indefinidos foram manualmente atribuídos ao elemento:

var array = ['first', 'second', , 'fourth'];

// returns ['first', 'second', 'fourth'];
array.forEach(function(element) {
  console.log(element);
})

if(array[2] === undefined) { console.log('array[2] is undefined'); } // true

var array = ['first', 'second', undefined, 'fourth'];

// returns ['first', 'second', undefined, 'fourth'];
array.forEach(function(element) {
  console.log(element);
})

Desde que elementos Javascript são salvos como propriedades de propriedades de objetos padronizados,  não é aconselhável iterar sobre arranjos JavaScript usando for...in loops, porque elementos normais e propriedades e numeráveis serão listadas.

Métodos dos Arrays

O objeto Array possui os seguintes métodos:

concat() uni dois arranjos e retorna um novo array.

var myArray = new Array("1", "2", "3");
myArray = myArray.concat("a", "b", "c"); 
// myArray is now ["1", "2", "3", "a", "b", "c"]

join(deliminator = ',') uni todos os elementos de um array dentro de um string.

var myArray = new Array("Wind", "Rain", "Fire");
var list = myArray.join(" - "); // list is "Wind - Rain - Fire"

push() adiciona um ou mais elementos no fim de um array e retorna o comprimento resultante do array.

var myArray = new Array("1", "2");
myArray.push("3"); // myArray is now ["1", "2", "3"]

pop() remove o último elemento de um array e retorna esse elemento.

var myArray = new Array("1", "2", "3");
var last = myArray.pop(); 
// myArray is now ["1", "2"], last = "3"

shift() remove o primeiro elemento de um array e retorna esse elemento.

var myArray = new Array ("1", "2", "3");
var first = myArray.shift(); 
// myArray is now ["2", "3"], first is "1"

unshift() adiciona um ou mais elementos ao início do array e retorna o novo comprimento do array.

var myArray = new Array ("1", "2", "3");
myArray.unshift("4", "5"); 
// myArray becomes ["4", "5", "1", "2", "3"]

slice(start_index, upto_index) extrae uma seção de um array e retorna um novo array.

var myArray = new Array ("a", "b", "c", "d", "e");
myArray = myArray.slice(1, 4); // starts at index 1 and extracts all elements
                               // until index 3, returning [ "b", "c", "d"]

splice(index, count_to_remove, addElement1, addElement2, ...) remove elementos de um array e (opcionalmente) substitui ele.

var myArray = new Array ("1", "2", "3", "4", "5");
myArray.splice(1, 3, "a", "b", "c", "d"); 
// myArray is now ["1", "a", "b", "c", "d", "5"]
// This code started at index one (or where the "2" was), 
// removed 3 elements there, and then inserted all consecutive
// elements in its place.

reverse() transpõem(inverte) os elementos de um array: o primeiro elemento do array se torna o último e o último torna-se o primeiro.

var myArray = new Array ("1", "2", "3");
myArray.reverse(); 
// transposes the array so that myArray = [ "3", "2", "1" ]

sort() ordena os elementos de um array.

var myArray = new Array("Wind", "Rain", "Fire");
myArray.sort(); 
// sorts the array so that myArray = [ "Fire", "Rain", "Wind" ]

sort() também pode 'pegar' uma função callback para determinar como os elementos do array são comparados. A função compara dois valores e retorna um entre três valores:

Por exemplo, o seguinte trecho de código vai ordenar pela última letra da  string:

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); 
// sorts the array so that myArray = ["Wind","Fire","Rain"]

• se a é menor que b pelo sistema de ordenação, retorna -1 (ou qualquer número negativo)
• se a é maior que b pelo sistema de ordenação, retorna 1 (ou qualquer número positivo)
• se a e b são considerados equivalentes, returnará 0.

indexOf(searchElement[, fromIndex]) procura no array por searchElement e retorna o índice da primeira ocorrência.

var a = ['a', 'b', 'a', 'b', 'a'];
console.log(a.indexOf('b')); // logs 1
// Now try again, starting from after the last match
console.log(a.indexOf('b', 2)); // logs 3
console.log(a.indexOf('z')); // logs -1, because 'z' was not found

lastIndexOf(searchElement[, fromIndex]) funciona como indexOf, mas começa no fim e busca de trás para a frente.

var a = ['a', 'b', 'c', 'd', 'a', 'b'];
console.log(a.lastIndexOf('b')); // logs 5
// Now try again, starting from before the last match
console.log(a.lastIndexOf('b', 4)); // logs 1
console.log(a.lastIndexOf('z')); // logs -1

forEach(callback[, thisObject]) executa um callback em cada item do array.

var a = ['a', 'b', 'c'];
a.forEach(function(element) { console.log(element);} ); 
// logs each item in turn

map(callback[, thisObject]) retorna um novo array do valor retornado da execução do callback em cada item do array.

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { return item.toUpperCase(); });
console.log(a2); // logs A,B,C

filter(callback[, thisObject]) retorna um novo array contendo os items verdadeiros ao executar o callback.

var a1 = ['a', 10, 'b', 20, 'c', 30];
var a2 = a1.filter(function(item) { return typeof item == 'number'; });
console.log(a2); // logs 10,20,30

every(callback[, thisObject]) retorna true se o callback retorna true para cada item i no array.

function isNumber(value){
  return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false

some(callback[, thisObject]) retorna true se o callback retorna true para pelo menos um item no array.

function isNumber(value){
  return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false

Os métodos acima que recebem um callback são conhecidos como métodos Iterativos, porque eles iteram sobre todo o array  de alguma maneira. Cada  um pega um segundo argumento optativo chamado thisObject. Se disponível, thisObject transforma-se no valor da palavra chave this dentro do corpo da função callback. Se não for disponibilizado, como em outros casos onde uma função é chamada de fora do contexto de um objeto explicito, this irá referenciar o objeto global. (window).

A função de callback é na realidade chamada com três argumentos. O primeiro é o valor do item atual, o segundo é o seu índice no array, e o terceiro é a referência ao array propriamente. Funções JavaScript  ignoram qualquer argumento que não é nomeado na lista de parâmetros, então é seguro disponibilizar a uma função callback que apenas recebe, pega, um único argumento, como alert.

reduce(callback[, initialValue]) aplica callback(firstValue, secondValue) para reduzir a lista de itens abaixo para um único valor.

var a = [10, 20, 30];
var total = a.reduce(function(first, second) { return first + second; }, 0);
console.log(total) // Prints 60

reduceRight(callback[, initalvalue]) funciona como reduce(), mas inicia com o último elemento.

reduce e reduceRight 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 baixo para um único valor.

Arrays multidimensionais

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.

O código a seguir cria dois arrays multidimensionais:

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 + "]";
  }
}

Esse exemplo cria um array com as seguintes linhas:

Row 0: [0,0] [0,1] [0,2] [0,3]
Row 1: [1,0] [1,1] [1,2] [1,3]
Row 2: [2,0] [2,1] [2,2] [2,3]
Row 3: [3,0] [3,1] [3,2] [3,3]

Arrays e expressões regulares

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 RegExp.exec(), String.match(), e String.split(). Para informações sobre o uso de arrays com expressões regulares, veja Regular Expressions.

Trabalhando com array-like objects

Alguns objetos JavaScript, como a NodeList retornada pelo document.getElementsByTagName() ou o objeto acessível dentro do 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 arguments fornece um atributo length mas não implementa o método forEach(), por exemplo.

Métodos Array prototype podem ser chamados contra outros objetos array-like. Por exemplo:

function printArguments() {
  Array.prototype.forEach.call(arguments, function(item) {
    console.log(item);
  });
}

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:

Array.prototype.forEach.call("a string", function(chr) {
  console.log(chr);
});

Arrays Tipadas

JavaScript typed arrays are array-like objects and provide a mechanism for accessing raw binary data. As you already know, Array objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast. However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using WebSockets, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data in typed arrays.

Buffers and views: typed array architecture

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. A buffer (implemented by the ArrayBuffer object) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is, a data type, starting offset, and number of elements — that turns the data into an actual typed array.

ArrayBuffer

The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create a typed array view or a DataView which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

Typed array views

Typed array views have self descriptive names and provide views for all the usual numeric types like Int8, Uint32, Float64 and so forth. There is one special typed array view, the Uint8ClampedArray. It clamps the values between 0 and 255. This is useful for Canvas data processing, for example.

Fore more information, see JavaScript typed arrays and the reference documentation for the different TypedArray objects.