ES6 - Matrizes

O uso de variáveis ​​para armazenar valores apresenta as seguintes limitações -

  • As variáveis ​​são escalares por natureza. Em outras palavras, uma declaração de variável pode conter apenas uma de cada vez. Isso significa que para armazenar n valores em um programa, serão necessárias n declarações de variáveis. Portanto, o uso de variáveis ​​não é viável quando se precisa armazenar uma coleção maior de valores.

  • As variáveis ​​em um programa são alocadas na memória em ordem aleatória, dificultando a recuperação / leitura dos valores na ordem de sua declaração.

JavaScript introduz o conceito de arrays para lidar com o mesmo.

Uma matriz é uma coleção homogênea de valores. Para simplificar, uma matriz é uma coleção de valores do mesmo tipo de dados. É um tipo definido pelo usuário.

Características de um Array

  • Uma declaração de array aloca blocos de memória sequencial.

  • Matrizes são estáticas. Isso significa que uma matriz, uma vez inicializada, não pode ser redimensionada.

  • Cada bloco de memória representa um elemento do array.

  • Os elementos da matriz são identificados por um número inteiro exclusivo chamado de subscrito / índice do elemento.

  • Arrays também, como variáveis, devem ser declarados antes de serem usados.

  • A inicialização do array refere-se ao preenchimento dos elementos do array.

  • Os valores dos elementos da matriz podem ser atualizados ou modificados, mas não podem ser excluídos.

Declarando e inicializando matrizes

Para declarar e inicializar uma matriz em JavaScript, use a seguinte sintaxe -

var array_name; //declaration 
array_name = [val1,val2,valn..]   //initialization 
OR 
var array_name = [val1,val2…valn]

Note - O par de [] é chamado de dimensão da matriz.

Por exemplo, uma declaração como: var numlist = [2,4,6,8] criará uma matriz conforme mostrado na figura a seguir.

Acessando Elementos de Matriz

O nome do array seguido pelo subscrito é usado para se referir a um elemento do array.

A seguir está a sintaxe para o mesmo.

array_name[subscript]

Exemplo: Array Simples

var alphas; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

A seguinte saída é exibida na execução bem-sucedida do código acima.

1 
2

Exemplo: declaração de declaração única e inicialização

var nums = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

A seguinte saída é exibida na execução bem-sucedida do código acima.

1 
2 
3 
3

Objeto Array

Uma matriz também pode ser criada usando o objeto Array. O construtor Array pode ser passado como -

  • Um valor numérico que representa o tamanho da matriz ou.

  • Uma lista de valores separados por vírgulas.

Os exemplos a seguir criam uma matriz usando este método.

Exemplo

var arr_names = new Array(4)  
for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

A seguinte saída é exibida na execução bem-sucedida do código acima.

0 
2 
4 
6

Exemplo: o construtor de matriz aceita valores separados por vírgula

var names = new Array("Mary","Tom","Jack","Jill") 
for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

A seguinte saída é exibida na execução bem-sucedida do código acima.

Mary 
Tom 
Jack 
Jill

Métodos Array

A seguir está a lista dos métodos do objeto Array junto com sua descrição.

Sr. Não Método e Descrição
1 concat ()

Retorna uma nova matriz composta por esta matriz unida a outra (s) matriz (s) e / ou valor (es)

2 cada()

Retorna verdadeiro se cada elemento nesta matriz satisfizer a função de teste fornecida.

3 filtro()

Cria uma nova matriz com todos os elementos dessa matriz para os quais a função de filtragem fornecida retorna verdadeiro.

4 para cada()

Chama uma função para cada elemento da matriz.

5 índice de()

Retorna o primeiro (mínimo) índice de um elemento dentro da matriz igual ao valor especificado, ou -1 se nenhum for encontrado.

6 Junte-se()

Une todos os elementos de uma matriz em uma string.

7 lastIndexOf ()

Retorna o último (maior) índice de um elemento dentro da matriz igual ao valor especificado, ou -1 se nenhum for encontrado.

8 mapa()

Cria uma nova matriz com os resultados da chamada de uma função fornecida em cada elemento desta matriz.

9 pop ()

Remove o último elemento de uma matriz e retorna esse elemento.

10 empurrar()

Adiciona um ou mais elementos ao final de uma matriz e retorna o novo comprimento da matriz.

11 reduzir()

Aplica uma função simultaneamente contra dois valores da matriz (da esquerda para a direita) para reduzi-la a um único valor.

12 reduzirRight ()

Aplica uma função simultaneamente contra dois valores da matriz (da direita para a esquerda) para reduzi-la a um único valor.

13 reverter()

Inverte a ordem dos elementos de uma matriz - o primeiro se torna o último e o último se torna o primeiro.

14 mudança()

Remove o primeiro elemento de uma matriz e retorna essa fatia do elemento.

15 fatia()

Extrai uma seção de uma matriz e retorna uma nova matriz.

16 alguns()

Retorna verdadeiro se pelo menos um elemento nesta matriz satisfizer a função de teste fornecida.

17

toSource()

Representa o código-fonte de um objeto.

