30:T6ed,Não é normal tratarmos de **Arrays** logo no início do aprendizado em programação, mas esse é um tópico muito importante dentro do ambiente do Observable, ou de outras plataformas de programação letrada, pois elas são usadas de maneira ostensiva para lidar com dados. Podemos explicar **Arrays** de uma forma meio errada, dizendo que são variáveis que contém muitos valores, acessados através de um índice. Essa é uma explicação torta e distorcida, mas que funcionará para que seja usada na programação. Quando lidamos com coisas muito simples é mais prático e conveniente usarmos variáveis para registrar dados ou valores; mas quando lidamos com muitas informações que precisam ser processadas, transformadas e recalculadas com frequência, usar **Arrays** será mais prático. Em síntese: se há algo sendo feito de forma muito repetitiva envolvendo muitas variáveis, você deveria estar usando uma **Array**. Para evitarmos que você se acostume a criar dezenas de variáveis para fazer o trabalho que deveria estar sendo realizado com uma **Array** (isso é muito comum com iniciantes em programação), pulamos já para elas na sequência das explicações sobre variáveis. Uma **Array** pode ser descrita com a representação abaixo. Nela temos o exemplo de `arr`, que contém **${arr.length}** valores diferentes associados a ela, que serão acessíveis através de índices de **0** a **${arr.length - 1}**.

Índice	0	1	2	3	4
arr	${arr[0]}	${arr[1]}	${arr[2]}	${arr[3]}	${arr[4]}

