El fragmento de código de JavaScript para problemas comunes

Última actualización el 27 de julio de 2021

Cada lenguaje de programación tiene sus defectos y peculiaridades. El lenguaje JavaScript e incluso el fragmento de código JavaScript utilizado no es una excepción. El lenguaje script se ha comportado de forma extraña en los últimos años, pero es uno de los lenguajes más utilizados en la actualidad. En su mayor parte se debe a que es el principal lenguaje interactivo de los navegadores de Internet.

Hay momentos, como programadores y codificadores, en los que tenemos problemas repetitivos de tareas simples en los que necesitamos fragmentos de código simples. En este blog, voy a presentar algunos problemas comunes que se pueden resolver fácilmente usando secuencias de comandos ES6 como parte de algunos fragmentos de código JavaScript.

Sugerencia de fragmento de código de JavaScript: use 'let' en lugar de 'var'

let es como var pero let tiene alcance. let solo es accesible en el nivel de alcance del bloque en el que se declara y se le asigna un valor. var es accesible en cualquier nivel con respecto al alcance del bloque en el que está definido. En el siguiente ejemplo, la variable 'num1' se define dentro de una declaración If y, por lo tanto, no se puede acceder a ella fuera de la función.

 si es verdad) {
  sea ​​num1 = 40;
}

sea ​​num2 = 20;

consola.log(num2, numero1);
consola.log(num1);

Producción:
20
indefinido

 sea ​​a = 25;
sea ​​b = 50;

si es verdad) {
  sea ​​a = 100;
  var c = 5;
  consola.log(a/c);
  consola.log(b/c);
}

consola.log(c);
consola.log(a);

Producción:
20
10
5
25

Use 'const' cuando el valor de una variable no cambia

const asigna un valor constante a una variable que no se puede cambiar. Cada vez que se define una variable constante, JavaScript hace referencia a la dirección del valor de la variable.

La función de flecha del fragmento de código de JavaScript, una nueva sintaxis para las funciones

Las funciones de los fragmentos de código JavaScript en ES6 han cambiado a una expresión más simple, '() => {}'.

 // Sintaxis antigua
function miHola() {
  console.log("¡Hola mundo...!");
}

// Nueva sintaxis
var miHola = () => {
  console.log("¡Hola mundo...!");
}

La nueva sintaxis puede ser un poco confusa inicialmente. Hay dos partes de la sintaxis.

 var miHola = ()

