{"id":42462,"date":"2023-07-18T10:48:00","date_gmt":"2023-07-18T13:48:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=42462"},"modified":"2024-07-30T17:36:22","modified_gmt":"2024-07-30T20:36:22","slug":"o-que-sao-arrays-em-javascript","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-sao-arrays-em-javascript\/","title":{"rendered":"O que s\u00e3o arrays em JavaScript e como cri\u00e1-los?\u00a0"},"content":{"rendered":"\n

Os arrays t\u00eam um papel fundamental para a manipula\u00e7\u00e3o de dados, implementa\u00e7\u00e3o de algoritmos e desenvolvimento de softwares mais produtivos.<\/em><\/p>\n\n\n\n

Dominar o uso de arrays em JavaScript \u00e9 essencial para qualquer pessoa desenvolvedora<\/strong>, pois eles desempenham um papel crucial na manipula\u00e7\u00e3o de dados e na implementa\u00e7\u00e3o de algoritmos.<\/p>\n\n\n\n

Com o recurso, \u00e9 poss\u00edvel criar solu\u00e7\u00f5es elegantes e funcionais<\/strong>, tornando assim o desenvolvimento de software mais eficiente e produtivo. <\/p>\n\n\n\n

Um dos principais benef\u00edcios da ferramenta \u00e9 a capacidade de lidar com conjuntos de dados din\u00e2micos<\/strong>. Os elementos do array podem ser adicionados ou removidos conforme necess\u00e1rio, sem se preocupar com limita\u00e7\u00f5es r\u00edgidas de tamanho<\/strong>, fornecendo flexibilidade e versatilidade para ajustar o c\u00f3digo \u00e0s necessidades em constante evolu\u00e7\u00e3o de um programa. <\/p>\n\n\n\n

Aprenda em seguida o que s\u00e3o arrays e como funcionam esses poderosos recursos do JavaScript<\/a> <\/p>\n\n\n\n

O que s\u00e3o arrays?<\/strong> <\/h2>\n\n\n
\n
\"Arrays
Arrays possibilitam o uso de estruturas complexas de dados na programa\u00e7\u00e3o. (Fonte: Getty Images\/Reprodu\u00e7\u00e3o) <\/figcaption><\/figure>\n<\/div>\n\n\n

Os arrays, em programa\u00e7\u00e3o, s\u00e3o estruturas de dados que permitem armazenar uma cole\u00e7\u00e3o de elementos relacionados em uma \u00fanica vari\u00e1vel<\/strong>. Esses elementos podem ser de qualquer tipo de dados, como por exemplo n\u00fameros, strings, objetos e at\u00e9 mesmo outros arrays. O recurso organiza os elementos em uma sequ\u00eancia indexada, onde cada elemento \u00e9 atribu\u00eddo a um \u00edndice espec\u00edfico<\/strong>. <\/p>\n\n\n\n

Essas ferramentas permitem organizar e manipular conjuntos de dados de forma eficiente. Para trabalhar com uma lista extensa de nomes, n\u00fameros, objetos ou qualquer outro tipo de informa\u00e7\u00e3o, os arrays s\u00e3o um recurso ideal, pois eles permitem percorrer os dados, filtrar elementos com base em determinados crit\u00e9rios<\/strong> e mapear valores para transform\u00e1-los. <\/p>\n\n\n\n

Os arrays tamb\u00e9m podem ser usados para criar estruturas de dados mais complexas<\/strong>, como por exemplo matrizes multidimensionais, pilhas, filas e listas ligadas. Com isso, fornecem a base para implementar outras estruturas de dados e algoritmos<\/a>. <\/p>\n\n\n\n

Qual \u00e9 a diferen\u00e7a entre array e objeto?<\/strong> <\/h2>\n\n\n\n

A diferen\u00e7a fundamental entre um array e um objeto est\u00e1 na sua estrutura e finalidade, pois enquanto os arrays s\u00e3o usados para armazenar uma cole\u00e7\u00e3o ordenada de elementos<\/strong>, identificados por \u00edndices num\u00e9ricos, os objetos s\u00e3o usados para armazenar uma cole\u00e7\u00e3o de propriedades<\/strong>, cada uma com uma chave \u00fanica que permite acessar os valores correspondentes. <\/p>\n\n\n\n

Diferente de um array, os objetos n\u00e3o possuem uma ordem espec\u00edfica para seus elementos<\/strong>, e em vez disso, eles s\u00e3o usados para representar entidades ou conceitos do mundo real<\/strong>, onde cada propriedade do objeto pode descrever uma caracter\u00edstica ou comportamento espec\u00edfico. As chaves (propriedades) em um objeto s\u00e3o usadas para identificar e acessar os valores correspondentes. <\/p>\n\n\n\n

Em alguns casos, um array pode ser mais apropriado quando \u00e9 preciso ordenar uma cole\u00e7\u00e3o e acessar os elementos principalmente por \u00edndices<\/strong>. J\u00e1 os objetos s\u00e3o mais \u00fateis para armazenar informa\u00e7\u00f5es associadas a chaves espec\u00edficas e acessar os valores por meio dessas chaves. <\/p>\n\n\n\n

Como os arrays s\u00e3o usados nas linguagens de programa\u00e7\u00e3o?<\/strong> <\/h2>\n\n\n\n

Os arrays s\u00e3o utilizados em muitas linguagens de programa\u00e7\u00e3o. Cada c\u00f3digo tem sua pr\u00f3pria sintaxe e recursos espec\u00edficos para trabalhar com a ferramenta<\/strong>, mas o conceito fundamental de armazenar e acessar elementos em uma sequ\u00eancia ordenada para o desenvolvimento de software permanece o mesmo. <\/p>\n\n\n\n

Confira como usar os arrays nas principais linguagens de programa\u00e7\u00e3o: <\/p>\n\n\n\n

JavaScript<\/strong><\/h3>\n\n\n\n

O c\u00f3digo conta com suporte nativo para arrays, ou seja, eles fazem parte do n\u00facleo da linguagem e est\u00e3o dispon\u00edveis em todos os ambientes JavaScript, como navegadores, Node.js e outros ambientes de execu\u00e7\u00e3o. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Python<\/strong><\/h3>\n\n\n\n

As bibliotecas de computa\u00e7\u00e3o cient\u00edfica e an\u00e1lise de dados do Python, como NumPy e Pandas, utilizam arrays para realizar opera\u00e7\u00f5es matem\u00e1ticas em grandes conjuntos de dados, como por exemplo c\u00e1lculos estat\u00edsticos, \u00e1lgebra linear e processamento de imagens. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Java<\/strong><\/h3>\n\n\n\n

Bibliotecas e frameworks do Java dependem do uso de arrays para opera\u00e7\u00f5es eficientes em conjuntos de dados. Al\u00e9m disso, cole\u00e7\u00f5es da API do c\u00f3digo, como ArrayList e LinkedList, s\u00e3o implementadas internamente usando arrays ou uma combina\u00e7\u00e3o deles. <\/p>\n\n\n\n

<\/p>\n\n\n\n

C e C++ <\/h3>\n\n\n\n

Fornecem controle direto sobre a mem\u00f3ria, permitindo assim que desenvolvedores gerenciem o layout e o acesso aos elementos do array em cen\u00e1rios de baixo n\u00edvel, como programa\u00e7\u00e3o de sistemas ou desenvolvimento de drivers. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Ruby <\/h3>\n\n\n\n

A linguagem oferece v\u00e1rias constru\u00e7\u00f5es e m\u00e9todos que simplificam o processo de itera\u00e7\u00e3o. Assim, a execu\u00e7\u00e3o de a\u00e7\u00f5es repetitivas em todos os elementos do array pode ser feita com facilidade. <\/p>\n\n\n\n

<\/p>\n\n\n\n

PHP <\/h3>\n\n\n\n

No desenvolvimento web, os arrays desempenham um papel importante na intera\u00e7\u00e3o com formul\u00e1rios HTML, manipula\u00e7\u00e3o de dados recebidos por meio de solicita\u00e7\u00f5es HTTP e processamento de dados enviados pelos usu\u00e1rios. <\/p>\n\n\n\n

<\/p>\n\n\n\n

C# <\/h3>\n\n\n\n

Os arrays em C# s\u00e3o estruturas de dados cont\u00edguas na mem\u00f3ria, o que as torna eficientes em termos de acesso e armazenamento, sendo utilizadas em softwares onde o uso eficiente da mem\u00f3ria \u00e9 cr\u00edtico, como por exemplo em aplica\u00e7\u00f5es de alto desempenho e jogos. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Go<\/h3>\n\n\n\n

Os arrays podem ser passados como par\u00e2metros para fun\u00e7\u00f5es, permitindo assim a passagem de um conjunto de dados para processamento. Isso facilita a modulariza\u00e7\u00e3o do c\u00f3digo e o reuso de fun\u00e7\u00f5es em diferentes partes do programa. <\/p>\n\n\n\n

Como criar e usar arrays no JavaScript?<\/strong> <\/h2>\n\n\n\n

Em JavaScript, os arrays podem conter elementos de diferentes tipos de dados<\/strong>, como por exemplo n\u00fameros, strings, objetos e at\u00e9 mesmo outros arrays, o que oferece uma grande flexibilidade ao lidar com cole\u00e7\u00f5es de dados heterog\u00eaneos. A linguagem fornece v\u00e1rios m\u00e9todos e opera\u00e7\u00f5es para manipular arrays de forma eficiente, veja em seguida como come\u00e7ar a usar os arrays no JavaScript<\/strong>: <\/p>\n\n\n\n

1. Declara\u00e7\u00e3o de um array<\/strong> <\/h3>\n\n\n\n

Use a palavra-chave let ou const seguida de um nome de vari\u00e1vel para declarar um array. Por exemplo: <\/p>\n\n\n\n

let nomes = []; \/\/ Array vazio<\/em> <\/p>\n\n\n\n

const numeros = [1, 2, 3, 4, 5]; \/\/ Array com elementos<\/em> <\/p>\n\n\n\n

Importante lembrar que as vari\u00e1veis de let s\u00f3 funcionam dentro do bloco em que o usu\u00e1rio declarou<\/strong>, podendo ser atualizadas, mas n\u00e3o declaradas uma outras vez. Enquanto isso, para as vari\u00e1veis de const, n\u00e3o \u00e9 poss\u00edvel atribuir um novo valor a constante, a atualizando, nem as declarar uma outra vez. <\/p>\n\n\n\n

2. Acesso aos elementos<\/strong> <\/h3>\n\n\n\n

Para acessar os elementos de um array, utilize o nome do array e em seguida colchetes contendo o \u00edndice do elemento desejado. Lembre-se de que os \u00edndices dos arrays em JavaScript come\u00e7am em 0<\/strong>. <\/p>\n\n\n\n

console.log(numeros[0]); \/\/ Sa\u00edda: 1<\/em> <\/p>\n\n\n\n

console.log(numeros[2]); \/\/ Sa\u00edda: 3<\/em> <\/p>\n\n\n\n

\u00c9 importante notar que, em JavaScript, ao tentar acessar um elemento em um \u00edndice que n\u00e3o existe dentro do array, o valor retornado ser\u00e1 undefined<\/em><\/strong>. Isso ocorre porque os arrays em JavaScript s\u00e3o objetos flex\u00edveis, e os \u00edndices n\u00e3o acessados s\u00e3o considerados propriedades inexistentes do objeto.  <\/p>\n\n\n\n

Portanto, \u00e9 uma boa pr\u00e1tica sempre verificar o tamanho do array por meio da propriedade length<\/em><\/strong> antes de acessar os seus elementos, para evitar acessar \u00edndices fora dos limites do array, o que poderia levar a resultados inesperados no c\u00f3digo. <\/p>\n\n\n\n

3. Modifica\u00e7\u00e3o de elementos<\/strong> <\/h3>\n\n\n\n

\u00c9 poss\u00edvel modificar os elementos de um array atribuindo um novo valor a ele, usando a nota\u00e7\u00e3o de acesso aos elementos. <\/p>\n\n\n\n

numeros[1] = 10;<\/em> <\/p>\n\n\n\n

console.log(numeros); \/\/ Sa\u00edda: [1, 10, 3, 4, 5]<\/em> <\/p>\n\n\n\n

4. M\u00e9todos de modifica\u00e7\u00e3o<\/strong> <\/h3>\n\n\n\n

O JavaScript fornece m\u00e9todos de modifica\u00e7\u00e3o de arrays, que permitem adicionar, remover ou modificar elementos em um array. Alguns desses m\u00e9todos incluem push(), pop(), shift(), unshift(), splice(), entre outros. Confira exemplos em seguida: <\/p>\n\n\n\n

const frutas = [‘ma\u00e7\u00e3’, ‘banana’, ‘laranja’];<\/em> <\/p>\n\n\n\n

frutas.push(‘morango’); \/\/ Adiciona ‘morango’ ao final do array<\/em> <\/p>\n\n\n\n

frutas.pop(); \/\/ Remove o \u00faltimo elemento do array<\/em> <\/p>\n\n\n\n

frutas.shift(); \/\/ Remove o primeiro elemento do array<\/em> <\/p>\n\n\n\n

frutas.unshift(‘abacaxi’); \/\/ Adiciona ‘abacaxi’ no in\u00edcio do array<\/em> <\/p>\n\n\n\n

frutas.splice(1, 1, ‘uva’, ‘p\u00eassego’); \/\/ Remove 1 elemento a partir do \u00edndice 1 e adiciona ‘uva’ e ‘p\u00eassego’<\/em> <\/p>\n\n\n\n

5. Propriedade length<\/strong> <\/h3>\n\n\n\n

A propriedade length pode servir para obter o tamanho de um array<\/strong> (o n\u00famero de elementos que ele cont\u00e9m), como no exemplo em seguida: <\/p>\n\n\n\n

console.log(numeros.length); \/\/ Sa\u00edda: 5<\/em> <\/p>\n\n\n\n

6<\/strong>. Itera\u00e7\u00e3o com loops<\/strong> <\/h3>\n\n\n\n

\u00c9 poss\u00edvel percorrer os elementos de um array utilizando loops, como o for ou o for…of. Isso permite executar uma determinada a\u00e7\u00e3o para cada elemento do array. <\/p>\n\n\n\n

for (let i = 0; i < numeros.length; i++) {<\/em> <\/p>\n\n\n\n

console.log(numeros[i]);<\/em> <\/p>\n\n\n\n

}<\/em> <\/p>\n\n\n\n

ou <\/p>\n\n\n\n

for (let numero of numeros) {<\/em> <\/p>\n\n\n\n

console.log(numero);<\/em> <\/p>\n\n\n\n

}<\/em> <\/p>\n\n\n\n

Leia tamb\u00e9m<\/strong>: <\/p>\n\n\n\n