Propuesta de ECMAScript: Array.prototype. {Flat, flatMap}

Innovaciones de ECMAScript



Hola lectores Habr. Traigo a su atención una cosa interesante que aparecerá pronto ya apareció en el estándar ECMAScript. Ya esta disponible. casi en todos los navegadores y toda la funcionalidad también. Esta innovación es solo una envoltura de azúcar y se puede resolver por sus propios medios y se lo mostraré también. Pero este azúcar nos permitirá escribir menos código, porque nos encanta. Entonces, las funciones básicas se agregan a la matriz, en este caso hay 2 de ellas, lo que nos permitirá expandir las matrices de varios niveles en uno o más niveles de anidamiento. Sí, sí, y todo esto como dicen fuera de la caja.


Propuesta de ECMAScript: Array.prototype. {Flat, flatMap}


Esta propuesta se conoció una vez como Array.prototype.flat {ten, Map} . Tiene estado escénico . 3 4 de TC39, es decir, ya Candidato Terminado Creo que vale la pena distraerse un poco y hablar sobre este mismo TC39 y sobre los estándares, con los que están familiarizados pueden saltarse este retiro. entonces:


Estándares de JavaScript y cómo se prepara.


ECMAScript


ECMAScript es un estándar desarrollado y mantenido por ECMA International . Fue adoptado por la Asamblea General de Ecma en junio de 1997. Más específicamente, ECMAScript es un estándar ECMA-262 llamado Especificación del lenguaje ECMAScript. El estándar fue creado sobre la base de la versión original de JavaScript de Brendan Aich de Netscape y el intérprete JScript de Microsoft, pero desde entonces se ha desarrollado significativamente.


JavaScript es una implementación de la especificación ECMAScript . Esto significa que a medida que la especificación tiene nuevos borradores o ediciones publicadas, los desarrolladores de navegadores y marcos como Node.js deben implementar constantemente nuevas funcionalidades. Para hacer esto, se realizan cambios en los motores que utilizan estos navegadores y marcos para interpretar y ejecutar código JavaScript.


¿Por qué necesitas una especificación? Los diferentes navegadores utilizan diferentes motores de JavaScript, por ejemplo, V8 en Chrome, SpiderMonkey en Firefox, etc. Cuando escribe en JavaScript, espera que todos los motores en todos los entornos analicen y ejecuten su código exactamente igual. Sin una especificación estandarizada, cualquiera de estos motores sería libre de ejecutar JavaScript a su antojo, obviamente esto no es muy bueno.


TC39


El Comité Técnico Internacional Ecma 39 (también conocido como TC39) es un comité de personas muy inteligentes, está asociado con un grupo de participantes, por cierto, también es inteligente. Todos se reúnen en las reuniones del comité aproximadamente cada dos meses y discuten listas de problemas preparadas previamente.
El objetivo de TC39 es mantener y actualizar la especificación ECMAScript mencionada anteriormente, después de la discusión y el consenso. Esto incluye sintaxis de lenguaje, semántica, bibliotecas y tecnologías relacionadas en las que se basa el lenguaje.


Este proceso está definido por TC39. Todo comienza con un borrador de un funcional que expande o cambia la especificación. Estos borradores a menudo provienen de comunidades de desarrolladores o de los propios miembros del TC39. Si la propuesta es válida, el borrador obtiene el estado de una propuesta oficial.


Luego, en el camino desde la idea hasta la publicación, la propuesta pasa por varias etapas específicas. Están numerados de cero a cuatro programadores masculinos :


[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”] 

Pasar a cualquier paso siguiente requiere la aprobación TC39. Si la propuesta ha alcanzado la etapa 4, se puede esperar que se incluya en la próxima edición publicada oficialmente de la especificación del estándar ECMA-262, y eventualmente aparecerá en un entorno que ejecute JavaScript. Puede obtener más información sobre este proceso desde el documento en sí .


Todas las propuestas existentes para la introducción de la norma se pueden encontrar aquí en github
Bueno, ahora vayamos más lejos ...


Array.prototype.flat


El método flat () devuelve una nueva matriz,


 var newArray = arr.flat(depth); 

en el que todos los elementos anidados debajo de las matrices se "elevaron" recursivamente al nivel de profundidad especificado.


Un ejemplo:


 const arr1 = [1, 2, [3, 4]]; arr1.flat(); //? [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); //? [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); //? [1, 2, 3, 4, 5, 6] 

También hay un efecto secundario, elimina elementos de matriz indefinidos


Un ejemplo:


 const arr4 = [1, 2, , 4, 5]; arr4.flat(); //? [1, 2, 4, 5] 

Encabezado hágalo usted mismo


Usamos reduce y concat


Un ejemplo:


 const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); } flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] 

Array.prototype.flatMap



El método flatMap () primero aplica una función a cada elemento, y luego convierte el resultado en una estructura plana y lo coloca en una nueva matriz. Esto es idéntico a la función de mapa, seguido del uso de la función plana con un parámetro de profundidad de 1, pero flatMap a menudo es útil porque funciona un poco más eficientemente.


 var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg]) 

callback : una función que produce los elementos de una nueva matriz toma tres argumentos:


  1. currentValue : el elemento actual de la matriz a procesar.
  2. index (opcional): el índice del elemento a procesar en la matriz.
  3. array (opcional): el array a recorrer.
    thisArg (opcional): el valor utilizado como este cuando se llama a la función de devolución de llamada.
    Valor de retorno: una nueva matriz, cuyo elemento es el resultado de la función de devolución de llamada y se "eleva" al nivel 1.

ejemplo:


 [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 } ].flatMap(c => [cx, cy]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] } ]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"] 

Encabezado hágalo usted mismo


 var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []); // [2, 4, 6, 8] 

Conclusión


Recuerde que esta funcionalidad se agrega al idioma por una razón. Las razones por las que las personas inteligentes de TC39 hacen esto son la mejora de la calidad del lenguaje, el resumen, la usabilidad y otros. Conozca estas innovaciones de antemano y, para cuando se publiquen oficialmente y se respalden en todas partes, podrá ponerse a trabajar de inmediato sin perder tiempo. También puede posicionarse como un experto en JavaScript en su organización, capaz de ofrecer nuevas funciones de lenguaje que pueden mejorar tanto el código como el producto en sí.


ps: mientras se escribía el artículo :), la propuesta pasó a la etapa 4
Array.prototype.{flat,flatMap} a la etapa 4, por 2019.01.29 TC39

Source: https://habr.com/ru/post/es433820/


All Articles