JavaScript: 7 pequeñas cosas útiles

El autor de la nota, cuya traducción publicamos hoy, dice que en JavaScript, como en cualquier otro lenguaje de programación, puede encontrar muchos pequeños trucos diseñados para resolver una variedad de problemas, tanto simples como bastante complejos. Algunas de estas técnicas son ampliamente conocidas, mientras que otras, no tan comunes, pueden sorprender gratamente a quienes no las conocen. Ahora veremos 7 técnicas útiles de programación de JavaScript.

1. Obtener valores de matriz únicos

En JavaScript, generar una matriz que contenga solo valores únicos de otra matriz probablemente sea más fácil de lo que piensa:

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3] 

Me gusta cómo se puede resolver este problema utilizando el operador ... y el tipo de datos Set .

2. Matrices y valores lógicos.

¿Alguna vez ha necesitado eliminar valores de una matriz cuya conversión a un tipo lógico da false ? Por ejemplo, estos son valores como 0 , undefined , null , false . Es posible que no haya sabido que para hacer esto, podría hacer esto:

 myArray   .map(item => {       // ...   })   //       .filter(Boolean); 

Como puede ver, para deshacerse de todos esos valores, simplemente pase el Boolean al método de matriz .filter() .

3. Crear objetos verdaderamente vacíos

Estoy seguro de que puede crear un objeto que parece vacío utilizando la sintaxis del literal del objeto: {} . Pero se __proto__ un prototipo ( __proto__ ) a dicho objeto, tendrá un método hasOwnProperty() y otros métodos de objeto. Para crear un objeto verdaderamente vacío , que, por ejemplo, se puede usar como un "diccionario", puede hacer esto:

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,           

Un objeto creado de esta manera no tiene propiedades y métodos que el programador no le agrega.

4. Fusionar objetos

Aquellos que escriben en JavaScript, siempre necesitaron crear tales objetos que incluirían el contenido de otros objetos. Esta tarea se volvió especialmente urgente cuando las clases aparecieron en JavaScript, luego cuando los programadores tuvieron que trabajar con algo como representaciones de software de widgets. Aquí le mostramos cómo crear un nuevo objeto basado en varios otros objetos:

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ 

El operador ... simplifica enormemente la solución de la tarea de fusionar objetos.

5. Parámetros de función requeridos

Establecer valores de argumento de función predeterminados es una gran extensión para JavaScript. Pero he aquí cómo hacerlo para que, sin pasar algunos parámetros obligatorios, las funciones simplemente se nieguen a funcionar:

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David'); 

Ante nosotros hay un nivel adicional de verificación de lo que se pasa a las funciones.

6. Asignación destructiva y nuevos nombres de propiedades extraídas de objetos.

La desestructuración es una nueva característica útil de JavaScript, pero a veces las propiedades recuperadas de los objetos deben tener asignados nombres diferentes de los que tienen en esos objetos. Aquí se explica cómo hacerlo:

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj; 

Esta técnica es útil en casos donde necesita evitar un conflicto de nombres de variables o constantes.

7. Análisis de cadenas de consulta

Durante muchos años, hemos escrito expresiones regulares para analizar cadenas de consulta, pero estos tiempos han pasado. Ahora, para resolver este problema, puede usar la maravillosa API URLSearchParams :

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

Usar la API URLSearchParams mucho más fácil que resolver las mismas tareas usando expresiones regulares.

Resumen

El JavaScript moderno está evolucionando muy rápidamente, con varias mejoras útiles que aparecen constantemente en él. Pero mejorar el lenguaje no significa que los programadores no necesiten pensar en el código y buscar soluciones efectivas a los diversos problemas que enfrentan. Esperamos que los pequeños trucos de JavaScript de los que hablamos hoy sean útiles.

Estimados lectores! ¿Conoces algún truco útil de programación de JS? Si es así, por favor compártalos.