Métodos e Conceitos Essenciais do JavaScript em ES5 e ES6

Métodos de Objetos

O método Object.assign copia propriedades enumeráveis de uma ou mais fontes para um objeto destino.

function copiarPropriedades(destino, ...fontes) {
  return Object.assign(destino, ...fontes);
}

const objDestino = {};
const objFonte1 = { chaveA: 'valor1' };
const objFonte2 = { chaveB: 'valor2' };
const resultado = copiarPropriedades(objDestino, objFonte1, objFonte2);
console.log(resultado); // { chaveA: 'valor1', chaveB: 'valor2' }

Métodos de Arrays

O método map gera um novo array aplicando uma função transformadora a cada elemento.

const numeros = [2, 4, 6]; const dobrados = numeros.map(function(valor) { return valor * 2; }); console.log(dobrados); // [4, 8, 12]


<p>O método <code>flat</code> achata arrays aninhados até uma profundidade especificada.</p>
<code>const matrizAninhada = [10, [20, [30, [40]]]];
const nivel1 = matrizAninhada.flat();
const nivel2 = matrizAninhada.flat(2);
const nivelInfinito = matrizAninhada.flat(Infinity);

console.log(nivel1); // [10, 20, [30, [40]]]
console.log(nivel2); // [10, 20, 30, [40]]
console.log(nivelInfinito); // [10, 20, 30, 40]</code>

<p>O método <code>Object.keys</code> retorna um array com as chaves enumeráveis de um objeto.</p>
<code>const dados = { id: 101, nome: 'Ana', ativo: true };
const chaves = Object.keys(dados);
console.log(chaves); // ['id', 'nome', 'ativo']</code>

<h3>Diferenças entre slice, splice e split</h3>
<p>O método <code>slice</code> extrai uma seção de um array sem modificá-lo, retornando um novo array.</p>
<code>const elementos = ['a', 'b', 'c', 'd'];
const subconjunto = elementos.slice(1, 3);
console.log(subconjunto); // ['b', 'c']
console.log(elementos); // ['a', 'b', 'c', 'd'] (inalterado)</code>

<p>O método <code>splice</code> modifica o array original, removendo ou inserindo elementos.</p>
<code>const lista = [10, 20, 30, 40];
lista.splice(2, 1); // Remove o elemento no índice 2
console.log(lista); // [10, 20, 40]

lista.splice(1, 0, 25); // Insere 25 no índice 1
console.log(lista); // [10, 25, 20, 40]</code>

<p>O método <code>split</code> divide uma string em um array, com base em um delimitador.</p>
<code>const frase = 'JavaScript,ES6,Desenvolvimento';
const termos = frase.split(',');
console.log(termos); // ['JavaScript', 'ES6', 'Desenvolvimento']</code>

<h3>Combinação de Arrays</h3>
<p>Para fundir arrays, pode-se usar <code>concat</code> ou <code>push</code> com <code>apply</code>.</p>
<code>const arrayA = [1, 3];
const arrayB = [4, 6];

// Usando concat (retorna novo array)
const fundidoConcat = arrayA.concat(arrayB);
console.log(fundidoConcat); // [1, 3, 4, 6]

// Usando push.apply (modifica o array original)
arrayA.push.apply(arrayA, arrayB);
console.log(arrayA); // [1, 3, 4, 6]</code>

<h3>Outras Utilidades</h3>
<p>O método <code>Object.entries</code> retorna pares chave-valor de um objeto.</p>
<code>const perfil = { nome: 'Carlos', idade: 30 };
for (const [chave, valor] of Object.entries(perfil)) {
  console.log(chave + ': ' + valor);
}</code>

<p>Verificar paridade usando operadoers bit a bit.</p>
<code>const valor = 7;
const ehPar = !(valor & 1);
console.log(ehPar); // false</code>

<p>Função para determinar o tipo de dado usando <code>toString</code>.</p>
<code>function verificarTipo(dado, tipoEsperado) {
  const tipoReal = Object.prototype.toString.call(dado)
    .replace(/\[object (\w+)\]/, '$1').toLowerCase();
  return tipoEsperado ? tipoReal === tipoEsperado : tipoReal;
}

console.log(verificarTipo('teste')); // 'string'
console.log(verificarTipo([], 'array')); // true</code>

<p>Formatar números com separadores de milhar.</p>
<code>function formatarMilhar(num = 0) {
  const partes = String(num).split('.');
  const inteiro = partes[0].split('').reverse()
    .reduce((acum, digito, i) => acum + (i % 3 ? digito : digito + ','), '')
    .replace(/^,|,$/g, '');
  const decimal = partes[1] ? partes[1].split('')
    .reduce((acum, digito, i) => acum + ((i + 1) % 3 ? digito : digito + ','), '')
    .replace(/^,|,$/g, '') : '';
  return partes.length > 1 ? `${inteiro}.${decimal}` : inteiro;
}

console.log(formatarMilhar(1234567.89)); // '1.234.567.89'</code>

<p>Limitar entrada de texto para caracteres chineses.</p>
<code>const campo = document.querySelector('input[type="text"]');
const filtrarChines = (elemento) => {
  elemento.value = elemento.value.replace(/[^\u4e00-\u9fa5]/g, '');
};

campo.addEventListener('input', () => filtrarChines(campo));</code>

<p>Remover tags HTML de uma string.</p>
<code>const limparHTML = (texto) => texto.replace(/<[^>]*>/g, '');
console.log(limparHTML('<p>Conteúdo</p>')); // 'Conteúdo'</code>

<p>Verificar se o ambiente é baseado em toque.</p>
<code>const ehTouch = () => 'ontouchstart' in window;</code>

Tags: javascript es5 ES6 object-assign array-map

Publicado em 6-23 03:50