5 Desvendando o JavaScript Arrays e Date #iniciante

Tempo de leitura: 9 minutos

Continuando nossa série desvendando o JavaScript, damos inicio ao nosso quinto post, se você ainda você não leu os posts anteriores volte e leia!! irá ajudar você a compreender os conceitos que serão abordados e conhecer um pouco mais sobre a história do JavaScript.

Vamos agora falar um pouco mais sobre os Arrays e Date no mundo JavaScript , os conceitos mais usados e como eles funcionam.

Array

Um Array é um tipo de variável especial, que pode conter mais de um valor. Essas variáveis são semelhantes a listas que contém uma série de métodos embutidos para realização de operações de alterações de dados. Nem o tamanho e tipos desses elementos são fixos. Ou seja um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições distintas.

Um ponto importante é que em Arrays não se pode usar strings como índices e sim devem ser usados números inteiros.

Exemplo de declaração de um Array:

var frutas = ['Maçã', 'Banana'];
console.log(frutas.length);  //2

Acessando elementos de um array

Arrays começam com índice zero: o primeiro elemento de um array está na posição 0 e o último elemento está na posição equivalente ao valor da propriedade length (tamanho) menos 1.

Acessar um item (index) do Array

var primeiro = frutas[0]; 
console.log(primeiro);  // primeiro elemento

var ultimo = frutas[frutas.length - 1]; var today = new Date();

console.log(ultimo);  // ultimo elemento

Elementos de um array são somente propriedades de objetos, da forma que toString é uma propriedade. Contudo, note que tentando acessar o primeiro elemento de um array da seguinte forma causará um erro de sintaxe, pois o nome da propriedade é inválido:

console.log(arr.0); // um erro de sintaxe

Relação entre length e propriedades numéricas

As propriedades length e numéricas de um array Javascript são conectadas. Vários dos métodos javascript pré-definidos (por exemplo, join, slice, indexOf etc.) levam em conta o valor da propriedade length de um array quando eles são chamados. Outros métodos (por exemplo, push, splice etc.) também resultam em uma atualização na propriedade length do array.

Adicionar um item ao final do Array

var adicionar = frutas.push('Laranja');
// ['Maçã', 'Banana', 'Laranja']

Alguns exemplos dessas operações

Remover um item do final do Array

var ultimo = frutas.pop(); // remove Laranja (do final)
// ['Maçã', 'Banana'];

Remover do início do Array

var primeiro = frutas.shift(); // remove Maçã do início
// ['Banana'];

Adicionar ao início do Array

var adicionar = frutas.unshift('Morango') // adiciona ao início
// ['Morango', 'Banana'];

Procurar o índice de um item na Array

frutas.push('Manga');
// ['Morango', 'Banana', 'Manga']

var pos = frutas.indexOf('Banana');
// 1

Date

Um objeto Date aponta para o momento atual no tempo. Internamente, as datas são expressas em milissegundos desde 1º de janeiro de 1970 (UTC). Esta data é importante porque, no que diz respeito aos computadores, é aí que tudo começou. Você pode estar familiarizado com o timestamp do UNIX: que representa o número de segundos que passaram desde essa data famosa.

Importante: o registro de data e hora do UNIX avança em segundos. Razão de datas do JavaScript em milissegundos.

Podemos obter a data atual em JavaScript, a partir da função construtora de Date, sem parâmetros. Ex:

var today = new Date();

Se passarmos uma string em vez de um número, o objeto Date usará o método de análise para determinar a data que você está passando. Exemplos:

new Date('2019-01-29')
new Date('2019-01') //Jan 2019 1 , 00:00:00
new Date('2019') //Jan 2019, 00:00:00
new Date('01/29/2019')
new Date('2019/01/29')
new Date('2019/1/29')

