🤔 Para Refletir : "Poucos sabem do que somos feitos. Sonhos não passam da realidade na qual a mente humana gostaria de vivenciar." - Yonori Akari

Javascript - Arrays

Administração Administração
♫ in the jungle, the mighty jungle, the lion sleeps tonight ♫
Postagens
465
Bravecoins
2.094
1VONYaG.png


O que são Arrays?

Um Array (Vetor em português) é um conjunto de informações armazenados em uma variável, semelhantes à uma lista.

Para declará-las, utilize a sintaxe abaixo:

Javascript:
let array = [10, 25, 32];

Ao instanciar o valor à variável, utilize colchetes (abre e fecha) para determinar o tipo como sendo um Array e, entre eles, insira os seus valores separados por uma vírgula.



Como acessar um valor de um Array?

Para acessar um valor de um Array, deve-se entender a forma de como uma Array é organizada.

Ao declarar um Array à uma variável, os valores são posicionados na ordem que você as insere. Por exemplo:

Javascript:
let numeros = [5, 10, 20, 100];

A variável numeros possui um Array de quatro números onde os números 5, 10, 20 e 100 estão ordenados nas posições (vulgo index, índices em inglês) 0, 1, 2 e 3 respectivamente. A primeira posição dos Arrays SEMPRE começa com zero.

mO9nUsZ.png

Sabendo disso, para que nós possamos referir ao número da terceira posição do Array, utilize a seguinte sintaxe:

Javascript:
numeros[2];

// Exemplo
console.log(numeros[2]);

// Saída: 20

Na sintaxe mostrada acima, é referenciado o Array numeros e a posição (index) solicitada. Essa sintaxe, ao executar o código, retorna o número 20.

I0Jxaac.png



Diversidade de tipos de valores em Arrays

Uma Array pode também guardar outros tipos de valores além de números.

Javascript:
let numeros = [5, 10, 20, 100];

let carro = ["Fiat", "Renault"];

let acertos = [true, true, false];

let perfil = ["Ricardo", 26, true, "336"];

9GFjY8x.png



Propriedades e funções de Arrays

Arrays possuem propriedades e funções que podemos utilizar para acessar e manipular suas informações.


array.length

A propriedade length indica a quantidade de valores que a array possui no momento.

Javascript:
let gaveta = [
    "Par de Meias Branca",
    "Par de Meias de Mini cenouras",
    "Par de Meias de Desejos do Amanhecer",
    "Par de Meias de Pães",
    "Moeda de 5 pilas"
];

console.log(gaveta.length);

// Saída: 5


array.push(x)

A função push adiciona um valor x no final do array.

Javascript:
let frutas = ["Laranja", "Banana"];

frutas.push("Tangerina");

console.log(frutas);

// Saída: ["Laranja", "Banana", "Tangerina"]


array.unshift(x)

A função unshift adiciona um valor x no início do array.

Javascript:
let frutas = ["Laranja", "Banana"];

frutas.unshift("Tangerina");

console.log(frutas);

// Saída: ["Tangerina", "Laranja", "Banana"]


array.pop()

A função pop remove o valor que está no final do array.

Javascript:
let frutas = ["Laranja", "Banana"];

frutas.pop();

console.log(frutas);

// Saída: ["Laranja"]


array.shift()

A função shift remove o valor que está no início do array.

Javascript:
let frutas = ["Laranja", "Banana", "Tangerina"];

frutas.shift();

console.log(frutas);

// Saída: ["Banana", "Tangerina"]


array.splice(index, count)

A função splice remove um ou mais valores (count) do array a partir de uma posição específica (index).

Javascript:
let frutas = ["Laranja", "Banana", "Tangerina"];

frutas.splice(1, 2);

console.log(frutas);

// Saída: ["Laranja"]


array.forEach( function(item, index, array) { } )

A função forEach é utilizada para executar uma função para cada item dentro da array. O argumento a ser passado é uma função com os seguintes argumentos:

  • item (obrigatório): O valor da vez que será utilizado na função;
  • index (opcional): Posição do valor da vez na array;
  • array (opcional): Array que está sendo percorrido
Javascript:
let frutas = ["Laranja", "Banana", "Tangerina"];

frutas.forEach(
    function (item) {
        console.log("Eu tenho " + item);
    }
)

// Saída:
// "Eu tenho Laranja"
// "Eu tenho Banana"
// "Eu tenho Tangerina"

Javascript:
let frutas = ["Laranja", "Banana", "Tangerina"];

frutas.forEach(
    function (item, index) {
        console.log((index + 1) + "º lugar eu tenho " + item);
    }
)

// Saída:
// "1º Lugar eu tenho Laranja"
// "2º Lugar eu tenho Banana"
// "3º Lugar eu tenho Tangerina"

Mais informações:
 
