Header Ads Widget

Ticker

6/recent/ticker-posts

9 nuevas funciones de matriz en ES6

 


Hay muchas extensiones nuevas para el objeto de matriz en ES6. En este viaje de aprendizaje del foo de ES6, estableceremos nuestros objetivos en dominar las formas de nuevas funciones como Array.of (), Array.from (), Array.fill (), Array.find (), Array.findIndex (), Array.copyWithin (), Array.entries (), Array.keys () y Array.values ​​(). Estas nuevas funciones facilitan el llenado de matrices o la búsqueda de datos dentro de ellas. Además de eso, ahora es más fácil trabajar con claves y valores específicos en la propia matriz. Estas funciones más nuevas están disminuyendo la necesidad de bibliotecas de utilidades, por lo que definitivamente son bienvenidas. Pongamos el caucho a la carretera con todas las nuevas extensiones de matriz en ES6 ahora mismo.


1. Matriz. De ()

Para aprender sobre la nueva función Array.of () , primero echemos un vistazo a una pequeña peculiaridad extraña en ES5 relacionada con el uso del constructor Array. Configuraremos una matriz de prices, luego veremos la longitud de la matriz.

Cuando se ejecuta el código, nos dice que tenemos una matriz con una longitud de 5000. ¡¿Qué ?! Solo pasamos un valor 5000, a la matriz. Bueno, en ES5, si pasa solo un valor al constructor de matriz que es numérico, se creará una matriz de ese tamaño. Eso es un poco extraño, ¿no crees? Este es el propósito de Array.of () . Vamos a rehacer con nuestra nueva función.

¡Agradable! En esta ronda, encontramos la longitud depricesto be1Eso parece tener mucho más sentido. Array.of () es una nueva forma de crear una matriz que corrige este comportamiento extraño en ES5. Si crea una matriz con solo un valor numérico, la matriz se crea solo con ese valor y no con la cantidad de ese valor.


2. Array.from ()

Veamos cómo funciona la nueva función Array.from () . A continuación, hemos configurado una matriz con tres valores de 500, 700 y 1000. En la segunda línea, hacemos una llamada a Array.from () y pasamos pricescomo primer argumento, y una función de flecha como segundo argumento. Al ejecutar el código, vemos que los precios ahora están gravados al 5 por ciento. Array.from () crea una nueva matriz basada en prices, y para cada elemento de esa matriz se llama a la función de flecha. Básicamente, tomamos cada precio y lo multiplicamos por 1.05, lo que indica una tasa impositiva del 5 por ciento.


Usando Array.from () con tres argumentos

En el ejemplo anterior, pasamos dos argumentos a la función Array.from (). La primera era la matriz con la que estábamos trabajando y la segunda era una función. En este ejemplo pasaremos una matriz, una función y también un objeto . Supongamos que tiene un sitio que enumera artículos a la venta, pero por cada artículo vendido, debe pagar una tarifa de publicación de 5 dólares. Veamos cómo calcular esto.

Lo que está sucediendo aquí es que el tercer argumento de Array.from () es un objeto que se convierte thisen la función. Es por eso que podemos tomar el pricey sumar this.listingfeepara darnos el precio total. Tenga en cuenta que al usar esta técnica, necesitamos usar una función estándar en lugar de una función de flecha para el segundo argumento de Array.from (). Esto se debe a que las funciones de flecha no permiten entrometerse con el thisvalor.


3. Array.fill ()

ES6 ahora le brinda una manera fácil de llenar una matriz usando Array.fill () . Veamos un ejemplo rápido.

Entonces, parece que esta función sobrescribirá cualquier valor existente en todas las claves de la matriz con el valor proporcionado. Como llamamos .fill()a la pricesmatriz que tiene 3 elementos, todos los elementos de la matriz son ahora 9000También hay una opción para pasar un segundo argumento a Array.fill () para comenzar en un índice específico. Veamos cómo hacer eso.

Al pasar el valor de 2como segundo argumento, le estamos diciendo a la función de relleno que comience a llenar la matriz en el segundo índice. Dado que las matrices se basan en 0 como sabemos, es el tercer valor de nuestra matriz que se sobrescribe con el valor de 2000.

Ahora, ¿por qué solo pasar dos argumentos cuando puedes pasar tres? Aquí pasaremos otro argumento a Array.fill (). Esto demostrará que el segundo argumento especifica en qué índice comenzar, mientras que el tercer argumento especifica dónde detenerse . Échale un vistazo ahora.

Agregamos algunos valores más a nuestra matriz original para que sea un poco más fácil ver cómo funciona esto. Observe que comenzamos a llenar con el valor de 2000en el índice 2 y nos detenemos en el índice 4 . Tenga en cuenta que el llenado se detiene antes de colocar realmente un valor en el índice. Es por eso que solo ve el índice 2 y 3 con el valor de 2000.


