ansango

Javascript 馃搼

Autor
avatar
Name
Anibal Santos
Publicado
Lectura
27 '
Javascript 馃搼

Cualquiera puede olvidar c贸mo buscar espacios en blanco con regex, eliminar un elemento de un Array o hacer un bucle For. Esta hoja de trucos b谩sicos, trata de proporcionar una referencia b谩sica para nosotros, los desarrolladores.

  1. Comentarios
  2. Tipos de datos
  3. Variables
  4. Strings
  5. Arrays
  6. M茅todos de array
  7. Objetos
  8. Booleanos
  9. If/Else
  10. Switch
  11. Operadores de comparaci贸n
  12. Bucles
  13. Funciones
  14. Regex
  15. Orientaci贸n a objetos
  16. Orientaci贸n a objetos ES6
  17. Import y export ES6
  18. Async/Await

Comentarios

// Comentario en una sola l铆nea
/* Comentario en
varias l铆neas */

Tipos de datos

JavaScript proporciona siete tipos de datos diferentes:

Data Types Examples
undefined Una variable a la que no se le ha asignado un valor es de tipo undefined.
null sin valor.
string 'a', 'aa', 'aaa', 'Hello!', '11 cats'
number 12, -1, 0.4
boolean true, false
object Una colecci贸n de propiedades.
symbol Representa un identificador 煤nico.

Variables

// declara una variable
var ourName
// almacena valores
myNumber = 5
myString = 'myVar'
// declarar variables con el operador de asignaci贸n
var myNum = 0
// sumar, restar, multiplicar y dividir
myVar = 5 + 10 // 15
myVar = 12 - 6 // 6
myVar = 13 * 13 // 169
myVar = 16 / 2 // 8
// incrementar o decrecer el valor
i++ // the equivalent of i = i + 1
i-- // the equivalent of i = i - 1;
// decimales
var ourDecimal = 5.7 // float

ES6 var, let y const

  • A diferencia de var, let arroja un error si se declara la misma variable dos veces.
  • Las variables declaradas con let dentro de un bloque, sentencia o expresi贸n, su alcance est谩 limitado a ese bloque, sentencia o expresi贸n.
  • Las variables declaradas con const son de s贸lo lectura y no pueden ser reasignadas.
  • Los objetos (incluyendo arrays y funciones) asignados a una variable usando const siguen siendo mutables y s贸lo se impide la reasignaci贸n del identificador de la variable.

Para asegurar que los datos no cambian, JavaScript proporciona una funci贸n Object.freeze para prevenir la mutaci贸n de datos.

let obj = {
name: 'FreeCodeCamp',
review: 'Awesome',
}
Object.freeze(obj)
obj.review = 'bad' //se ignorar谩. Mutaci贸n no permitida
obj.newProp = 'Test' //se ignorar谩. Mutaci贸n no permitida
console.log(obj)
// { name: "FreeCodeCamp", review: "Awesome"}

Strings

// escapar de las comillas literales
var sampleStr = 'Alan dijo: "Pedro est谩 aprendiendo JavaScript".'
// esto imprime: Alan dijo, "Peter est谩 aprendiendo JavaScript".
// concatenar string
var ourStr = 'Yo voy primero. ' + 'Yo soy el segundo.'
// concatenando strings con +=
var ourStr = 'Yo voy primero. '
nuestroStr += 'Vengo segundo.'
// construyendo strings con variables
var ourName = 'freeCodeCamp'
var ourStr = 'Hola, nuestro nombre es ' + ourName + ', 驴c贸mo est谩s?'
// a帽adiendo variables a strings
var anAdjective = 'Impresionante'
var ourStr = 'freeCodeCamp es '
ourStr += anAdjective

Secuencias de escape

C贸digo Salida
\' comillas simples (')
\" comillas dobles (")
\\ backslash (\)
\n nueva l铆nea
\r carriage return
\t tab
\b backspace
\f form feed

Longitud de un string

'Alan Peter'.length // 10

Split y Join

let str = 'a string'
let splittedStr = str.split('')
// 鈥嬧嬧嬧嬧媅 'a', ' ', 's', 't', 'r', 'i', 'n', 'g' ]鈥嬧嬧嬧嬧
let joinedStr = splittedStr.join('')
// a string鈥嬧嬧嬧嬧

脥ndice de una string

//el primer elemento tiene un 铆ndice de 0
var firstLetterOfFirstName = ''
var firstName = 'Ada'
firstLetterOfFirstName = firstName[0] // A
// encontrar el 煤ltimo car谩cter de un string
var firstName = 'Ada'
var lastLetterOfFirstName = firstName[firstName.length - 1] // a

ES6 Template Literals