Última edição:
sanuzuki comentou:
Boa tarde Daniel, como eu faria pra fazer isso funcionar? Tenho que usar chamar script ?

Eae meu querido. Sim, você pode usar no Chamar Script do RMMV, desde que você coloque os valores corretamente como mostrado acima e coloque o nome da variável e a posição da Array.

Exemplo:
var pontos = [50, 75, 100];
$gameVariables.setValue(1, pontos[0]);


O exemplo acima diz que a o valor da variável 1 (do RPG Maker MV padrão) será substituído pelo valor da primeira posição da var pontos que é mostrado como pontos[0] que é igual à 50.

 
Quando eu aprendi a usar ARRAYS eu fiz isso com SubArrays (não sei o nome certo).
https://rpgmaker.000webhostapp.com/webmaster/client-manager/

Só para finalidade de estudos.
É um sistema para gerenciar um banco de dados sem precisar de um servidor, sendo o DB apenas um arquivo JS ou JSON, assim como uma planilha de excel para amarzenar dados ou arquivos MDB de ACCESS, mas diretamente no navegador.

Funciona:
  • Google Chrome
  • Opera (Chromium)
  • FireFox
  • IE11

Falta testar:
  • IE8~9
  • Safari (IOS e Desktop)
  • Opera antigo
  • NetScape (antigo navegador que deu origem aos atuais)
  • navegador padrão de Android 2.3 (muito comum entre os usuários).
  • Mozilla Antigo (antes do Firefox)
 
Crixus comentou:
Quando eu aprendi a usar ARRAYS eu fiz isso com SubArrays (não sei o nome certo).
http://tanatosmaker.site90.net/webmaster/client-manager/

Só para finalidade de estudos.
É um sistema para gerenciar um banco de dados sem precisar de um servidor, sendo o DB apenas um arquivo JS ou JSON, assim como uma planilha de excel para amarzenar dados ou arquivos MDB de ACCESS, mas diretamente no navegador.

Funciona: Google Chrome, Opera (Chromium), FireFox.
*Logo mais corrigido código pra ser compativel com IE11.

O nome certo deve ser Objetos. Interessante este banco de dados. Eu ainda não tive oportunidade de fazer um sistema HTML e fazer sistemas tipo esse, mas deve ser ótimo trabalhar com isso tudo.
 
Objetos? Achei que fossem vetores.
Eu corrigi o problema de incompatibilidade com Internet Explorer.
Foi um erro de iniciante, eu tentei usar ONCLICK na TAG options, sendo o correto vereficar a mudança do campo todo com ONCHANGE, daí pra identificar o valor da array selecionada usei a própria posição na lista com SELECTEDINDEX.

Eu achava que objetos eram com colchetes.
Código:
{"name":"João","tel":"+5541991234567","email":"joao@huemail.br"}

E separando com ARRAY poderia fazer igual RGSS no RpgMaker:
Código:
var cliente = [{"name":"João","tel":"+5541991234567","email":"joao@huemail.br"}]

cliente[0].name //resultado João
cliente[0].tel //resultado +5541991234567
cliente[0].email //resultado joao@huemail.br

Eu até tinha um projeto seguindo essa ideia:
http://www.condadobraveheart.com/forum/index.php?topic=531.0

Na época eu fiz de um modo errado, por que na época eu seguia uma outra base de entendimento.
 
Crixus comentou:
Objetos? Achei que fossem vetores.
Eu corrigi o problema de incompatibilidade com Internet Explorer.
Foi um erro de iniciante, eu tentei usar ONCLICK na TAG options, sendo o correto vereficar a mudança do campo todo com ONCHANGE, daí pra identificar o valor da array selecionada usei a própria posição na lista com SELECTEDINDEX.

Eu achava que objetos eram com colchetes.
Código:
{"name":"João","tel":"+5541991234567","email":"joao@huemail.br"}

E separando com ARRAY poderia fazer igual RGSS no RpgMaker:
Código:
var cliente = [{"name":"João","tel":"+5541991234567","email":"joao@huemail.br"}]

cliente[0].name //resultado João
cliente[0].tel //resultado +5541991234567
cliente[0].email //resultado joao@huemail.br

Eu até tinha um projeto seguindo essa ideia:
http://www.condadobraveheart.com/forum/index.php?topic=531.0

Na época eu fiz de um modo errado, por que na época eu seguia uma outra base de entendimento.

Mas não foram objetos a qual que você usou nessa parte do seu projeto? Me desculpe se tiver alguma coisa errada, ainda estou aprendendo HTML, e Javascript já tenho uma boa experiência mas não tenho pra começar com alguma coisa nova que eu queira usar. Mas já está fazendo um bom trabalho, continue assim.  :Okay_fix:
 
Não, a estrutura é um tanto diferente.