La primera parte del fragmento de código de JavaScript declara una variable y le asigna la función (). Simplemente dice que la variable es una función.

 => { //hacer algo} 

La segunda parte declara la parte del cuerpo de la función. La parte de la flecha con las llaves define la parte del cuerpo.

Otros ejemplos pero con parámetros.

 let withParameters = (a, b) => {
  consola.log(a+b);
}

con Parámetros (10, 20);

Producción:
30

 sea ​​sumOfNum = (a, b = 10) => {
  devuelve a + b;
}

consola.log(sumaDeNúmero(20);
consola.log(sumaDeNúmero(20,30);

Producción:
30
50

Bucle nuevo' para... de...'

for…of es muy similar a for…in con ligeras modificaciones. for…of itera a través de una lista de elementos como un Array y devuelve los elementos (no su índice) uno por uno. Tenga en cuenta que la variable 'num' genera cada elemento de la matriz, no el índice.

 sean números = [5,6,7,8];

for (let num de numeros) {
  consola.log(valor);
}

Producción:
5
6
7
8

 let str = 'Arturo';

for (let char of str) {
  consola.log(char);
}

Producción:
A
r
t
tu
r
o

Destrucción de la asignación de variables

Asignar variables de una matriz una por una lleva mucho tiempo y es una tontería. Simplemente use la asignación de destructor para lograr esto de manera más rápida y fácil:

 let perfil = ['Juan', 32, 'ingeniero'];

let [nombre, edad, trabajo] = perfil;

consola.log(nombre);

Producción:
John

Encuentre un objeto específico en una matriz de objetos

Una de las tareas más comunes que debe realizar en JavaScript es iterar a través de una serie de objetos para encontrar uno específico. El método de búsqueda es una solución simple aquí. Simplemente ingresa los criterios de selección usando una función anónima como argumento, y listo:

 dejar personal = [
  {id: 0, nombre: 'Nina'},
  {id: 1, nombre: 'Kevin'},
  {id: 2, nombre: 'Juan'}
]

let empleado = staff.find(emp => emp.name === 'Juan');

consola.log(cliente);

Producción:
{id: 2, nombre: 'Juan'}

Bucle sobre claves y valores de un objeto

Nuestra estructura de datos podría ser un objeto complejo que contiene varios pares clave/valor. Iterar cada par puede ser un poco extraño, pero es sencillo una vez que usamos la función de Objeto.

Después de tomar las claves del objeto, podemos recorrer las claves y los valores al mismo tiempo. En la solución que sigue, accedemos a cada par usando las variables clave y valor durante el bucle.

 let myObject = { Peter: 15, John: 20, Anne: 35 };

Object.keys(myObject).forEach((clave, valor) => {
  //...hacer algo
  consola.log(clave, valor);
});

Producción:
Pedro 15
Juan 20
Ana 35

Filtrar una matriz de objetos en función de una condición

A veces tenemos una gran variedad de datos que queremos filtrar según una condición específica. Podemos una función de filtro para lograr esto. La siguiente solución tiene una matriz de rutas de archivo. Algunos archivos están en el directorio 'datos1' mientras que otros en el directorio 'datos2'. Pensemos que queremos filtrar solo por un directorio específico:

 dejar ubicación = [
  "archivos/datos1/archivo",
  "archivos/datos1/archivo2",
  "archivos/datos2/archivo",
  "archivos/datos2/archivo2"
];

let filtro = ubicación.filtro(ruta => ruta.incluye('datos2'));

consola.log(filtro);

Producción:
[ 'archivos/dir2/archivo', 'archivos/dir2/archivo2' ]

Al especificar que la cadena de ruta debe incluir la cadena 'datos2', filtramos las rutas que no contienen 'datos2'. Recuerde, cualquier función que pase al filtro debe devolver verdadero para que el elemento se incluya en el resultado.

Asignar claves a un objeto con el mismo nombre

Cuando asigna claves a un objeto, si la clave tiene el mismo nombre que la variable que contiene el valor que desea asignar, puede omitir la asignación de valor por completo. Esto evita que tengas que repetirte, algo que todos odiamos hacer. Echale un vistazo a éste ejemplo:

 let nombre = 'Juan';
sea ​​edad = 32;
let trabajo = 'ingeniero';

// en lugar de esto
let perfil1 = { nombre: nombre, edad: edad, trabajo: trabajo };

// hacer esto
let perfil2 = { nombre, edad, trabajo };

consola.log(perfil2);

Producción:
{ nombre: 'John', edad: 32, trabajo: 'ingeniero' }

Usando el operador de propagación ES6 '…'

El operador de extensión le permite literalmente "extender" una matriz. Esto se puede usar para transformar una matriz en una lista de argumentos o incluso combinar dos matrices. También puede usarlo para formar una lista de argumentos para una función.

En el primer ejemplo, mostramos cómo funciona el operador de distribución en una matriz y convierte cada elemento en un elemento individual.

 sean numeros1 = [1,2,3,4,5];

consola.log(...números1);

Producción:
1 2 3 4 5

El segundo ejemplo combina el contenido de dos matrices creando una nueva matriz temporal que contiene ambos contenidos.

 sean numeros2 = [6,7,8,9,10];

let combinado = [...números1, ...números2];

consola.log(...combinado);

Producción:
1 2 3 4 5 6 7 8 9 10

El último ejemplo ilustra cómo el operador de propagación puede convertir una matriz en una lista de argumentos para una función. Math.max devuelve el número más alto en una lista de argumentos que se le pasan. Uno de esos argumentos fue 10, que es el más alto.

 sean numeros1 = [1,2,3,4,5];

sean numeros2 = [6,7,8,9,10];

let combinado = [...números1, ...números2];

consola.log(Math.max(...combinado));

Producción:
10

Nuevas funciones Getters y Setters

Getters y setters son una de las características útiles introducidas en ES6. Es útil si estamos usando clases en JavaScript.

 clase NombrePersona {
  constructor(nombre) {
    este.nombre = nombre;
  }
  obtener Nombre() {
    devuelve este.nombre;
  }
  establecer Nombre(nombre) {
    este.nombre = nombre;
  }
}

let person = new PersonName("Jon Snow");
consola.log(persona.Nombre); // (A)

persona.Nombre = "Dany"; // (B)
consola.log(persona.Nombre);

Producción:
jon nieve
Dani

Podemos ver que hay dos funciones dentro de la clase PersonName con las propiedades 'get' y 'set'. La propiedad 'get' se usa para obtener el valor de la variable, y la propiedad 'set' se usa para establecer el valor de la variable. También podemos ver que la función obtener nombre (A) se llama sin paréntesis, y la función establecer nombre (B) se llama sin paréntesis, y es como asignar un valor a la variable.