Matrizes JavaScript explicados: Criação, indexação e métodos comuns

As matrizes se destacam como uma das estruturas de dados mais usadas no JavaScript. Esteja você trabalhando em uma lista de tarefas simples ou na criação de aplicativos complexos, as matrizes fornecem uma maneira confiável de armazenar, organizar e manipular coleções de dados. Trabalhar com matrizes é uma habilidade essencial no JavaScript, pois eles formam a base para lidar com coleções de dados, gerenciar o estado do aplicativo e realizar transformações. Depois de entender como criar matrizes, índice elementos e usar métodos principais, você estará pronto para resolver problemas que encontrará em projetos reais. O que você aprenderá neste guia, você descobrirá: como criar matrizes de maneiras diferentes como a indexação funciona e por que é importante os métodos mais comuns usados ​​para manipular as melhores práticas de matrizes para evitar erros comuns até o final, você não apenas entenderá as matrizes, mas também poderá usá -las efetivamente em seus próprios projetos. O que é uma matriz? Antes de explorar como criar matrizes, é importante entender o que são. Uma matriz é uma lista ordenada de valores, com cada elemento atribuído um índice numérico começando em 0. Em JavaScript, as matrizes são altamente flexíveis e podem armazenar números, strings, objetos ou até outras matrizes. Essa flexibilidade torna as matrizes a estrutura preferida quando você precisar armazenar listas de dados. Para aproveitar ao máximo as matrizes, é importante primeiro entender como criá -las. Criar matrizes Matrizes pode ser criado de várias maneiras e a escolha do correto depende do seu caso de uso. Matriz literais (recomendados): const Colors = [‘red’, ‘green’, ‘blue’]; Digite o modo de saída do modo de tela cheia da maneira mais comum e legível. Construtor da matriz: const números = nova matriz (3); // [ <3 empty items> ]

Digite o modo de saída do modo de tela cheia útil em casos raros, mas pode ser confuso. Array.Of () e Array.From (): const single = array.of (3); // [3]
const chars = array.from (‘sabedoria’); // [‘w’,’i’,’s’,’d’,’o’, ‘m’]

Digite o modo de saída do modo de tela completa Cada método de criação leva diretamente para a maneira como acessamos os elementos, que é onde a indexação entra. Indexação e acesso a elementos Depois de criar uma matriz, você geralmente precisa acessar itens específicos. É aí que a indexação entra em jogo. Indexação baseada em zero: const frutas = [‘apple’, ‘banana’, ‘watermelon’]; console.log (frutas[0]); // ‘Apple’ Digite o modo de tela cheia de tela completa Modo de tela completa Último elemento com comprimento: console.log (frutas[fruits.length – 1]); // ‘Watermelon’ Digite o modo de tela cheia Sair do modo de tela cheia indexação negativa moderna com em (): console.log (frutits.at (-1)); // ‘Watermelon’ Digite o modo de tela cheia Indexação do modo de tela cheia fornece controle sobre os elementos da matriz, possibilitando adicionar, remover ou atualizar valores usando métodos JavaScript embutidos. Métodos comuns de matriz agora que você pode criar matrizes e acessar itens, a próxima etapa é aprender a trabalhar com eles com eficiência. O JavaScript fornece muitos métodos internos para esse fim. Adicionando e removendo elementos: const nums = [1, 2]; nums.push (3); // [1,2,3] – Adicione ao fim nums.pop (); // [1,2] – Remova da extremidade nums.Shift (); // [2] – Remova do start nums.unShift (0); // [0,2] – Adicionar para começar a entrar em contato com o modo de tela cheia de tela cheia Copiar e fatiar: const arr = [1, 2, 3, 4]; const parte = arr.slice (1, 3); // [2,3]

Digite os dados de transformação do modo de tela cheia do modo de tela cheia: const Doubled = arr.map (x => x * 2); // [2,4,6,8]
const par = arr.Filter (x => x % 2 === 0); // [2,4]

Digite o modo de tela cheia, saída de tela cheia reduzindo e resumindo: const sum = arr.reduce ((a, b) => a + b, 0); // 10 Digite o modo de saída do modo de tela cheia. Esses métodos se baseiam nos conceitos de indexação que abordamos anteriormente. Por exemplo, empurre anexa um item até o final de uma matriz, enquanto o Slice gera uma nova matriz a partir de uma gama selecionada de índices. Juntando tudo, vamos aplicar tudo em um exemplo. Imagine que você tem uma lista de pedidos e deseja encontrar o total de todos os valores pagos: Const Orders = [
{ id: 1, amount: 20, status: ‘paid’ },
{ id: 2, amount: 0, status: ‘refunded’ },
{ id: 3, amount: 50, status: ‘paid’ }
]; const totalPaid = ordens .Filter (ordem => order.status === ‘pago’) // filtrar pedidos pagos .map (ordem => order.amount) // extrair valores .Reduce ((soma, quantidade) => soma + quantidade, 0); // calcule o total de console.log (totalPaid); // 70 Digite Modo de tela de tela cheia Modo de tela cheia Este pequeno exemplo une a criação (matrizes de objetos), indexando (acessando propriedades) e métodos (filtrar, mapear e reduzir) em um único fluxo de trabalho claro. As matrizes de conclusão vão além das listas simples; Eles servem como uma estrutura central para gerenciar dados em JavaScript. Você aprendeu como criar matrizes, como acessar itens por meio da indexação e como usar métodos comuns para manipular e transformar dados. O ponto de vista é claro: todos os conceitos pilhas no topo do anterior, criando um fluxo lógico: você começa criando matrizes. Você então usa a indexação para acessar ou modificar elementos. Por fim, você aplica métodos para transformar dados com eficiência. Quando você pratica esses conceitos como um todo, você ganhará a capacidade de escrever código JavaScript mais limpo, mais eficaz e eficiente; Útil para pequenas listas e grandes conjuntos de dados. Você pode me alcançar via LinkedIn

Fonte