Arrays:
Código:
var dbinicial = [
	[1,'João','2015-08-12','41-9-9999-8877'],
	[2,'Pedro','2015-07-02','41-9-7777-9688'],
	[3,'Maria','2015-07-05','41-9-9666-8888'],
	[4,'Jorge','2015-05-41','11-9-9666-5555'],
	[5,'Regina','2015-01-03','11-9-9766-4435'],
];
Ver nome do cliente no registro:
dbinicial[0][1] //João
dbinicial[0][2] //Pedro

Objects em Arrays:
Código:
var dbinicial = [null,
	{name:"João",registration:"2015-08-12",tel:"41-9-9999-8877"},
	{name:"Pedro",registration:"'2015-07-02",tel:"41-9-7777-9688"},
	{name:"Maria",registration:"2015-07-05",tel:"41-9-9666-8888"},
	{name:"Jorge",registration:"2015-05-41",tel:"11-9-9666-5555"},
	{name:"Regina",registration:"2015-01-03",tel:"11-9-9766-4435"}
];

dbinicial[1].name //João
dbinicial[2].name //Pedro

O objeto é o ".name".
Olha, eu também não entendo muito, eu manipulo bem o CSS3 e outros elementos da página por Javascript, mas também não posso garantir os termos usados.

EDIT:
Achei aqui um artigo, essas arrays dentro de arrays se chamam Arrays bi-dimensionais, mas que ainda sim são um tipo de Object.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Sendo as próprias ARRAYS objetos.
 
Tópico sobre Arrays atualizado e reestruturado.

Algumas ilustrações foram adicionadas para mostrar exemplos e alguns textos foram repaginados.

~ Até mais! 🦁
 
Excelente @DanTheLion

Obs: Eu também utilizo o ponto e vírgula...

É opcional na linguagem usar o ponto e vírgula no fim das linhas , mas por exemplos, o ponto e vírgula é a forma que você tem de delimitar que uma instrução foi finalizada para o JavaScript, mas alguns problemas podem surgir e gerar um erro de sintaxe, então para garantir 100% dos casos utilize o ponto e vírgula. Lembro-me que estava codificando: Expressões matemáticas e não usei o ponto e vírgula e gerou erros. Valeu Daniel!
 
Excelente @DanTheLion

Obs: Eu também utilizo o ponto e vírgula...

É opcional na linguagem usar o ponto e vírgula no fim das linhas , mas por exemplos, o ponto e vírgula é a forma que você tem de delimitar que uma instrução foi finalizada para o JavaScript, mas alguns problemas podem surgir e gerar um erro de sintaxe, então para garantir 100% dos casos utilize o ponto e vírgula. Lembro-me que estava codificando: Expressões matemáticas e não usei o ponto e vírgula e gerou erros. Valeu Daniel!
Exatamente, professor @BENTO. Apesar de o ponto e vírgula ser opcional para delimitar o final de uma linha de comando no Javascript, tem certas ocasiões que o ponto e vírgula é necessário, por exemplo: mais de um comando de Javascript sendo chamada numa única linha:

Javascript:
function exemplo() {
    let mensagem = "Olá mundo"; console.log(mensagem); mensagem += " cruel"; console.log(mensagem);
}
 
array.shift()
Obrigado por essa parte, eu havia me esquecido, resolveu o meu problema, eu estava brincando de fazer um sistema de mascaramento pra números como cpf, telefone, data, etc. Eu não postei por que eu me sinto meio idiota postando dúvidas...

array.forEach( function(item, index, array) { } )
Essa parte também me fez abandonar o for convencional.

É opcional na linguagem usar o ponto e vírgula no fim das linhas , mas por exemplos, o ponto e vírgula é a forma que você tem de delimitar que uma instrução foi finalizada para o JavaScript
Realmente, no começo eu tinha tanto medo de esquecer um ponto e vírgula... eu na verdade sempre me confundi muito com questões relacionadas à isso, por que eu sempre imaginava que a melhor maneira de diminuir o tamanho de um arquivo JS seria removendo todas as quebras de linhas (\n e \r) e espaçamentos \t (Esqueço o nome) antes de enviar ao servidor. Então eu fazia assim:
Javascript:
function MyFunction(){
    comando 1;
    comando 2;
    comando 3;
}

Pra depois ficar assim:
Javascript:
function MyFunction(){comando 1;comando 2;comando 3;}

Mas depois de alguns meses me dei conta de que dentro de uma função ou instrução como for o último ; não é necessário:
Javascript:
function MyFunction(){console.log(1);console.log(2);console.log(3)}
Claro, eu ainda coloco pelo simples fato de pensar se for colocar algo à mais depois.

Eu também parei de usar // para fazer comentários, e passei à usar apenas /* Comentário */.

Eu não sei se tem relevância essas coisas que eu fiz, pois não sou programador.
 
Última edição:
Voltar
Topo