const person = {
name: 'Zodiac Hasbro',
age: 56,
}
// Template literal con interpolaci贸n de varias l铆neas y strings
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`
console.log(greeting)
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.

Arrays

var sandwich = ['peanut butter', 'jelly', 'bread'][
// arrays anidados
(['Bulls', 23], ['White Sox', 45])
]

脥ndice de un array

var ourArray = [50, 60, 70]
var ourData = ourArray[0] // 50
// modificar un array con 铆ndices
var ourArray = [50, 40, 30]
ourArray[0] = 15 // equals [15,40,30]
// acceder a matrices multidimensionales con 铆ndices
var arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[[10, 11, 12], 13, 14],
]
arr[3] // [[10,11,12], 13, 14]
arr[3][0] // [10,11,12]
arr[3][0][1] // 11

Manipular arrays con reverse, push, pop, shift and unshift

// reverse() le da la vuelta al array
;[1, 'two', 3].reverse() // 鈥嬧嬧嬧嬧媅 3, 'two', 1 ]
// push() a帽ade un elemento al final del array
var arr = [1, 2, 3]
arr.push(4) // arr is now [1,2,3,4]
// pop() para eliminar el 煤ltimo valor del array
var threeArr = [1, 4, 6]
var oneDown = threeArr.pop()
console.log(oneDown) // 6
console.log(threeArr) // [1, 4]
// shift() elimina el primer elemento del array
var ourArray = [1, 2, [3]]
var removedFromOurArray = ourArray.shift()
// [2, [3]].
// unshift() a帽ade un elemento al principio del array
var ourArray = ['Stimpson', 'J', 'cat']
ourArray.shift() // ["J", "cat"]
ourArray.unshift('Happy') // ["Happy", "J", "cat"]

Eliminar cualquier elemento con splice

// el primer par谩metro es el 铆ndice, el segundo indica el n煤mero de elementos a eliminar.
let array = ['today', 'was', 'not', 'so', 'great']
array.splice(2, 2)
// elimina 2 elementos empezando por el tercer elemento
// ['today', 'was', 'great']
// tambi茅n devuelve un nuevo array que contiene el valor de los elementos eliminados
let array = ['I', 'am', 'feeling', 'really', 'happy']
let newArray = array.splice(3, 2) // ['really', 'happy']
// el tercer par谩metro, representa uno o m谩s elementos
function colorChange(arr, index, newColor) {
arr.splice(index, 1, newColor)
return arr
}
let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf']
colorScheme = colorChange(colorScheme, 2, '#332327')
// hemos eliminado '#bb7e8c' y a帽adido '#332327' en su lugar
// colorScheme es ahora igual a ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']

Copiar un array con slice

// Copia un n煤mero determinado de elementos a un nuevo array y deja el array original intacto
let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear']
let todaysWeather = weatherConditions.slice(1, 3)
// todaysWeather es igual a ['snow', 'sleet'];
// weatherConditions sigue siendo igual a ['rain', 'snow', 'sleet', 'hail', 'clear']

indexOf

let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears']
fruits.indexOf('dates') // -1
fruits.indexOf('oranges') // 2
fruits.indexOf('pears') // 1, el primer 铆ndice en el que existe el elemento

Acceder a arrays anidados

var ourPets = [
{
animalType: 'cat',
names: ['Meowzer', 'Fluffy', 'Kit-Cat'],
},
{
animalType: 'dog',
names: ['Spot', 'Bowser', 'Frankie'],
},
]
ourPets[0].names[1] // "Fluffy"
ourPets[1].names[0] // "Spot"

ES6 Includes para saber si un array tiene un determinado elemento

let fruits = ['Banana', 'Orange', 'Apple', 'Mango']
fruits.includes('Mango') // true

ES6 Operador Spread

// El c贸digo ES5 de abajo utiliza apply() para calcular el valor m谩ximo de un array.
var arr = [6, 89, 3, 45]
var maximus = Math.max.apply(null, arr) // 89
// ...arr devuelve un array sin empaquetar. En otras palabras, extiende el array.
const arr = [6, 89, 3, 45]
const maximus = Math.max(...arr) // 89
// [...new Set(arr)] = array de valores 煤nicos
const arr = [1, 2, 2, 3, 3, 4, 5, 5]
const uniq = [...new Set(arr)] // [1,2,3,4,5]
// copiar un array
let thisArray = [true, true, undefined, false, null]
let thatArray = [...thisArray]
// thatArray es igual a [true, true, undefined, false, null]
// thisArray no se modifica y es id茅ntico a thatArray
// combinar arrays
let thisArray = ['sage', 'rosemary', 'parsley', 'thyme']
let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander']
// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']

ES6 Desestructuraci贸n de arrays para asignar variables

const [a, b] = [1, 2, 3, 4, 5, 6]
console.log(a, b) // 1, 2
// acceder a cualquier valor utilizando comas para llegar al 铆ndice deseado
const [a, b, , , c] = [1, 2, 3, 4, 5, 6]
console.log(a, b, c) // 1, 2, 5
// recoger el resto de los elementos en un array separado.
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7]
console.log(a, b) // 1, 2
console.log(arr) // [3, 4, 5, 7]

M茅todos de array

Map

var watchList = [
{
Title: 'Inception',
imdbRating: '8.8',
Type: 'movie',
},
{
Title: 'Interstellar',
imdbRating: '8.6',
Type: 'movie',
},
{
Title: 'The Dark Knight',
imdbRating: '9.0',
Type: 'movie',
},
{
Title: 'Batman Begins',
imdbRating: '7.9',
Type: 'movie',
},
]
const rating = watchList.map(function (movie) {
return { title: movie.Title, rating: movie.imdbRating }
})
/* [ { title: 'Inception', rating: '8.8' },鈥
{ title: 'Interstellar', rating: '8.6' },
{ title: 'The Dark Knight', rating: '9.0' },
{ title: 'Batman Begins', rating: '7.9' } ]*/
// or...
const rating = watchList.map((movie) => ({
title: movie.Title,
rating: movie.imdbRating,
}))
/* [ { title: 'Inception', rating: '8.8' },鈥
{ title: 'Interstellar', rating: '8.6' },
{ title: 'The Dark Knight', rating: '9.0' },
{ title: 'Batman Begins', rating: '7.9' } ]*/

Puedes ver m谩s acerca de los m茅todos de array aqu铆

Objetos

var cat = {
name: 'Whiskers',
legs: 4,
tails: 1,
enemies: ['Water', 'Dogs'],
}

Acceso a las propiedades de los objetos

Acceder con (.)

var myObj = {
prop1: 'val1',
prop2: 'val2',
}
var prop1val = myObj.prop1 // val1
var prop2val = myObj.prop2 // val2

Acceder con ([])

var myObj = {
'Space Name': 'Kirk',
'More Space': 'Spock',
NoSpace: 'USS Enterprise',
}
myObj['Space Name'] // Kirk
myObj['More Space'] // Spock
myObj['NoSpace'] // USS Enterprise

Acceder con variables

var dogs = {
Fido: 'Mutt',
Hunter: 'Doberman',
Snoopie: 'Beagle',
}
var myDog = 'Hunter'
var myBreed = dogs[myDog]
console.log(myBreed) // "Doberman"

Acceder y modificar objetos anidados

let userActivity = {
id: 23894201352,
date: 'January 1, 2017',
data: {
totalUsers: 51,
online: 42,
},
}
userActivity.data.online = 45 // o
userActivity['data'].online = 45 // o
userActivity['data']['online'] = 45

Creaci贸n de un array a partir de las claves de un objeto

let users = {
Alan: {
age: 27,
online: false,
},
Jeff: {
age: 32,
online: true,
},
Sarah: {
age: 48,
online: false,
},
Ryan: {
age: 19,
online: true,
},
}
function getArrayOfUsers(obj) {
let arr = []
for (let key in obj) {
arr.push(key)
}
return arr
}

Modificaci贸n de las propiedades de los objetos

// Actualizaci贸n de las propiedades del objeto
var ourDog = {
name: 'Camper',
legs: 4,
tails: 1,
friends: ['everything!'],
}
ourDog.name = 'Happy Camper' // o
ourDog['name'] = 'Happy Camper'
// a帽adir nuevas propiedades
ourDog.bark = 'bow-wow' // o
ourDog['bark'] = 'bow-wow'
// eliminar properties
delete ourDog.bark

Objetos para b煤squedas

var alpha = {
1:"Z",
2:"Y",
3:"X",
4:"W",
...
24:"C",
25:"B",
26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"
var value = 2;
alpha[value]; // "Y"

Comprobar propiedades de los objetos

var myObj = {
top: 'hat',
bottom: 'pants',
}
myObj.hasOwnProperty('top') // true
myObj.hasOwnProperty('middle') // false

Acceso a objetos anidados

var ourStorage = {
desk: {
drawer: 'stapler',
},
cabinet: {
'top drawer': {
folder1: 'a file',
folder2: 'secrets',
},
'bottom drawer': 'soda',
},
}
ourStorage.cabinet['top drawer'].folder2 // "secrets"
ourStorage.desk.drawer // "stapler"

Desestructuraci贸n de variables a partir de objetos

// Teniendo en cuenta el siguiente c贸digo ES5:
var voxel = { x: 3.6, y: 7.4, z: 6.54 }
var x = voxel.x // x = 3.6
var y = voxel.y // y = 7.4
var z = voxel.z // z = 6.54
// la misma sentencia de asignaci贸n con la sintaxis de desestructuraci贸n de ES6
const { x, y, z } = voxel // x = 3.6, y = 7.4, z = 6.54
// para almacenar los valores de voxel.x en a, voxel.y en b, y voxel.z en c, tambi茅n tienes esa libertad
const { x: a, y: b, z: c } = voxel // a = 3.6, b = 7.4, c = 6.54
// Desestructuraci贸n de variables de objetos anidados
const a = {
start: { x: 5, y: 6 },
end: { x: 6, y: -9 },
}
const {
start: { x: startX, y: startY },
} = a
console.log(startX, startY) // 5, 6

ES6 Desestructuraci贸n para pasar un objeto como par谩metro de una funci贸n

// Desestructurar el objeto en un argumento propio de la funci贸n.
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData
}
// tambi茅n se puede hacer as铆:
const profileUpdate = ({ name, age, nationality, location }) => {}

ES6 Declaraciones literales de objetos mediante campos simples

const getMousePosition = (x, y) => ({
x: x,
y: y,
})
// la misma funci贸n reescrita para utilizar esta nueva sintaxis:
const getMousePosition = (x, y) => ({ x, y })

Booleanos

Los booleanos s贸lo pueden tener uno de dos valores: verdadero o falso. Son b谩sicamente peque帽os interruptores de encendido y apagado, donde verdadero es "on" y falso es "off". Estos dos estados son mutuamente excluyentes.

true
false

If/Else

If

if (condition is true) {
// se ejecuta la declaraci贸n
}

Else

if (num > 10) {
return 'Bigger than 10'
} else {
return '10 or Less'
}

Else if

if (num > 15) {
return 'Bigger than 15'
} else if (num < 5) {
return 'Smaller than 5'
} else {
return 'Between 5 and 15'
}

Operador Condicional (ternario)

// esta declaraci贸n if...
function findGreater(a, b) {
if (a > b) {
return 'a is greater'
} else {
return 'b is greater'
}
}
// equivale a este operador ternario
function findGreater(a, b) {
return a > b ? 'a is greater' : 'b is greater'
}

Operadores condicionales m煤ltiples (ternarios)

// esta declaraci贸n if...
function findGreaterOrEqual(a, b) {
if (a === b) {
return 'a and b are equal'
} else if (a > b) {
return 'a is greater'
} else {
return 'b is greater'
}
}
// equivale a este operador ternario
function findGreaterOrEqual(a, b) {
return a === b ? 'a and b are equal' : a > b ? 'a is greater' : 'b is greater'
}

Switch

switch(num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
case valueN:
statementN;
break;
}

Declaraci贸n Switch por defecto

switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
default:
defaultStatement;
break;
}

Multiples opciones con la declaraci贸n Switch

switch (val) {
case 1:
case 2:
case 3:
result = '1, 2, or 3'
break
case 4:
result = '4 alone'
}

Operadores de comparaci贸n

Operador Significado
== Igualdad
=== Igualdad estricta
!= Desigualdad
!== Desigualdad estricta
> Mayor que
>= Mayor o igual que
< Menos que
<= Menor o igual que
&& Y
|| O

Bucles

While

var ourArray = []
var i = 0
while (i < 5) {
ourArray.push(i)
i++
}

Do...While

var ourArray = []
var i = 0
do {
ourArray.push(i)
i++
} while (i < 5)

For

var ourArray = []
var i = 0
while (i < 5) {
ourArray.push(i)
i++
}
// Contar hacia atr谩s con un bucle For
var ourArray = []
for (var i = 10; i > 0; i -= 2) {
ourArray.push(i)
}
// Iterar a trav茅s de un array
var arr = [10, 9, 8, 7, 6]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// Bucles for anidados
var arr = [
[1, 2],
[3, 4],
[5, 6],
]
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
console.log(arr[i][j])
}
}

ES6 for-of

for (let value of myArray) {
console.log(value)
}

Funciones

function functionName() {
console.log('Hello World')
}
functionName() // llamada a la funci贸n

Argumentos de la funci贸n

function ourFunctionWithArgs(a, b) {
console.log(a - b)
}
ourFunctionWithArgs(10, 5) // 5

Return

function plusThree(num) {
return num + 3
}
var answer = plusThree(5) // 8

Funciones autoinvocadas

;(function () {
console.log('A cozy nest is ready')
})()

ES6 Arrow Functions

const myFunc = function () {
const myVar = 'value'
return myVar
}
// se puede reescribir as铆
const myFunc = () => {
const myVar = 'value'
return myVar
}
// y as铆 si no hay cuerpo de la funci贸n, y s贸lo un valor de retorno
const myFunc = () => 'value'
// para pasar par谩metros
const doubler = (item) => item * 2

ES6 Arrow Functions de orden superior

FBPosts.filter(function (post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500
})
// la funci贸n anterior se puede reescribir as铆
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)

ES6 Opetador Spread con par谩metros de funci贸n

Con el operador spread, se pueden crear funciones que toman un n煤mero variable de argumentos. Estos argumentos se almacenan en una matriz a la que se puede acceder posteriormente desde el interior de la funci贸n.

function howMany(...args) {
return 'You have passed ' + args.length + ' arguments.'
}
console.log(howMany(0, 1, 2)) // Has pasado 3 argumentos
console.log(howMany('string', null, [1, 2, 3], {})) // Has pasado 4 argumentos.

ES6 Funciones Declarativas dentro de Objetos

// Al definir funciones dentro de los objetos en ES5, tenemos que utilizar la palabra clave function
const person = {
name: 'Taylor',
sayHello: function () {
return `Hello! My name is ${this.name}.`
},
}
// Con ES6, se puede eliminar la palabra clave function y los dos puntos
const person = {
name: 'Taylor',
sayHello() {
return `Hello! My name is ${this.name}.`
},
}

Regex

Char Descripci贸n
\ Escapa a un car谩cter especial.
| B煤squeda de patrones m煤ltiples. Para que coincida con "s铆" o "no", la regex es /s铆 - no/.
i Esta bandera se utiliza para ignorar las may煤sculas y min煤sculas. /ignorecase/i.
g Buscar o extraer un patr贸n m谩s de una vez.
. El car谩cter comod铆n . coincidir谩 con cualquier car谩cter excepto con las l铆neas nuevas.
[] Permite definir los caracteres que deben coincidir. /b[au]g/ coincidir谩 con "bag", "bug" pero no con "bog".
[a-z] Coinciden con todos los caracteres entre la a y la z.
[1-9] Coinciden con todos los n煤meros entre el 1 y el 9.
[a-z1-9] Coinciden con todos los caracteres entre la a y la z, y los n煤meros entre el 1 y el 9.
[^] Coincidir con los caracteres que no est谩n en el conjunto. [^a-e] coincide con todos los dem谩s caracteres excepto A, B, C, D y E.
+ Coinciden con 1 o m谩s apariciones del car谩cter anterior en una fila.
* Coinciden con 0 o m谩s apariciones del car谩cter anterior.
? Coincide con 0 o 1 ocurrencia del car谩cter anterior. 脷til para las coincidencias perezosas.
^ Buscar patrones al principio de las cadenas.
$ Buscar patrones al final de una cadena.
\w Igual a [A-Za-z0-9_]. Coincide con may煤sculas, min煤sculas, n煤meros y el car谩cter de subrayado (-).
\W Coincide con cualquier car谩cter que no sea una palabra. Equivale a [^a-za-z0-9_].
\d Equivale a [0-9]. Coincide con un d铆gito.
\D Equivale a [^0-9]. Coincide con un no d铆gito.
\s Coincide con un espacio en blanco.
\S Coinciden con todo excepto los espacios en blanco.
a{2,5} Coincidir con la letra a entre 3 y 5 veces.
a{2,} Especifique s贸lo el n煤mero menor de coincidencias.
a{5} Especificar el n煤mero exacto de coincidencias.
(...) Especificar un grupo al que se puede acceder con n煤mero (desde 1)

M茅todos Regex

M茅todo Descripci贸n
test() Devuelve true o false si el patr贸n coincide con una cadena o no.
match() Extrae las coincidencias reales encontradas.
replace() Buscar y reemplazar texto en una cadena.

Ejemplos

// el m茅todo test devuelve true o false si el patr贸n coincide con una cadena o no
let myString = 'Hello, World!'
let myRegex = /Hello/
let result = myRegex.test(myString)
// extrae las coincidencias de un regex con el m茅todo match
let extractStr = "Extract the word 'coding' from this string."
let codingRegex = /coding/
let result = extractStr.match(codingRegex)
// Search and replace
let wrongText = 'The sky is silver.'
let silverRegex = /silver/
wrongText.replace(silverRegex, 'blue') // devuelve "El cielo es azul".
// buscar varios patrones utilizando el operador de alternancia u OR: |
let petString = 'James has a pet cat.'
let petRegex = /dog|cat|bird|fish/
let result = petRegex.test(petString)
// ignora las may煤sculas o min煤sculas
let myString = 'freeCodeCamp'
let fccRegex = /freeCodeCamp/i // flag i
let result = fccRegex.test(myString)
// Buscar o extraer un patr贸n m谩s de una vez
let twinkleStar = 'Twinkle, twinkle, little star'
let starRegex = /Twinkle/gi // a regex can have multiple flags
let result = twinkleStar.match(starRegex)
// El car谩cter comod铆n . coincidir谩 con cualquier car谩cter, excepto las l铆neas nuevas.
let exampleStr = "Let's have fun with regular expressions!"
let unRegex = /.un/
let result = unRegex.test(exampleStr)
// Definir los caracteres a coincidir, en este ejemplo todas las vocales en quoteSample
let quoteSample = 'Beware of bugs in the above code; I have only proved it correct, not tried it.'
let vowelRegex = /[aeiou]/gi
let result = quoteSample.match(vowelRegex)
// Coincidir con todos los caracteres en quoteSample (entre a y z)
let quoteSample = 'The quick brown fox jumps over the lazy dog.'
let alphabetRegex = /[a-z]/gi
let result = quoteSample.match(alphabetRegex)
// Coincidir con todos los caracteres entre dos caracteres y n煤meros
let quoteSample = 'Blueberry 3.141592653s are delicious.'
let myRegex = /[h-s2-6]/gi
let result = quoteSample.match(myRegex)
// Coincidir con todo lo que no sea un n煤mero o una vocal
let quoteSample = '3 blind mice.'
let myRegex = /[^aeiou0-9]/gi
let result = quoteSample.match(myRegex)
// Coincidir con 1 o m谩s apariciones del car谩cter anterior (* para 0 o m谩s)
let difficultSpelling = 'Mississippi'
let myRegex = /s+/g
let result = difficultSpelling.match(myRegex)
// ? Coincide con 0 o 1 ocurrencia del car谩cter anterior. 脷til para la concordancia perezosa
let text = 'titanic'
let myRegex = /t[a-z]*?i/
let result = text.match(myRegex)
// Buscar patrones al principio de las cadenas
let rickyAndCal = 'Cal and Ricky both like racing.'
let calRegex = /^Cal/
let result = calRegex.test(rickyAndCal)
// Buscar patrones al final de una cadena
let caboose = 'The last car on a train is the caboose'
let lastRegex = /caboose$/
let result = lastRegex.test(caboose)
// \w es igual a [A-Za-z0-9_]
let quoteSample = 'The five boxing wizards jump quickly.'
let alphabetRegexV2 = /\w/g
let result = quoteSample.match(alphabetRegexV2).length
// Coincidir s贸lo con las h de 3 a 6 letras en la palabra "Oh no"
let ohStr = 'Ohhh no'
let ohRegex = /Oh{3,6} no/
let result = ohRegex.test(ohStr)
// Coincide con la versi贸n en ingl茅s americano (favorite) y en ingl茅s brit谩nico (favorite) de la palabra
let favWord = 'favorite'
let favRegex = /favou?rite/
let result = favRegex.test(favWord)
// Los grupos () le permiten reutilizar patrones
let repeatNum = '42 42 42'
let reRegex = /^(\d+)\s\1\s\1$/ // cada 1 representa el grupo (\d+)
let result = reRegex.test(repeatNum)
// Elimina todos los espacios al principio y al final de una cadena
let hello = ' Hello, World! '
let wsRegex = /^\s+(.*\S)\s+$/
let result = hello.replace(wsRegex, '$1') // devuelve 'Hello, World!'

Orientaci贸n a objetos

let duck = {
name: 'Aflac',
numLegs: 2,
sayName: function () {
return 'The name of this duck is ' + this.name + '.'
},
}
duck.sayName() // Devuelve "El nombre de este pato es Aflac".

Constructores y nuevos objetos

Los constructores siguen algunas convenciones:

  • Los constructores se definen con un nombre en may煤sculas para distinguirlos de otras funciones que no son constructores.
  • Los constructores utilizan la palabra clave this para establecer las propiedades del objeto que van a crear. Dentro del constructor, this se refiere al nuevo objeto que crear谩.
  • Los constructores definen propiedades y comportamientos en lugar de devolver un valor como pueden hacer otras funciones.
// constructor
function Bird(name, color) {
this.name = name
this.color = color
}
// crear una nueva instancia de Bird
let cardinal = new Bird('Bruce', 'red')
let duck = new Bird('Donald', 'blue')
// acceder y modificar el objeto blueBird
cardinal.name // Bruce
cardinal.color // red
cardinal.color = green
cardinal.color // green
// comprobar si un objeto es una instancia de un constructor
cardinal instanceof Bird // true
crow instanceof Bird // false
// comprueba las propiedades de los objetos (nombre, color, n煤mero de patas)
cardinal.hasOwnProperty('color') // true
cardinal.hasOwnProperty('age') // false
// comprobar las propiedades de un objeto con la propiedad del constructor
cardinal.constructor === Bird // true
// utilizar constructor.prototype para a帽adir nuevas propiedades a los constructores de objetos
Bird.prototype.cute = true
cardinal.cute // true
crow.cute // true
// a帽adir m谩s de una propiedad y m茅todo a un constructor
Bird.prototype = {
constructor: Bird, // especificar el constructor
numLegs: 2, // nueva propiedad
eat: function () {
// new method
console.log('nom nom nom')
},
describe: function () {
// new method
console.log('My name is ' + this.name)
},
}
let chicken = new Bird('Dinner', 'brown')
chicken.numLegs // 2
chicken.eat() // nom nom nom
chicken.describe() // My name is Dinner

Herencia

function Animal() {}
Animal.prototype = {
constructor: Animal,
eat: function () {
console.log('nom nom nom')
},
}
function Cat(name) {
this.name = name
}
// hacer que el constructor Gato herede la funci贸n eat() de Animal
Cat.prototype = Object.create(Animal.prototype)
let myCat = new Cat('charles')
myCat.eat() // nom nom nom

Add methods after Inheritance and override them

function Animal() {}
Animal.prototype.eat = function () {
console.log('nom nom nom')
}
// Constructor Perro
function Dog() {}
// hacer que el constructor de Gog herede la funci贸n eat() de Animal
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog
Dog.prototype.bark = function () {
console.log('wof wof!')
}
// el nuevo objeto tendr谩 tanto el m茅todo heredado eat() como su propio m茅todo bark()
let beagle = new Dog()
beagle.eat() // "nom nom nom"
beagle.bark() // "Woof!"
// anula un m茅todo heredado
Dog.prototype.eat = function () {
return 'nice meeeeat!'
}
let doberman = new Dog()
doberman.eat() // nice meeeeat!

Mixins

Un mixin permite que objetos no relacionados utilicen una colecci贸n de funciones.

let bird = {
name: 'Donald',
numLegs: 2,
}
let boat = {
name: 'Warrior',
type: 'race-boat',
}
// este mixin contiene el m茅todo glide
const glideMixin = function (obj) {
obj.glide = function () {
console.log('gliding...')
}
}
// el objeto se pasa al mixin y se le asigna el m茅todo glide
glideMixin(bird)
glideMixin(boat)
bird.glide() // "gliding..."
boat.glide() // "gliding..."

Closures para proteger las propiedades

En JavaScript, una funci贸n siempre tiene acceso al contexto en el que fue creada. Esto se llama closure. Ahora bien, la propiedad s贸lo puede ser accedida y modificada por m茅todos tambi茅n dentro de la funci贸n constructora.

function Bird() {
// en lugar de this.hatchedEgg...
let hatchedEgg = 10 // private property
this.getHatchedEggCount = function () {
// m茅todo disponible p煤blicamente que un objeto p谩jaro puede utilizar
return hatchedEgg
}
}
let ducky = new Bird()
ducky.hatchedEgg = 2 // no pasa nada
ducky.getHatchedEggCount // 10

Modules

Una expresi贸n de funci贸n inmediatamente invocada (IIFE) se utiliza a menudo para agrupar la funcionalidad relacionada en un solo objeto o m贸dulo.

let funModule = (function () {
return {
isCuteMixin: function (obj) {
obj.isCute = function () {
return true
}
},
singMixin: function (obj) {
obj.sing = function () {
console.log('Singing to an awesome tune')
}
},
}
})()
function Dog() {}
let goodBoy = new Dog()
// asignar el m茅todo singMixin al objeto goodBoy
funModule.singMixin(goodBoy)
goodBoy.sing() // Cantando con una melod铆a impresionante

ES6 Orientaci贸n a objetos

ES6 proporciona una nueva sintaxis para ayudar a crear objetos, la palabra clave class. es s贸lo una sintaxis, y no una implementaci贸n completa basada en clases del paradigma orientado a objetos, a diferencia de lenguajes como Java, o Python, o Ruby, etc.

ES6 Classes

class Book {
constructor(title, author, year) {
this.title = title
this.author = author
this.year = year
}
getSummary() {
return `${this.title} was written by ${this.author} in ${this.year}`
}
getAge() {
const years = new Date().getFullYear() - this.year
return `${this.title} is ${years} years old`
}
}
book = new Book('Book One', 'John Doe', 2016)
book.getSummary() // Book One fue escrito por John Doe en 2016
book.getAge() // Book One tiene 3 a帽os

ES6 getters y setters

class Book {
constructor(author) {
this._author = author
}
// getter
get writer() {
return this._author
}
// setter
set writer(updatedAuthor) {
this._author = updatedAuthor
}
}
const lol = new Book('anonymous')
console.log(lol.writer) // anonymous
lol.writer = 'wut'
console.log(lol.writer) // wut

ES6 M茅todos est谩ticos

Los m茅todos est谩ticos permiten utilizar m茅todos sin instanciar un objeto

class Book {
constructor(title, author, year) {
this.title = title
this.author = author
this.year = year
}
static sayHi() {
return 'Hi!'
}
}
Book.sayHi() // Hi!

ES6 Herencia

class Book {
constructor(title, author, year) {
this.title = title
this.author = author
this.year = year
}
getSummary() {
return `${this.title} was written by ${this.author} in ${this.year}`
}
}
class Magazine extends Book {
constructor(title, author, year, month) {
super(title, author, year)
this.month = month
}
sayHi() {
return 'Hi!'
}
}
mag = new Magazine('Mag', 'People', 2019, 'jan')
mag.getSummary() // Mag was written by People in 2019
mag.sayHi() // Hi!

Import y export ES6

Las lecciones en esta secci贸n manejan caracter铆sticas no relacionadas con el navegador. La importaci贸n no funcionar谩 en un navegador directamente. Sin embargo, podemos usar varias herramientas para crear c贸digo a partir de esto para que funcione en el navegador.

import

// podemos elegir qu茅 partes de un m贸dulo o archivo cargar en un archivo determinado.
import { function } from 'file_path'
// 隆Tambi茅n podemos importar variables de la misma manera!
// Importar todo desde un archivo
import * as name_of_your_choice from 'file_path'

export

Sin embargo, para que import funcione, primero debemos exportar las funciones o variables que necesitamos. Al igual que la importaci贸n, la exportaci贸n es una funci贸n que no est谩 en el navegador.

const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1)
}
export { capitalizeString } // Exportar funciones.
export const foo = 'bar' // Exportar variables.
// Como alternativa, si quieres comprimir todas las declaraciones de exportaci贸n en una sola l铆nea, puede hacer esto:
const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1)
}
const foo = 'bar'
export { capitalizeString, foo }
// Utilizar la exportaci贸n por defecto si s贸lo se exporta un valor de un archivo.
// Tambi茅n se utiliza para crear un valor de reserva para un archivo o m贸dulo
export default function add(x, y) {
return x + y
}
// y para importar
import add from 'math_functions'
add(5, 4) // devolver谩 9

Async/Await

隆JavaScript es un lenguaje s铆ncrono!

Esto significa que s贸lo se puede realizar una operaci贸n a la vez. Hay muchas maneras de que JavaScript nos proporcione la capacidad de hacer que se comporte como un lenguaje as铆ncrono. Una de ellas es con la cl谩usula Async-Await.

驴Qu茅 es async-await?

Async y Await son extensiones de las promesas. Primero tienes que entender qu茅 son Promises antes de llegar a async/await.

Async

Las funciones as铆ncronas nos permiten escribir c贸digo basado en promesas como si fuera s铆ncrono, pero sin bloquear el hilo de ejecuci贸n. Funciona de forma as铆ncrona a trav茅s del bucle de eventos. Las funciones as铆ncronas siempre devolver谩n un valor. Usar async simplemente implica que se devolver谩 una promesa, y si no se devuelve una promesa, JavaScript la envuelve autom谩ticamente en una promesa resuelta con su valor.

async function firstAsync() {
return 23
}
firstAsync().then(alert) // 23

Ejecutar el c贸digo anterior da el output alerta como 23, significa que una promesa fue devuelta, de lo contrario el m茅todo .then() simplemente no ser铆a posible.

Await

El operador await se utiliza para esperar a que se complete una promesa. Puede ser utilizado dentro de un bloque async solamente. La palabra clave await hace que JavaScript espere hasta que la promesa devuelva un resultado. Hay que tener en cuenta que s贸lo hace esperar al bloque de funci贸n async y no a toda la ejecuci贸n del programa.

El siguiente bloque de c贸digo muestra el uso de Async Await juntos.

async function firstAsync() {
let promise = new Promise((res, rej) => {
setTimeout(() => res("Now it's done!"), 1000)
});
// espera hasta que la promesa nos devuelva un valor
let result = await promise;
// "隆Ahora est谩 hecho!"
alert(result);
}
};
firstAsync();

Cosas a recordar cuando se usa Async Await

No podemos utilizar la palabra clave await dentro de las funciones regulares.

function firstAsync() {
let promise = Promise.resolve(10);
let result = await promise; // Syntax error
}

Para que la funci贸n anterior funcione correctamente, tenemos que a帽adir async antes de la funci贸n firstAsync();

Async Await hace que la ejecuci贸n sea secuencial

No tiene porque ser una cosa negativa pero tener una ejecuci贸n paralela es mucho m谩s r谩pido.

Por ejemplo:

async function sequence() {
await promise1(50) // Espera 50ms...
await promise2(50) // ...luego espera otros 50ms.
return 'done!'
}

Lo anterior tarda 100ms en completarse, no es una gran cantidad de tiempo pero sigue siendo lento.

Esto se debe a que est谩 sucediendo en secuencia. Se devuelven dos promesas, ambas tardan 50ms en completarse. La segunda promesa se ejecuta s贸lo despu茅s de que la primera promesa se resuelva. Esto no es una buena pr谩ctica, ya que las peticiones grandes pueden consumir mucho tiempo. Tenemos que hacer que la ejecuci贸n sea paralela.

Esto se puede conseguir utilizando Promise.all() .

Seg煤n MDN:

El m茅todo Promise.all() devuelve una 煤nica Promise que se resuelve cuando todas las promesas pasadas como iterable se han resuelto o cuando la iterable no contiene ninguna promesa.

Promise.all()

async function sequence() {
await Promise.all([promise1(), promise2()])
return 'done!'
}

La funci贸n promise.all() resuelve cuando todas las promesas dentro del iterable han sido resueltas y luego devuelve el resultado.

Another method:

async function parallel() {
// Inicia un temporizador de 500ms de forma as铆ncrona...
const wait1 = promise1(50)
// ...lo que significa que este temporizador ocurre en paralelo.
const wait2 = promise2(50)
// Espera 50ms para el primer temporizador...
await wait1
// ...para lo cual este temporizador ya ha terminado.
await wait2
return 'done!'
}

Async Await puede ser peligroso pero si lo usamos correctamente, nos ayudar谩 a que nuestro c贸digo sea muy legible y eficiente.

Utilizo cookies para mejorar mi contenido. Al continuar utilizando este sitio, est谩s aceptando el uso que hago de las cookies.