Este artigo apresenta o ECMAScript 6 nos trará novos métodos de operação de matriz e como aplicar esses novos recursos de matriz nos navegadores existentes.
NOTA: Vou usar os termos construtor e classe alternadamente.
Métodos de classe
O método que a matriz em si tem.
Array.From (Matriz, mapfunc?, ThisArg?)
A função básica de Array.From () é converter dois tipos de objetos em matrizes.
Objetos semelhantes a matrizes
Esta classe de objetos possui propriedades de comprimento e índice. O resultado do operador DOM pertence a esta classe, como document.getElementsByclassName ().
Objetos iteráveis
Ao tomar valores, apenas um elemento pode ser levado de cada vez. As matrizes são iteráveis, como a nova estrutura da matriz, mapa (mapa) e definido (definido) no ECMAScript.
O código a seguir é um exemplo de converter um objeto de matriz em uma matriz:
A cópia do código é a seguinte:
Seja lis = document.QuerySelectorAll ('Ul.Fancy Li');
Array.From (LIS) .ForEach (função (li) {
console.log (nó);
});
O resultado do querySelectorAll () não é uma matriz e não haverá método para each (). É por isso que precisamos converter esse método em uma matriz antes de usá -lo.
Usando o mapeamento via Array.From ()
Array.From () também é uma alternativa aos genéricos usando o map ().
A cópia do código é a seguinte:
Deixe spans = document.QuerySelectorAll ('span.name');
// map (), geralmente:
Seja nomes1 = array.prototype.map.call (vãos, s => s.textContent);
// array.from ():
deixe nomes2 = array.from (vãos, s => s.textContent);
O segundo parâmetro nos dois métodos é uma função de seta.
Neste exemplo, o resultado do documento.QuerySelectorAll () é outro objeto de matriz de classe, não uma matriz. É por isso que não podemos chamar o map () diretamente. No primeiro exemplo, para usar foreach (), convertemos o objeto da matriz de classe em uma matriz. Aqui omitimos as etapas intermediárias através de métodos genéricos e versões de dois parâmetros de Array.From ().
Buracos
Array.From () ignora os elementos ausentes - orifícios na matriz, que serão tratados como elementos indefinidos.
A cópia do código é a seguinte:
> Array.From ([0, 2])
[0, indefinido, 2]
Isso significa que você pode usar o Array.From () para criar ou preencher uma matriz:
A cópia do código é a seguinte:
> Array.From (New Array (5), () => 'A')
['a', 'a', 'a', 'a', 'a', 'a']
> Array.From (New Array (5), (x, i) => i)
[0, 1, 2, 3, 4]
Se você deseja preencher uma matriz com um valor fixo, então Array.prototype.fill () (veja abaixo) seria uma escolha melhor. O primeiro são os dois métodos do exemplo acima.
de () em uma subclasse de matriz (matriz)
Outro cenário de uso para Array.From () é converter uma instância de um objeto de matriz ou um objeto iterável em uma subclasse de matriz. Se você criar uma subclasse de matriz MyArray e deseja converter esse tipo de objeto em uma instância de MyArray, você pode simplesmente usar o MyArray.From (). A razão pela qual isso pode ser usado é que, no ECMAScript 6, os construtores herdarão (o construtor da classe pai é o protótipo de seu construtor de subclasse).
A cópia do código é a seguinte:
classe MyArray estende a matriz {
...
}
deixe a instância de myarray = myarray.from (aniterable);
Você pode combinar essa função com o mapeamento para concluir a operação do mapa, onde controla o construtor de resultados:
A cópia do código é a seguinte:
// de () determinar o construtor do resultado através do receptor
// (neste caso, MyArray)
deixe a instância de myarray = myArray.From ([1, 2, 3], x => x * x);
// map (): o resultado é sempre uma instância de matriz
Deixe o InstanceoFarray = [1, 2, 3] .map (x => x * x);
Array.of (... itens)
Se você deseja converter um conjunto de valores em uma matriz, use o texto de origem da matriz (matriz literal). Especialmente quando há apenas um valor e é um número, o construtor da matriz fica em greve. Para mais informações, consulte.
A cópia do código é a seguinte:
> nova matriz (3, 11, 8)
[3, 11, 8]
> nova matriz (3)
[,,]
> nova matriz (3.1)
RangeError: comprimento da matriz inválida
Então, se queremos converter um conjunto de valores em uma instância de um subconstrutor, o que devemos fazer? Esse é o valor da matriz.of () (lembre -se, o subconstrutor da matriz herdará todos os métodos de matriz, incluindo () é claro).
A cópia do código é a seguinte:
classe MyArray estende a matriz {
...
}
console.log (MyArray.of (3, 11, 8) Instância de MyArray); // verdadeiro
console.log (MyArray.Of (3) .Length === 1); // verdadeiro
Array.of () será bastante conveniente para envolver valores em uma matriz, sem a maneira estranha de lidar com a matriz (). Mas também preste atenção ao Array.prototype.map (), há um poço aqui:
A cópia do código é a seguinte:
> ['a', 'b']. mapa (Array.of)
[['a', 0, ['a', 'b']],
['b', 1, ['a', 'b']]]
> ['a', 'b']. mapa (x => array.of (x)) // melhor
[['a'], ['b']]
> ['a', 'b']. mapa (x => [x]) // melhor (neste caso)
[['a'], ['b']]
Como você pode ver, o mapa () passará três parâmetros em seu retorno de chamada. Os dois últimos são frequentemente negligenciados (detalhes).
Métodos de protótipo
Existem muitos novos métodos disponíveis para instâncias de matrizes.
Iterando sobre matrizes
O método a seguir ajudará a concluir a iteração na matriz:
A cópia do código é a seguinte:
Array.prototype.entries ()
Array.prototype.keys ()
Array.prototype.values ()
Cada um dos métodos acima retorna uma sequência de valores, mas não será retornado como uma matriz. Eles serão exibidos um a um através de iteradores. Vejamos um exemplo (eu colocarei o conteúdo do iterador em uma matriz usando Array.From ()):
A cópia do código é a seguinte:
> Array.From (['A', 'B'] .Keys ())
[0, 1]
> Array.From (['A', 'B'] .Values ())
['a', 'b']
> Array.From (['A', 'B'] .Entries ())
[[0, 'a'],
[1, 'B']]
Você pode combinar entradas () e loops para o ECMAScript 6 para desmontar facilmente o objeto iterativo em um par de valores-chave:
A cópia do código é a seguinte:
para (vamos [índice, elem] de ['a', 'b']. Entradas ()) {
console.log (índice, elem);
}
Nota: Este código já pode ser executado no navegador Firefox mais recente. T Firefox.
Encontre elementos da matriz
Array.prototype.find (predicado, thisArg?) Retorna o primeiro elemento que satisfaz a função de retorno de chamada. Se nenhum elemento satisfazer a condição, ele retornará indefinido. por exemplo:
A cópia do código é a seguinte:
> [6, -5, 8] .Find (x => x <0)
-5
> [6, 5, 8]. Encontre (x => x <0)
indefinido
Array.prototype.findIndex (predicado, thisArg?)
Retorna o índice do primeiro elemento que satisfaz a função de retorno de chamada. Se não forem encontrados elementos satisfatórios, -1 será retornado. por exemplo:
A cópia do código é a seguinte:
> [6, -5, 8] .FindIndex (x => x <0)
1
> [6, 5, 8] .FindIndex (x => x <0)
-1
Ambos encontram os métodos* ignoram os furos, ou seja, não prestam atenção aos elementos indefinidos. A assinatura da função de conclusão do retorno de chamada é:
predicado (elemento, índice, matriz)
Encontre Nan via findIndex ()
Array.prototype.indexOf () tem uma limitação bem conhecida, ou seja, não pode encontrar Nans. Porque ele usa a identidade (===) para encontrar elementos correspondentes:
A cópia do código é a seguinte:
> [Nan] .IndexOF (NAN)
-1
Usando o findIndex (), você pode usar object.is (), que não causará esse problema:
A cópia do código é a seguinte:
> [Nan] .findIndex (y => object.is (nan, y))
0
Você também pode usar uma maneira mais geral de criar uma função auxiliar Elemis ():
A cópia do código é a seguinte:
> função elemis (x) {return object.is.bind (objeto, x)}
> [Nan] .FindIndex (Elemis (NAN))
0
Array.prototype.fill (valor, start?, Fim?)
Use o valor fornecido para preencher uma matriz:
A cópia do código é a seguinte:
> ['a', 'b', 'c']. preenchimento (7)
[7, 7, 7]
Os orifícios não serão tratados com nenhum tratamento especial:
A cópia do código é a seguinte:
> Novo Array (3) .Fill (7)
[7, 7, 7]
Você também pode limitar o início e o final do seu preenchimento:
A cópia do código é a seguinte:
> ['a', 'b', 'c']. preenchimento (7, 1, 2)
['a', 7, 'c']
Quando posso usar o novo método de matriz?
Existem alguns métodos que podem ser usados no navegador.