Este artículo presenta Ecmascript 6 nos traerá nuevos métodos de operación de matriz y cómo aplicar estas nuevas funciones de matriz en los navegadores existentes.
Nota: Usaré el constructor de términos y la clase alternativamente.
Métodos de clase
El método que tiene la matriz en sí.
Array.From (Like Like, MapFunc?, Thantarg?)
La función básica de Array.From () es convertir dos tipos de objetos en matrices.
Objetos con forma de matriz
Esta clase de objetos tiene propiedades de longitud e índice. El resultado del operador DOM pertenece a esta clase, como document.getElementsByClassName ().
Objetos iterables
Al tomar valores, solo se puede tomar un elemento a la vez. Las matrices son iterables, como la nueva estructura de matriz, MAP (MAP) y SET (SET) en ECMAScript.
El siguiente código es un ejemplo de convertir un objeto de matriz en una matriz:
La copia del código es la siguiente:
dejar lis = document.QuerySelectorAll ('Ul.fancy li');
Array.from (lis) .forEach (función (li) {
console.log (nodo);
});
El resultado de QuerySelectorAll () no es una matriz, y no habrá método foreach (). Es por eso que necesitamos convertir este método en una matriz antes de usarlo.
Uso de mapeo a través de Array.From ()
Array.from () también es una alternativa a los genéricos usando MAP ().
La copia del código es la siguiente:
Let Spans = document.QuerySelectorAll ('span.name');
// map (), generalmente:
Let Names1 = array.prototype.map.call (tramos, s => s.TextContent);
// array.from ()::
dejar nombres2 = array.from (tramos, s => s.TextContent);
El segundo parámetro en los dos métodos es una función de flecha.
En este ejemplo, el resultado de document.QuerySelectorAll () es otro objeto de matriz de clase, no una matriz. Es por eso que no podemos llamar a MAP () directamente. En el primer ejemplo, para usar foreach (), convertimos el objeto de matriz de clases en una matriz. Aquí omitimos los pasos intermedios a través de métodos genéricos y versiones de dos parámetros de Array.from ().
Agujeros
Array.From () ignora los elementos faltantes: agujeros en la matriz, que serán tratados como elementos indefinidos.
La copia del código es la siguiente:
> Array.from ([0 ,, 2])
[0, indefinido, 2]
Esto significa que puede usar Array.From () para crear o completar una matriz:
La copia del código es la siguiente:
> Array.from (nueva matriz (5), () => 'a')
['A', 'A', 'A', 'A', 'A', 'A']
> Array.from (nueva matriz (5), (x, i) => i)
[0, 1, 2, 3, 4]
Si desea llenar una matriz con un valor fijo, entonces Array.Prototype.Fill () (ver más abajo) sería una mejor opción. El primero son los dos métodos del ejemplo anterior.
de () en una matriz (matriz) subclase
Otro escenario de uso para Array.from () es convertir una instancia de un objeto de matriz o un objeto Iterable a una subclase de matriz. Si crea una subclase de matriz myArray y desea convertir este tipo de objeto en una instancia de MyArray, simplemente puede usar myArray.from (). La razón por la cual esto se puede usar es que en los constructores de Ecmascript 6 heredarán (el constructor de clase principal es el prototipo de su constructor de subclase).
La copia del código es la siguiente:
clase myArray extiende la matriz {
...
}
Deje instancia deMyArray = myArray.From (aniterable);
Puede combinar esta función con el mapeo para completar la operación del mapa donde controla el constructor de resultados:
La copia del código es la siguiente:
// de () determinar el constructor del resultado a través del receptor
// (en este caso, MyArray)
Deje instancia deMyArray = myArray.From ([1, 2, 3], x => x * x);
// map (): el resultado es siempre una instancia de matriz
Deje instanceOfArray = [1, 2, 3] .map (x => x * x);
Array.of (... elementos)
Si desea convertir un conjunto de valores en una matriz, debe usar el texto de la fuente de la matriz (literal de matriz). Especialmente cuando solo hay un valor y es un número, el constructor de la matriz se huele. Para obtener más información, consulte.
La copia del código es la siguiente:
> nueva matriz (3, 11, 8)
[3, 11, 8]
> nueva matriz (3)
[,,]
> nueva matriz (3.1)
RangeError: longitud de matriz no válida
Entonces, si queremos convertir un conjunto de valores en una instancia de un sub-constructor, ¿qué debemos hacer? Este es el valor de Array.Of () (recuerde, el subconstructor de matriz heredará todos los métodos de matriz, incluso de () por supuesto).
La copia del código es la siguiente:
clase myArray extiende la matriz {
...
}
console.log (myArray.of (3, 11, 8) instancia de myArray); // verdadero
console.log (myArray.of (3) .length === 1); // verdadero
Array.of () será bastante conveniente para envolver los valores en una matriz, sin la extraña forma de manejar la matriz (). Pero también presta atención a Array.Prototype.map (), aquí hay un pozo:
La copia del código es la siguiente:
> ['A', 'B']. MAP (Array.of)
[['A', 0, ['A', 'B']],
['B', 1, ['A', 'B']]]
> ['A', 'B']. Map (x => Array.of (x)) // Mejor
[['A'], ['B']]
> ['A', 'B']. Map (x => [x]) // Best (en este caso)
[['A'], ['B']]
Como puede ver, MAP () pasará tres parámetros a su devolución de llamada. Los dos últimos a menudo se pasan por alto (detalles).
Métodos prototipo
Hay muchos métodos nuevos disponibles para instancias de matrices.
Iterando sobre matrices
El siguiente método ayudará a completar la iteración en la matriz:
La copia del código es la siguiente:
Array.prototype.entries ()
Array.prototype.keys ()
Array.prototype.values ()
Cada uno de los métodos anteriores devuelve una cadena de valores, pero no se devolverá como una matriz. Se mostrarán uno por uno a través de los iteradores. Veamos un ejemplo (pondré el contenido del iterador en una matriz usando matriz.from ()):
La copia del código es la siguiente:
> Array.from (['a', 'b'] .Keys ())
[0, 1]
> Array.from (['a', 'b'] .values ())
['A', 'B']
> Array.from (['a', 'b'] .Entries ())
[[0, 'A'],
[1, 'B']]
Puede combinar entradas () y bucles para Ecmascript 6 para desmontar fácilmente el objeto iterativo en un par de valores clave:
La copia del código es la siguiente:
para (dejar [index, elem] de ['a', 'b']. Entries ()) {
console.log (índice, elem);
}
Nota: Este código ya se puede ejecutar en el último navegador Firefox. t Firefox.
Encuentra elementos de matriz
Array.prototype.find (predicado, thatErg?) Devuelve el primer elemento que satisface la función de devolución de llamada. Si ningún elemento satisface la condición, devuelve indefinido. Por ejemplo:
La copia del código es la siguiente:
> [6, -5, 8] .Find (x => x <0)
-5
> [6, 5, 8] .Find (x => x <0)
indefinido
Array.prototype.finDindex (¿predicado, thantarg?)
Devuelve el índice del primer elemento que satisface la función de devolución de llamada. Si no se encuentran elementos satisfactorios, -1 se devuelve. Por ejemplo:
La copia del código es la siguiente:
> [6, -5, 8] .FinDindex (x => x <0)
1
> [6, 5, 8] .FinDindex (x => x <0)
-1
Ambos encuentran* los métodos ignoran los agujeros, es decir, no prestan atención a los elementos indefinidos. La firma de la función de finalización de la devolución de llamada es:
predicado (elemento, índice, matriz)
Buscar nan a través de findIndex ()
Array.prototype.indexof () tiene una limitación bien conocida, es decir, no puede encontrar nans. Porque usa identidad (===) para encontrar elementos coincidentes:
La copia del código es la siguiente:
> [Nan] .indexof (nan)
-1
Usando FindIndex (), puede usar Object.is (), que no causará tal problema:
La copia del código es la siguiente:
> [Nan] .FinDindex (y => object.is (nan, y))
0
También puede usar una forma más general de crear una función de ayuda elemis ()::
La copia del código es la siguiente:
> función elemis (x) {return object.is.bind (objeto, x)}
> [Nan] .FinDindex (Elemis (nan))
0
Array.prototype.fill (valor, inicio?, Final?)
Use el valor dado para llenar una matriz:
La copia del código es la siguiente:
> ['A', 'B', 'C']. Fill (7)
[7, 7, 7]
Los agujeros no serán tratados con ningún tratamiento especial:
La copia del código es la siguiente:
> nueva matriz (3). Flill (7)
[7, 7, 7]
También puede limitar el inicio y el final de su relleno:
La copia del código es la siguiente:
> ['A', 'B', 'C']. Llena (7, 1, 2)
['A', 7, 'C']
¿Cuándo puedo usar el nuevo método de matriz?
Hay algunos métodos que se pueden usar en el navegador.