Referência Essencial de Métodos Nativos em JavaScript: Strings, Arrays e Utilitários

Manipulação de Strings

O ecossistema JavaScript fornece uma vasta gama de métodos para inspecionar, modificar e formatar cadeias de texto. Abaixo estão as operações fundamentais categorizadas por funcionalidade.

Acesso e Extração

  • charAt(index): Retorna o caractere localizado na posição especificada.
  • charCodeAt(index): Obtém o valor numérico Unicode do caractere no índice fornecido.
  • slice(start, end): Extrai uma seção da string e a retorna como uma nova, sem alterar a original. Suporta índices negativos.
  • substring(start, end): Similar ao slice, mas não aceita índices negativos. O parâmetro end não é incluído no resultado.
  • substr(start, length): (Depreciado) Extrai caracteres a partir de um índice inicial por uma quantidade definida de posições.

Diferença entre substring e substr:
Enquanto substring opera com base nos índices inicial e final (excluindo o final), substr utiliza o índice inicial e o comprimento total da extração.

const word = "javascript";
console.log(word.substring(4, 8)); // "scri" (do índice 4 ao 7)
console.log(word.substr(4, 4));    // "scri" (do índice 4, extraindo 4 caracteres)

Busca e Validação

  • indexOf(searchValue): Retorna a primeira posição onde o valor é encontrado, ou -1 se ausente.
  • includes(searchValue): Avalia se a string contém a sequência especificada, retornando um booleano.
  • startsWith(searchValue) e endsWith(searchValue): Verificam se a string inicia ou termina com o valor fornecido.
  • match(regex): Executa uma expressão regular e retorna um array com as correspondências.
  • search(regex): Localiza a primeira correspondência de uma expressão regular e retorna seu índice.

Modificação e Formatação

  • concat(...strings): Une múltiplas strings em uma nova.
  • replace(regex, newSubstr): Substitui a primeira correspondência (ou todas, se a regex tiver a flag g) por um novo valor.
  • split(separator): Divide a string em um array de substrings com base no delimitador.
  • padStart(targetLength, padString) e padEnd(targetLength, padString): Preenchem a string com caracteres extras no início ou no fim até atingir o comprimento desejado.
  • repeat(count): Gera uma nova string contendo a original repetida o número de vezes especificado.
  • trim(), trimStart(), trimEnd(): Removem espaços em branco do início, do fim ou de ambas as extremidades, respectivamente, sem mutar a string original.

Capitalização e Localização

Métodos como toLowerCase() e toUpperCase() aplicam regras gerais de conversão de caixa. Contudo, toLocaleLowerCase() e toLocaleUpperCase() respeitam regras específicas de idiomas (como as exceções de mapeamento do caractere 'i' no alfabeto turco).

Conversão e Tipagem Numérica

Ao converter strings para números, parseInt() analisa a string até encontrar um caractere não numérico, enquanto Number() exige que a string inteira seja um formato numérico válido.

const measurement = '150px';
console.log(parseInt(measurement, 10)); // 150
console.log(Number(measurement));       // NaN

const decimalStr = '99.99';
console.log(parseInt(decimalStr, 10));  // 99
console.log(Number(decimalStr));        // 99.99

const emptyStr = '';
console.log(parseInt(emptyStr, 10));    // NaN
console.log(Number(emptyStr));          // 0

Para verificar se um valor resulta em NaN, utilize a função global isNaN().

Operações com Arrays

Arrays em JavaScript possuem métodos mutáveis (que alteram a instância original) e imutáveis (que retornam uma nova estrutura).

Métodos Mutáveis

  • push(...items): Adiciona elementos ao final e retorna o novo comprimento.
  • pop(): Remove e retorna o último elemento.
  • unshift(...items): Insere elementos no início e retorna o novo comprimento.
  • shift(): Remove e retorna o primeiro elemento.
  • splice(start, deleteCount, ...items): Remove, substitui ou insere elementos em qualquer posição.
  • sort(compareFn): Ordena os elementos. Requer uma função de comparação para números (ex: (a, b) => a - b).
  • reverse(): Inverte a ordem dos itens.

Nota sobre o operador delete: Usar delete array[index] remove o valor, mas deixa o espaço como undefined e não atualiza a propriedade length. Prefira splice().

Métodos de Acesso e Iteração Imutáveis

  • slice(start, end): Retorna uma cópia superficial de uma porção do array.
  • concat(...arrays): Mescla arrays existentes em um novo.
  • join(separator): Une todos os elementos em uma string.
  • indexOf(item) e lastIndexOf(item): Buscam a primeira ou a última ocorrência de um valor.
  • forEach(callback): Executa uma função para cada elemento, sem retornar nada.
  • map(callback): Transforma cada elemento e retorna um novo array com os resultados.

Filtragem e Redução

  • filter(callback): Cria um novo array contendo apenas os elementos que passam no teste da função.
  • find(callback): Retorna o primeiro elemento que satisfaz a condição, ou undefined.
  • every(callback): Retorna true apenas se todos os elementos passarem no teste (interrompe na primeira falha).
  • some(callback): Retorna true se pelo menos um elemento passar no teste (interrompe no primeiro sucesso).
  • reduce(callback, initialValue): Processa o array de esquerda para direita, acumulando um único valor resultante. reduceRight() faz o mesmo da direita para a esquerda.
const dataset = [
  { id: 101, status: 'active' },
  { id: 102, status: 'inactive' },
  { id: 103, status: 'active' }
];

// Diferença entre find e filter
const firstActive = dataset.find(record => record.status === 'active');
console.log(firstActive); // { id: 101, status: 'active' }