4. Array.find ()

Array.find () es otra función nueva agregada a las matrices en ES6. Puede usarlo para encontrar fácilmente un valor en una matriz que cumpla con un criterio dado. Vamos a ver cómo funciona.

Observe que pasamos una función de flecha a la función .find (). Esa función se aplica a todos los elementos de la matriz y, tan pronto como encuentra un valor que cumple con los criterios, se devuelve ese valor. No continúa devolviendo todos los valores que cumplen los criterios. Es por eso que solo obtenemos un resultado en este ejemplo. Repasemos este ejemplo una vez más para verlo en acción.

Entonces, aquí usamos una expresión compuesta en la función de flecha para ser más específicos. Especificamos que queremos un valor menor que 777 pero también mayor que 600. 700 es el primer valor que cumple con ese criterio, por lo que obtenemos ese resultado.


5. Array.findIndex ()

Además de Array.find (), ahora también tenemos la función Array.findIndex () que funciona de manera similar, pero en lugar de devolver el valor, devuelve el índice . Vamos a ver cómo funciona.

Aquí usamos una función JavaScript normal que se pasa a la función .findIndex (). Simplemente devolvemos el resultado de que el precio sea igual a thisthisse establece en 1000, que es el segundo argumento de .findIndex (). Podemos ver que el valor de 1000 vive en el índice 5 de la matriz de base cero.


6. Array.copyWithin ()

Array.copyWithin () es una adición interesante a la biblioteca de funciones de matriz en ES6. Con él, puede copiar valores dentro de la matriz como su nombre lo indica. Toma un valor de un índice y lo coloca en otro. Aquí hay un ejemplo.

La clave para entender copyWithin () es lo que significan los argumentos. El argumento 1 es el índice que se sobrescribirá. Es donde se copiarán los datos. El segundo argumento son los datos desde los que copiar. Entonces, en nuestro ejemplo, estamos diciendo que vamos a copiar los datos en el índice 1 (600) y pegarlos en el índice 3 (800). Después de que se ejecuta la función, vemos que el índice 3 ya no tiene 800, ahora tiene 600. Está funcionando como se esperaba. También existe la opción de pasar un tercer argumento a copyWithin (). Este tercer argumento nos dice cuántos elementos copiar. Vamos a ver cómo funciona.

El índice de destino es 2 o el tercer valor de la matriz. Comenzamos a copiar el índice de formulario 0, o el primer valor de la matriz. Vamos a copiar tres valores sucesivos comenzando en el índice 0. Por lo tanto, el resultado muestra correctamente 500 en la segunda posición del índice, seguido de dos valores copiados adicionales de 600 y 700. Los índices 5 y 6 no se ven afectados y, por lo tanto, contienen sus valores originales de 1000 y 1500.


7. Array.entries ()

La función Array.entries () es una adición genial al lenguaje. Toma una matriz y crea una lista, por así decirlo, de cada entrada. Examinemos de cerca cómo funciona.

Primero, simplemente configuramos una matriz de palabras. Luego, desconectamos el valor de llamar a .entries () en esa matriz. ¡Interesante! Da como resultado un iterador de matrizHmm, bueno, aprendimos que podemos llamar a la .next()función en iteradores, ¡así que probemos eso!

¡Increíble! Podemos ver que obtenemos la primera lista, por así decirlo, de la matriz. El objeto iterador no está terminado, por lo que se establece en falseSin embargo, valuecontiene una matriz que contiene dos valores. En el índice 0 de esa matriz está el índice de dónde vive Lenovo. Eso es index 0En el índice 1 está el valor en sí, que es LenovoMuy aseado. Finalmente, como sabemos que podemos usar el operador de propagación en iteradores, sigamos adelante y hagámoslo ahora.

La función .entries () nos da el par índice / valor de la matriz.


8. Array.keys ()

Array.keys () funciona de manera similar a Array.entries () excepto que solo proporciona las claves de la matriz. Véalo en acción ahora.


9. Array.values ​​()

Finalmente, tenemos nuestra función Array.values ​​() que es similar a los dos ejemplos anteriores, pero proporciona solo los valores en cada clave. Observa al joven Jedi.


9 Nuevas funciones de matriz en ES6 Resumen

Ahora está ejerciendo poderes especiales de kung foo en su manejo de matrices en ES6. Ya no está limitado por la carga de trabajar con matrices como se hacía en ES5. En su camino hacia la iluminación, ha encontrado formas nuevas y más fáciles de realizar su trabajo y, como tal, esperamos que este viaje le haya parecido emocionante.


Publicar un comentario

0 Comentarios