Las investigaciones sugieren que hay siete elementos del lenguaje JavaScript que los desarrolladores buscan más que cualquier otro. Si bien es posible que no puedas escribir un programa JavaScript completo usando sólo estas características, ciertamente no llegarás muy lejos sin ellas. Los principiantes necesitan aprenderlos, pero también son excelentes para refrescar el cerebro de los veteranos de JavaScript. Echemos un vistazo a las características del lenguaje JavaScript que todo desarrollador necesita.
Los elementos del lenguaje JavaScript ‘más buscados’
for
buclemap
foreach
substring
array
switch
reduce
matriz: almacenar colecciones
Las colecciones de valores son un aspecto esencial de todos los lenguajes de programación. En JavaScript, usamos matrices para almacenar colecciones. Las matrices de JavaScript son increíblemente flexibles, lo que se debe en gran medida al sistema de escritura dinámica de JavaScript. Puedes declarar una matriz vacía o una que ya contenga valores:
// make a new empty array:
const myArray = [];
//add a value:
myArray.push("Happy New Year");
console.log(myArray[0]); // outputs “Happy New Year”
// make an array with values:
const myOtherArray = [0, "test", true];
Como la mayoría de los lenguajes, las matrices en JavaScript son «base 0», lo que significa que el primer elemento tiene un índice de 0 en lugar de 1. También puede ver que myOtherArray
Puede contener una diversidad de tipos: números, cadenas y booleanos.
para: El bucle clásico
El for
loop es un componente fundamental de todos los lenguajes de programación pero la versión de JavaScript tiene algunas peculiaridades. La sintaxis básica del for
bucle es:
for (let i = 0; i < 10; i++){
console.log("i is going up: "+ i);
}
Este código dice: Dame una variable llamada i, y mientras sea menor que 10, haz lo que se indica dentro de las llaves. Cada vez que lo hagas, suma 1 a i.. Esta es una variable de bucle común, donde «i» es la abreviatura de «iterador».
Esta forma de for
en JavaScript es típico de muchos lenguajes. Es un tipo de bucle declarativo. Esta forma es muy flexible, ya que cada parte puede tener muchas variaciones:
// This will loop forever, unless something else changes i, because i is not modified by the loop
for (let i = 0; i < 10;){
console.log("i is going up: "+ i);
}
// you can declare multiple variables, tests and modifiers at once
for (let i = 0, j = 10; i * j < 80 && i < 10; i++, j=j+5){
console.log(i * j); // outputs 0, 15, 40, 75 and breaks
}
Puede resultar útil, especialmente cuando se trata de bucles anidados complejos, declarar iteradores más descriptivos como userIterator
o productCounter
.
También hay un for-in
bucle en JavaScript, útil para recorrer objetos JSON:
let myObject = { foo: "bar", test: 1000 }
for (let x in myObject) {
for (let x in myObject) { console.log(x + "=" + myObject[x]) }
}
// outputs: foo=bar test=1000
También puedes usar for-in
en matrices:
let arr = [5, 10, 15, 20];
for (let x in arr2) {
console.log(x + "=" + arr2[x]);
}
// outputs: 0=5, 1=10, 2=15, 3=20
En los objetos, el iterador (x) se convierte en el nombre de la propiedad. En la matriz, se convierte en el índice. Esto luego se puede usar para acceder a las propiedades y elementos del objeto o matriz.
forEach: el bucle funcional
El JavaScript moderno abarca la programación funcional y el forEach
La función es un excelente ejemplo de ello. El forEach
loop es una forma simple y funcional de iterar sobre colecciones: mantiene toda la lógica estricta, sin declarar variables iteradoras extrañas como lo haría con for
.
Aquí puedes ver la sencillez de forEach
:
arr.forEach((x) => { console.log (x) })
// outputs: 5, 10, 15, 20
Hemos pasado una función a forEach
, definiendo una función anónima en línea usando la sintaxis de flecha. Hacer esto es muy común. (También podríamos declarar una función con nombre y pasarla).
Notarás que en forEach
a la variable expuesta, en nuestro caso x, se le da en realidad el valor del elemento, no el índice.
Hay otra forma sencilla de obtener un iterador, que tiene el mismo comportamiento:
arr.forEach((x, i) => { console.log (i + "=" + x) })
// outputs 0=5, 1=10, 2=15, 3=20
También verás la sintaxis de flecha simplificada con forEach
(que tiene el mismo comportamiento):
arr2.forEach(x => console.log(x))
Esta sintaxis regresa automáticamente, pero forEach
no requiere un valor de retorno.
Muchos desarrolladores prefieren forEach
a lo tradicional for
bucle. En general, utilice cualquier sintaxis de bucle que haga que su código sea más claro y fácil de entender. (Eso también facilitará la comprensión para otros desarrolladores).
mapa: El modificador funcional
Mientras forEach
simplemente recorre cada elemento, el map
La función le permite realizar un bucle en la matriz y realizar acciones en cada elemento. El map
La función devuelve una nueva colección con la acción aplicada a cada elemento.
Digamos que queremos tomar nuestra matriz y multiplicar cada elemento por 10:
let modifiedArr = arr.map((x) => { return x * 10 } )
// modifiedArray now holds: [50, 100, 150, 200]
También puedes utilizar el formulario corto:
let modifiedArr = arr.map(x => x * 100 )
// modifiedArray now holds: [500, 1000, 1500, 2000]
Usando el formulario largo, puedes realizar lógica arbitraria dentro de la devolución de llamada:
let modifiedArr = arr.map((x) => {
let foo = 1000;
// Do more stuff
return x * foo;
})
A medida que las devoluciones de llamada se vuelven más elaboradas, map
La sencillez decae. Es decir: prefiera devoluciones de llamada simples siempre que sea posible.
reducir: convertir colecciones en un solo valor
Junto a map
, reduce
es una parte funcional de JavaScript. Le permite tomar una colección y recuperar un valor único. Cada vez que necesite realizar una operación en una matriz que la «reduzca» a un solo valor, puede usar reduce
:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, number) => accumulator + number);
console.log(sum); // Output: 10
El reduce
toma una función de dos argumentos, donde el primer argumento es el acumulador—una variable que vivirá en todas las iteraciones y, en última instancia, se convertirá en el resultado del reduce
llamar. El segundo argumento (number
) es el valor del elemento para la iteración.
Puedes usar reduce
para especificar un valor inicial estableciendo un segundo argumento después de la función de devolución de llamada:
// With initial value of 10
const sum2 = numbers.reduce((accumulator, number) => accumulator + number, 10);
console.log(sum2); // Output: 20 (10 + 1 + 2 + 3 + 4)
Esto también es útil cuando la colección puede estar vacía. En ese caso, el segundo argumento actúa como valor predeterminado.
subcadena
String.substring
es un método en string
objetos que te permiten obtener una porción de la cadena:
// Let’s get the substring of this Emerson quote:
let myString = "Enthusiasm is the mother of effort, and without it nothing great was ever achieved."
console.log(myString.substring(0,34));
// outputs: 'Enthusiasm is the mother of effort'
cambiar
A switch
es una característica de lenguaje común que maneja el flujo de control de bifurcación. Los desarrolladores usan switch
para manejar sucursales de una manera más compacta y comprensible que if/else
cuando hay muchas opciones. A lo largo de los años, JavaScript switch
La declaración se ha vuelto más poderosa. La sintaxis básica de un switch
es:
switch (word) {
case "Enthusiasm":
console.log("This word is about passion and excitement.");
break;
case "mother":
console.log("This word is about the source or origin.");
break;
case "effort":
console.log("This word is about hard work and dedication.");
break;
default:
console.log("I don't have specific analysis for this word.");
}
El switch
La palabra clave acepta una variable, que en este caso es word
. Cada declaración de caso corresponde a un posible valor de la switch
variable. Note que tenemos que usar el break
declaración para poner fin al bloqueo del caso. Esto es diferente de muchas construcciones donde se utilizan llaves para definir el alcance. si un break
Si se omite la declaración, el código “pasará” al siguiente case
declaración.
La declaración por defecto nos da la case
que se ejecutará si nada más coincide. Esto es opcional.
Así es como podríamos usar esto switch
declaración con nuestra cita de Emerson:
let myString = "Enthusiasm is the mother of effort, and without it nothing great was ever achieved."
function analyzeWord(word) {
switch (word) {
case "Enthusiasm":
console.log("This word is about passion and excitement.");
break;
case "mother":
console.log("This word is about the source or origin.");
break;
case "effort":
console.log("This word is about hard work and dedication.");
break;
default:
console.log("I don't have specific analysis for this word.");
}
}
myString.split(" ").forEach((word) => analyzeWord(word));
Este ejemplo reúne varios elementos. dividimos el string
en subcadenas con split(“ “)
luego repita cada palabra usando forEach
pasando la palabra a nuestros switch
declaración envuelta en una función. Si ejecuta este código, generará una descripción para cada palabra conocida y el valor predeterminado para las demás.
Conclusión
Hemos recorrido algunos de los fundamentos de JavaScript más útiles y buscados. Cada uno de estos es una parte esencial de su conjunto de herramientas de JavaScript.
Copyright © 2024 IDG Communications, Inc.