18 ordenar()

Classifica os elementos de uma matriz.

19 emenda ()

Adiciona e / ou remove elementos de uma matriz.

20 para sequenciar()

Retorna uma string que representa a matriz e seus elementos.

21 não mudar ()

Adiciona um ou mais elementos à frente de uma matriz e retorna o novo comprimento da matriz.

ES6 - Métodos de Array

A seguir estão alguns novos métodos de array introduzidos no ES6.

Array.prototype.find

findpermite iterar por meio de uma matriz e obter o primeiro elemento de volta que faz com que a função de retorno de chamada fornecida retorne true. Assim que um elemento for encontrado, a função retorna imediatamente. É uma maneira eficiente de chegar apenas ao primeiro item que corresponda a uma determinada condição.

Example

var numbers = [1, 2, 3]; 
var oddNumber = numbers.find((x) => x % 2 == 1); 
console.log(oddNumber); // 1

A seguinte saída é exibida na execução bem-sucedida do código acima.

1

Note - O ES5 filter() e o ES6 find()não são sinônimos. Filter sempre retorna uma matriz de correspondências (e retornará várias correspondências), find sempre retorna o elemento real.

Array.prototype.findIndex

findIndex se comporta de forma semelhante ao find, mas em vez de retornar o elemento correspondente, ele retorna o índice desse elemento.

var numbers = [1, 2, 3]; 
var oddNumber = numbers.findIndex((x) => x % 2 == 1); 
console.log(oddNumber); // 0

O exemplo acima retornará o índice do valor 1 (0) como saída.

Array.prototype.entries

entriesé uma função que retorna um Array Iterator que pode ser usado para percorrer as chaves e valores da matriz. As entradas retornarão um array de arrays, onde cada array filho é um array de [índice, valor].

var numbers = [1, 2, 3]; 
var val = numbers.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

A seguinte saída é exibida na execução bem-sucedida do código acima.

[0,1] 
[1.2] 
[2,3]

Alternativamente, também podemos usar o operador spread para obter de volta uma matriz das entradas de uma vez.

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

A seguinte saída é exibida na execução bem-sucedida do código acima.

[[0,1],[1,2],[2,3]]

Array.from

Array.from()permite a criação de uma nova matriz a partir de um objeto semelhante a uma matriz. A funcionalidade básica de Array.from () é converter dois tipos de valores em Arrays -

  • Valores semelhantes a matriz.

  • Valores iteráveis ​​como Set e Map.

Example

"use strict" 
for (let i of Array.from('hello')) { 
   console.log(i) 
}

A seguinte saída é exibida na execução bem-sucedida do código acima.

h                               
e                               
l                               
l                               
o

Array.prototype.keys ()

Esta função retorna os índices da matriz.

Example

console.log(Array.from(['a', 'b'].keys()))

A seguinte saída é exibida na execução bem-sucedida do código acima.

[ 0, 1 ]

Array Traversal usando for ... em loop

Pode-se usar o loop for ... in para percorrer uma matriz.

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

O loop executa uma travessia de array baseada em índice. A seguinte saída é exibida na execução bem-sucedida do código acima.

1001 
1002 
1003 
1004

Arrays em JavaScript

JavaScript suporta os seguintes conceitos sobre Arrays -

Sr. Não Conceito e descrição
1 Matrizes multidimensionais

JavaScript suporta arrays multidimensionais. A forma mais simples da matriz multidimensional é a matriz bidimensional

2 Passando matrizes para funções

Você pode passar para a função um ponteiro para uma matriz, especificando o nome da matriz sem um índice.

3 Retorna array de funções

Permite que uma função retorne um array.

Array Desestruturação

Destructuringrefere-se à extração de valores individuais de uma matriz ou objeto em variáveis ​​distintas. Considere um cenário onde os valores de uma matriz precisam ser atribuídos a variáveis ​​individuais. A maneira tradicional de fazer isso é fornecida abaixo -

var a= array1[0]
var b= array1[1]
var c= array1[2]

A desestruturação ajuda a conseguir o mesmo de forma concisa.

Sintaxe

//destructuring an array
let [variable1,variable2]=[item1,item2]
//destructuring an object
let {property1,property2} = {property1:value1,property2:value2}

Exemplo

<script>
   let names = ['Mohtashim','Kannan','Kiran']
   let [n1,n2,n3] = names;
   console.log(n1)
   console.log(n2)
   console.log(n3);
   //rest operator with array destructuring
   let locations=['Mumbai','Hyderabad','Chennai']
   let [l1,...otherValues] =locations
   console.log(l1)
   console.log(otherValues)
   //variables already declared
   let name1,name2;
   [name1,name2] =names
   console.log(name1)
   console.log(name2)
   //swapping
   let first=10,second=20;
   [second,first] = [first,second]
   console.log("second is ",second) //10
   console.log("first is ",first) //20
</script>

A saída do código acima será conforme mostrado abaixo -

Mohtashim
Kannan
Kiran
Mumbai
["Hyderabad", "Chennai"]
Mohtashim
Kannan
second is 10
first is 20