const allActives = dataset.filter(record => record.status === 'active');
console.log(allActives.length); // 2

// Diferença entre every e some
const numericData = [45, 60, 80, 95];
const allAboveFifty = numericData.every(val => val > 50); // false
const hasAboveNinety = numericData.some(val => val > 90); // true

Inicialização e Utilitários

O método fill(value) é ideal para pré-alocar arrays com um valor padrão:

const zeroes = new Array(5).fill(0); // [0, 0, 0, 0, 0]

Para extrair o valor máximo de uma matriz numérica:

const metrics = [12, 45, 7, 89, 23];
const highestMetric = Math.max(...metrics);

Objeto Map

A estrutura Map armazena pares de chave-valor preservando a ordem de inserção e permitindo chaves de qualquer tipo.

const userRoles = new Map([
  ['admin', 'Alice'],
  ['editor', 'Bob']
]);

// Inserção e consulta
userRoles.set('viewer', 'Charlie');
const adminName = userRoles.get('admin'); // "Alice"
const hasEditor = userRoles.has('editor'); // true

// Remoção e tamanho
userRoles.delete('viewer');
console.log(userRoles.size); // 2

// Conversão e Iteração
const mapToArray = Array.from(userRoles);
const spreadToArray = [...userRoles];

for (const [role, name] of userRoles) {
  console.log(`${name} é ${role}`);
}

Utilitários Matemáticos

O objeto Math expõe funções estáticas para cálculos numéricos:

  • Math.abs(x): Valor absoluto.
  • Math.ceil(x) e Math.floor(x): Arredondamento para cima e para baixo, respectivamente.
  • Math.round(x): Arredondamento para o inteiro mais próximo.
  • Math.max(...args) e Math.min(...args): Maior e menor valores em uma lista.
  • Math.pow(base, exponent): Potenciação.
  • Math.sqrt(x): Raiz quadrada.
  • Math.random(): Número pseudoaleatório entre 0 (inclusivo) e 1 (exclusivo).

Algoritmos Clássicos: MDC e MMC

const getGCD = (a, b) => {
  let remainder;
  while (b !== 0) {
    remainder = a % b;
    a = b;
    b = remainder;
  }
  return a;
};

const getLCM = (a, b) => (a * b) / getGCD(a, b);

Expressões Regulares

Regexes permitem padrões complexos de busca em textos. Métodos do objeto RegExp incluem exec() (retorna detalhes da correspondência), test() (retorna booleano) e o obsoleto compile(). Strings também integram regex através de match(), search(), replace() e split().

// Remover todos os caracteres que não sejam alfanuméricos
const dirtyString = "User@Name#123!";
const cleanAlphanumeric = dirtyString.replace(/[^a-zA-Z0-9]/g, '');
console.log(cleanAlphanumeric); // "UserName123"

Técnicas Avançadas e Conversões

Remoção de Duplicatas em Arrays

A abordagem mais eficiente para arrays unidimensionais utiliza a estrutura Set:

const rawTags = ['js', 'html', 'css', 'js', 'html'];
const uniqueTags = [...new Set(rawTags)];

Para arrays multidimensionais (matrizes), a serialização garante a verificação precisa de referência:

const matrix = [[1, 2], [3, 4], [1, 2]];
const uniqueMatrix = Array.from(
  new Map(matrix.map(row => [JSON.stringify(row), row])).values()
);

O método reduce() também pode ser aplicado para deduplicação, embora seja menos performático que o Set:

const numbers = [5, 2, 5, 8, 2, 9];
const deduped = numbers.sort().reduce((acc, current) => {
  if (acc.length === 0 || acc[acc.length - 1] !== current) {
    acc.push(current);
  }
  return acc;
}, []);

Transformação de Tipos e Estruturas

  • Número para String: value.toString() ou interpolação ${value}.
  • String para Número: parseInt(str, 10), Number(str) ou coerção unária +str.
  • Objeto para Arrays: Object.keys(obj) (chaves), Object.values(obj) (valores).
// Mapeando pares chave-valor de um objeto para um array de objetos
const settings = { theme: 'dark', notifications: true };
const settingsArray = Object.entries(settings).map(([key, value]) => ({ [key]: value }));

// Unindo arrays em string formatada
const codes = [404, 500, 200];
const logString = codes.join(' | '); // "404 | 500 | 200"

// Dividindo strings em arrays
const path = "usr/local/bin";
const pathSegments = path.split('/'); // ["usr", "local", "bin"]

Achatamento e Processamento de Matrizes

Para converter uma matriz bidimensional em unidimensional e processar seus dados:

const grid = [[10, 20], [30, 40], [50, 60]];
const flatGrid = grid.reduce((accumulator, currentRow) => {
  return accumulator.concat(currentRow);
}, []);
// Alternativa moderna: grid.flat()

// Encontrando o valor máximo em estruturas aninhadas
const nestedValues = [1, [2, 3], [4, [5, 6]]];
const flattenedValues = nestedValues.flat(Infinity);
const maxVal = Math.max(...flattenedValues);

Ordenação de Mapas

Como objetos Map não possuem método de ordenação nativo, é necessário convertê-los para array, ordenar e, opcionalmente, reconstruir o mapa:

const scoresMap = new Map([['Alice', 85], ['Bob', 92], ['Charlie', 78]]);
const sortedScores = Array.from(scoresMap.entries())
  .sort((a, b) => b[1] - a[1]); // Ordenação decrescente por pontuação

Tags: javascript ES6 Arrays Strings expressões-regulares

Publicado em 7-31 17:00