ou representada como um objeto estruturado que é a forma como o Observable prefere exibí-las:31:T766,**Javascript** é uma das poucas linguagens de programação que nos permite usar palavras (Strings) como índices das **Arrays**. Quando organizamos o conteúdo de uma estrutura de dados por Strings, chamamos essas **Arrays** de **Arrays associativas**, pois no fundo cada palavra (String) representa um índice numérico dentro da estrutura. A sintaxe para se declarar **Arrays associativas** é ligeiramente diferente das **Arrays ordinárias**: ```js associativa = [ 'termoA': 10, 'outroTermo': -40, 'nada': false, 'Fruta': 'Laranja', 'Matriz': [10,50,-40,1520], 'final' : 0 ]; ``` Pular linhas ou dar maiores espaços entre os termos de uma declaração não provoca nenhum efeito em **javascript**, e para facilitar a legibilidade da declaração pulamos linhas após a vírgula que separa cada registro da **Array**. A única diferença para a declaração de **Arrays** organizadas por índices numéricos, é que precisamos informar qual é o termo (String) que indexará aquele valor, com a sintaxe: ```js "termo": valor ``` e para acessar os respectivos valores, utilizamos **`associativa["Fruta"]`** ou **`associativa.Fruta`**. Como se trata do uso de Strings como índice, essas referências podem conter espaços e caracteres especiais, como por exemplo: ```js associativa["Termo com espaço"] = true; ``` Mas nesses casos, a única forma de se acessar os valores é pela sintaxe **`associativa["Termo com espaço"]`**. Também podemos associar novos registros organizados por Strings nestas **Arrays** com este mesmo tipo de sintaxe: ```js associativa.NovoDado = 10; ``` E quando temos uma outra **Array** como dados dentro de uma **Array associativa**, os acessamos com **`associativa["Matriz"][2]`** ou **`associativa.Matriz[2]`** (cujo valor é **-40**).32:T671,Muitas vezes falamos que **javascript** é uma linguagem "traiçoeira", pois ela é muito permissiva e muito flexível. A maior parte das linguagens de programação não nos permitem misturar dados de tipos variados em uma **Array**, muito menos declará-las ou acessá-las por diferentes formas sintáticas. Para piorar um pouco mais essas possíveis confusões, a sintaxe utilizada para **Arrays** associativas é exatamente a mesma utilizada para acessar elementos de um **Objeto**, que é outro tipo de estrutura de dados. A grande diferença entre **Objetos** e **Arrays** é que o primeiro não possui uma ordenação em seus registros, e sempre será associativo. A declaração de um novo **Objeto** é feita com chaves *{ }*, com separação dos seus elementos com a estrutura `"termo: dado,"` mas o acesso e uso destes registros é feito exatamente como nas **Arrays**, por `arr.termo` ou `arr["termo"]`. Isso nos leva sempre a uma grande dificuldade de identificação de erros no código ou em entender por que algo não está funcionando. Por exemplo, **Objetos** não possuem o registro `.length`, nem a **função** `.map()`; ao tentar usá-los em um **Objeto**, obteremos um erro, e boa parte dos programadores não entenderão por quê isto está acontecendo. Para piorar, se sondarmos o tipo de uma **Array** ou de um **Objeto**, obteremos (para os dois) o mesmo resultado: `object`. **Objetos**, assim como **funções** são assuntos futuros no processo de aprendizado de programação com **javascript**; este é apenas um alerta por que as confusões proporcionadas por esta semelhança sintática estão sempre presentes.33:[] 2e:{"title":"Arrays","cells":[{"id":0,"value":"# Arrays","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Uma forma mais inteligente e poderosa para trabalhar com variáveis\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"arr = [32, 61.67, -40, 1450, 3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"A declaração desta constante no Observable é feita da seguinte forma (em um bloco de programação):\n\n```js\narr = [32, 51.67, -40, 1450, 3];\n```\n\nE se estivesse sendo declarada dentro de uma **função** ou de outro elemento da programação, poderia ser feita como:\n\n```js\nconst arr = [32, 51.67, -40, 1450, 3];\n```\n\nou \n\n```js\nlet arr = [32, 51.67, -40, 1450, 3];\n```\n\nComo se vê, em termos práticos uma **Array** acabará sendo uma variável (ou constante). ","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"Da mesma forma que em uma planilha, podemos fazer cálculos ou processamento sequencial em uma **Array**, o que torna seu uso muito conveniente quando temos muitas informações registradas. O código abaixo, fará uma divisão por **4.2** sobre todos os valores de `arr` (e colocará os resultados em outra **Array** chamada `arr2`):","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"arr2 = arr.map(function (v) {\n return v / 4.2;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"```js\narr2 = arr.map( function(v) {\n return v/4.2;\n});\n```","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"☞ *`map` é uma **função**, e você verá isso, e o que elas fazem, posteriormente.*","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"Estamos falando de um conjunto de **5** números, e parece que fazer um procedimento desses é algo um tanto exagerado (e que poderia ser feito facilmente através de variáveis comuns)... mas como seria fazer isso se tivéssemos **5000** números ao invés de **5**?\n\nO grande potencial da computação está em fazermos tarefas repetitivas em grande escala, algo que seria tedioso demais para pessoas realizarem, ou onde correríamos grande risco de uma falha humana pela própria repetição. Se iremos explorar a computação para o cálculo de **5** registros, **5000** registros, ou **5 milhões** de registros, o trabalho será o mesmo. Quando temos informações semelhantes armazenadas em variáveis diferentes, temos um indicativo de que seja o caso de se usar **Arrays**, pois isso permitirá que a quantidade de registros aumente sem que seja necessário refazer ou repensar o código para processá-los.","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"### Explicações um pouco melhores...","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"Uma **Array** não é uma variável, mas uma estrutura de dados. Assim como qualquer variável, a estrutura e seus valores estarão alocados na memória RAM do computador, e serão acessados da mesma forma como uma variável é acessada.\n\nEm **javascript** tudo fica associado a uma variável, seja um valor, uma **Array**, um **Objeto**, uma **função** ou qualquer outro elemento da programação. Se você sondar o que exatamente é a variável `arr`, através da instrução:","pinned":false,"hidden":false,"mode":"md"},{"id":736,"value":"typeof arr","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"```js\ntypeof arr;\n```\n\nverificará que o resultado será `${typeof arr}`, e não um valor, *number* ou *NaN*... nem sequer **Array**.","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"## Acessando e usando valores individualmente","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"A sintaxe da declaração de uma **Array** usa colchetes *[ ]* para informar se tratar de um conjunto de dados, e a presença destes mesmos colchetes *[ ]* sempre indicará se tratar de algo contido em uma **Array**.\n\nA forma mais simples de se declarar os valores de uma **Array** é já inseri-los dentro dos colchetes *[ ]*, separados por vírgulas. Mas poderíamos declarar seus valores um a um também. Isso é feito declarando uma **Array** vazia (sem valores atribuídos), e depois atribuindo valores a cada índice de sua estrutura (cada linha em um bloco separado de programação no Observable) indicando a variável seguida dos colchetes *[ ]*, com o índice específico (`arr[2]`, por exemplo):\n","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"arrIndividual = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"```js\narrIndividual = [];\n```","pinned":false,"hidden":false,"mode":"md"},{"id":581,"value":"(arrIndividual[0] = 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"```js\narrIndividual[0] = 50;\n```","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"(arrIndividual[1] = -10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"```js\narrIndividual[1] = -10;\n```","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"(arrIndividual[2] = 32.14)","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"```js\narrIndividual[2] = 32.14;\n```","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"(arrIndividual[3] = 1520)","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"```js\narrIndividual[3] = 1520;\n```","pinned":false,"hidden":false,"mode":"md"},{"id":691,"value":"Talvez você se questione que, se `arrIndividual` foi declarada como uma constante, como é possível incluir ou alterar seus valores posteriormente no Observable?\n\nO que é constante, neste caso, é que `arrIndividual` é uma estrutura de dados do tipo **Array**... isso não poderá ser alterado; o resto, isto é, o conjunto de valores contidos em `arrIndividual` poderão mudar.","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"Você pode utilizá-las da mesma forma que qualquer outra variável, usando seu respectivo índice para apontar ao dado certo em qualquer tipo de operação, como por exemplo:","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"mVar = arrIndividual[2] + arr[0] + 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"```js\nmVar = arrIndividual[2] + arr[0] + 50;\n```","pinned":false,"hidden":false,"mode":"md"},{"id":623,"value":"Qualquer tipo de valor pode ser associado a uma **Array**, não somente números. Podemos inclusive, misturar os tipos de dados:\n\n```js\ndados=[];\ndados[0] = \"Laranja\";\ndados[1] = 20.5;\ndados[2] = true;\ndados[3] = mVar;\ndados[4] = arrIndividual[2] + arr[0] + 50;\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"Podemos até incluir uma **Array** dentro de um (ou vários) registros de outra **Array**:\n\n```js\ndadoscomplexos = []\ndadoscomplexos[0] = \"Azul\";\ndadoscomplexos[1] = [10, 20, 100, -40, 12];\ndadoscomplexos[2] = arrIndividual[2];\ndadoscomplexos[3] = dados;\n```\n\nNeste caso, para acessar o valor **`12`** registrado como parte do conjunto de dados em `dadoscomplexos[1]`, você precisará referenciá-lo como `dadoscomplexos[1][4]`ou para acessar o valor **`Laranja`** em `dadoscomplexos[3]`, precisará referenciá-lo como `dadoscomplexos[3][0]`.\n\nEste tipo de articulação é bastante comum, e são chamadas de **matrizes bidimensionais**. Podemos encontrar também **matrizes tridimensionais** e **n-dimensionais**, pois não há limite para estes encadeamentos, além da legibilidade do código (e do bom senso na programação). O grande problema do uso de **Arrays** é que elas tornam a leitura e compreensão do código mais difícil do que com variáveis simples.","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"## Arrays associativas","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":652,"value":"Todas as **Arrays** (associativas ou não), possuem alguns registros internos (associativos) presentes e atualizados a cada novo dado incluído ou alterado nela. Um exemplo já visto é a **função** `.map()`, um registro associativo que também poderia ser acessado como **`arr['map']()`**, ou outro que é frequentemente utilizado, o `.length`, também disponível como `['length']` que nos informa quantos registros estão contidos dentro daquela **Array**. Por exemplo, `arr.length` nos informará **`${arr.length}`**, ou `arrIndividual[\"length\"]` nos informará **`${arrIndividual[\"length\"]}`**.","pinned":false,"hidden":false,"mode":"md"},{"id":660,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":662,"value":"## Confusões comuns","pinned":false,"hidden":false,"mode":"md"},{"id":664,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":748,"value":"## Dados tabulares","pinned":false,"hidden":false,"mode":"md"},{"id":752,"value":"Um tipo específico de **Array** tem importância especial quando estamos programando com dados ou para contextos científicos: os **dados tabulares**, que são aqueles estruturados na forma de uma tabela. Uma planilha, por exemplo, é uma estrutura de **dados tabulares**; um sistema de banco de dados (SGBD) guarda todas as informações armazenadas nele através de diversas tabelas, que podem se relacionar quando possuem elementos comuns nos dados, e cada uma delas é também uma estrutura de **dados tabulares**.\n\nEste tipo de estrutura é formada em **javascript** por uma **array** onde cada um de seus registros possui um **objeto** contendo como registros os nomes das \"colunas\" da tabela, e seu valor para a linha representada no próprio índice primário da **array**. **Dados tabulares** são facilmente reconhecidos pela recorrência dos mesmos índices associativos aos dados, para cada registro da **array**.\n\nAbaixo um exemplo bem simples de **dados tabulares**:","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"tabela = [\n { nome: \"João\", idade: 30, sexo: \"Masculino\" },\n { nome: \"Ricardo\", idade: 23, sexo: \"Masculino\" },\n { nome: \"Maria\", idade: 29, sexo: \"Feminino\" },\n { nome: \"Neuza\", idade: 58, sexo: \"Feminino\" },\n { nome: \"Anderson\", idade: 42, sexo: \"Masculino\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"```js\ntabela = [\n { nome: \"João\", idade: 30, sexo: \"Masculino\" },\n { nome: \"Ricardo\", idade: 23, sexo: \"Masculino\" },\n { nome: \"Maria\", idade: 29, sexo: \"Feminino\" },\n { nome: \"Neuza\", idade: 58, sexo: \"Feminino\" },\n { nome: \"Anderson\", idade: 42, sexo: \"Masculino\" }\n]\n```\n\nRepare que os termos utilizados, *nome*, *idade*, *sexo*, se repetem para todos os dados da **array**, e que cada conjunto definido dentro das chaves `{ }` está dentro de um índice específico de `tabela`, assim como seria se quiséssemos declarar uma *array* simples:\n\n```js\narraysimples = [\"índice 0\", \"índice 1\", \"índice 2\"]\n```\n\nNa declaração de `tabela` apenas substituímos os dados `String` como de `arraysimples`, por **objetos**, que são como **arrays associativas**, só que sem índices ordenados como os das **arrays**.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":776,"value":"Em uma estrutura como essa, podemos raciocinar como se estivéssemos usando uma tabela ou uma planilha, e para acessar a informação registrada na coluna `idade` da linha `2` dela, poderíamos fazer isso com `tabela[2].idade`. Ao colocar esta variável aqui no texto, temos o valor **${tabela[2].idade}**.\n\nEsta estrutura nos permite navegar nos dados como se estivéssemos usando uma planilha.","pinned":false,"hidden":false,"mode":"md"},{"id":781,"value":"☞ *Mas lembre-se que uma das condições básicas para **dados tabulares** é que o nome das \"colunas\" permaneçam sempre os mesmos em todos os registros da **array***.","pinned":false,"hidden":false,"mode":"md"},{"id":695,"value":"

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}