Há muita flexibilidade aqui. Você pode adicionar ou omitir o zero inicial em meses ou dias. Tenha cuidado com a posição do mês / dia, ou você pode acabar com o mês sendo mal interpretado como o dia. Você também pode usar Date.parse:

Date.parse('2019-01-29')
Date.parse('2019-01') //Jan 1st 2019, 00:00:00
Date.parse('2019') //Jan 1st 2019, 00:00:00
Date.parse('01/29/2019')
Date.parse('2019/01/29')
Date.parse('2019/1/29')

Date.parse retornará um timestamp (em milissegundos) em vez de um objeto Date

Você também pode transmitir um conjunto de valores ordenados que representam cada parte de uma data: o ano, o mês (a partir de 0), o dia, a hora, os minutos, os segundos e os milissegundos:

new Date(2019, 1, 29, 1, 29, 13, 0)
new Date(2019, 1, 29)

O mínimo deve ter 3 parâmetros, mas a maioria dos mecanismos JavaScript também interpreta estes:

new Date(2019, 7) //Sun Jan 01 2019 00:00:00 GMT+0200 (Central European Summer Time)
new Date(2019) //Thu Jan 01 1970 01:00:02 GMT+0100 (Central European Standard Time)

Em qualquer um desses casos, a data resultante é relativa ao fuso horário do seu computador. Isso significa que dois computadores diferentes podem gerar um valor diferente para o mesmo objeto de data. O JavaScript, sem qualquer informação sobre o fuso horário, considerará a data como UTC e executará automaticamente uma conversão para o fuso horário atual do computador.

Então, resumindo, você pode criar um novo objeto Date de 4 maneiras:

  • Não passando parâmetros, cria um objeto Date que representa “now” ;
  • Passando um número, que representa os milissegundos de 1 de janeiro de 1970 às 00:00 GMT;
  • Passando uma string, que representa uma data ;
  • Passando um conjunto de parâmetros, que representam as diferentes partes de uma data ;

TIMEZONES

Ao inicializar uma data, você pode passar um fuso horário, portanto, a data não é assumida como UTC e depois convertida para o fuso horário local. Você pode especificar um fuso horário adicionando-o no formato + HORAS ou adicionando o nome do fuso horário entre parênteses:

new Date('Jan 29, 2019 07:22:13 +0700')
new Date('Jan 29, 2019 07:22:13 (CET)')

Se você especificar um nome de fuso horário errado entre parênteses, o JavaScript será padronizado como UTC sem reclamar. Se você especificar um formato numérico incorreto, o JavaScript se queixará com um erro de “Data Inválida”.

CONVERSÕES DE DATA E FORMATAÇÃO

Dado um objeto Date, existem muitos métodos que gerarão uma string a partir dessa data:

const date = new Date('Jan 29, 2019 07:22:13')

date.toString() // "Sun Jan 22 2019 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jan 2019 05:22:13 GMT"
date.toDateString() //"Sun Jan 22 2019"
date.toISOString() //"2019-01-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"29/01/2019, 07:22:13"
date.toLocaleTimeString()   //"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

MÉTODOS DE ACESSO DO OBJETOS DATE

Um objeto Date oferece vários métodos para verificar seu valor. Tudo isso depende do fuso horário atual do computador:

const date = new Date('Jan 29, 2019 07:22:13')

date.getDate() //22
date.getDay() //0 (0 significa domingo, 1 significa segunda ..)
date.getFullYear() //2019
date.getMonth() //6 (starts from 0)
date.getHours() //7
date.getMinutes() //22
date.getSeconds() //13
date.getMilliseconds() //0 (não especificado)
date.getTime() //1532236933000
date.getTimezoneOffset() //-120 (irá variar dependendo de onde você está e quando você verificar - este é CET durante o verão). Retorna a diferença de fuso horário expressa em minutos)

Existem versões UTC equivalentes desses métodos, que retornam o valor UTC em vez dos valores adaptados ao seu fuso horário atual:

date.getUTCDate() //22
date.getUTCDay() //0 (0 significa domingo, 1 significa segunda ..)
date.getUTCFullYear() //2019
date.getUTCMonth() //6 (começa a partir de 0)
date.getUTCHours() //5 (não 7 como acima)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (não especificado)

EDITANDO UMA DATA

Um objeto Date oferece vários métodos para editar um valor de data:

const date = new Date('Jan 29, 2019 07:22:13')

date.setDate(newValue)
date.setDay(newValue)
date.setFullYear(newValue) //note: evite setYear (), está obsoleto
date.setMonth(newValue)
date.setHours(newValue)
date.setMinutes(newValue)
date.setSeconds(newValue)
date.setMilliseconds(newValue)
date.setTime(newValue)
date.setTimezoneOffset(newValue)

Curiosidade: esses métodos “se sobrepõem”, portanto, se você, por exemplo, definir date.setHours (48), também incrementará o dia. É bom saber: você pode adicionar mais de um parâmetro a setHours () para também definir minutos, segundos e milissegundos: setHours (0, 0, 0, 0) – o mesmo se aplica a setMinutes e setSeconds.

Quanto a get, os métodos set também possuem um equivalente em UTC:

const date = new Date('Jan 29, 2019 07:22:13')

date.setUTCDate(newValue)
date.setUTCDay(newValue)
date.setUTCFullYear(newValue)
date.setUTCMonth(newValue)
date.setUTCHours(newValue)
date.setUTCMinutes(newValue)
date.setUTCSeconds(newValue)
date.setUTCMilliseconds(newValue)

RECUPERANDO O TIMESTAMP ATUAL

Se você deseja obter o registro de data e hora atual em milissegundos, é possível usar a abreviação

Date.now()

FORMATO DE DATAS DE ACORDO COM A LOCALIDADE

A API de internacionalização, bem suportada em navegadores modernos, permite traduzir datas. Ele é exposto pelo objeto Intl, que também ajuda a localizar números, strings e moedas. Estamos interessados em Intl.DateTimeFormat (). Veja como usá-lo. Formate uma data de acordo com a localidade padrão do computador:

// "01/29/2019"
const date = new Date('Jan 29, 2019 07:22:13')
new Intl.DateTimeFormat().format(date) //"01/29/2019" na minha localidade

Formate uma data de acordo com uma localidade diferente:

new Intl.DateTimeFormat('en-US').format(date) //"1/29/2019"

O método Intl.DateTimeFormat usa um parâmetro opcional que permite personalizar a saída. Para exibir também horas, minutos e segundos:

const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
}

new Intl.DateTimeFormat('en-US', options).format(date) //"1/29/2019, 7:22:13 AM"
new Intl.DateTimeFormat('it-IT', options2).format(date) //"29/1/2019, 07:22:13"

COMPARANDO DUAS DATAS

Você pode calcular a diferença entre duas datas usando Date.getTime ():

const date1 = new Date('Jan 10, 2019 07:22:13')
const date2 = new Date('Jan 29, 2019 07:22:13')
const diff = date2.getTime() - date1.getTime() //difference in milliseconds

Da mesma forma, você pode verificar se duas datas são iguais:

const date1 = new Date('Jan 10, 2019 07:22:13')
const date2 = new Date('Jan 10, 2019 07:22:13')
if (date2.getTime() === date1.getTime()) {
  //dates are equal
}

Lembre-se de que getTime() retorna o número de milissegundos, portanto é necessário levar em conta o tempo na comparação. 10 de janeiro de 2019 07:22:13 não é igual a nova 10 de janeiro de 2019. Neste caso, você pode usar setHours(0, 0, 0, 0) para redefinir a hora.

No próximo post da serie abordaremos Expressão Regular seus conceitos práticos e fundamentos, as boas e más práticas de programação.

gostou do conteúdo? não deixe de seguir a uebile nas redes sociais, pois toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.