8.
291 pts Menú
< TC39 y Cierre del curso
Respuesta a: TC39 y Cierre del curso
17
manuelsilva 7418
Les dejo mi resumen del curso (algunos scripts los modifiqué por diversión jaja
Ecmascript 6
Default params
functionmyFunction(param1 = 'default', param2) { ... }
Concatenación
let hello = 'welcome';
let world = 'to the jungle!';
let guns = `${hello}${world}`// Welcome to the jungle!
Let, const, multilínea, spread and destructuration
let variable1; // Block scope
const constant1; // Block scope and constant
const stringmultiline = `this is a multi
line string`;
const array = ['item1', 'item2'];
const array2 = ['item3', 'item4'];
const allArrays = [...array, ...array2] // ['item1', 'item2' , 'item3', 'item4']
const object = {
name: 'manuel',
age: 24,
country: 'PE',
};
const { name, age } = object; // 'manuel', 24
Arrow functions
const myFunction = (params) => { ... };
const square = num => num * num; // returns num * num
Parámetros en objetos
const name = 'manuel';
const age = 24,
const object = { name, age }; // { name: 'manuel', age: 24 }
Promesas
const myPromise = () => newPromise((resolve, reject) => {
if (success) { // Make some logic to capture when the promise have success
return resolve(succesfullResponse);
}
return reject(failedResponse);
}
myPromise
.then(response => doSomething)
.catch(error => doSomethingWithError);
Clases
classmyClass{
constructor(param1, param2) {
this.param1 = param1;
this.param2 = param2;
}
sum() {
returnthis.param1 + this.param2
}
}
const calc = new myClass(2, 2);
calc.sum(); // 4
Generadores
function* myGenerator () {
yield'Paradise';
yield'city';
}
const generatorHello = myGenerator();
console.log(generatorHello.next());
console.log(generatorHello.next());
console.log(generatorHello.next());
/* { value: 'Paradise ', done: false }
{ value: 'city', done: false }
{ value: undefined, done: true } */
Módulos
// module.js
const hello = () => console.log('Welcome to the jungle');
exportdefault hello;
// index.js
import hello from'./module.js';
hello(); // 'Welcome to the jungle'
Ecmascript 7
Includes
let numbers = [1, 2, 4, 5, 9];
console.log(numbers.includes(5)); // true
console.log(numbers.includes(15)); // false
Exponencial
const base = 2;
const exponent = 16;
console.log(base ** exponent); // 65536
Ecmascript 8
Async y await
const coolSong = (iAmABadass) => {
returnnewPromise((resolve, reject) => {
if (iAmABadass === true) {
return setTimeout(() => resolve('Welcome to the jungle'),
}
return setTimeout(() => reject('All about that bass'), 2000);
})
};
const coolSongAsync = async (iAmABadass) => {
const cool = 'The coolest song is...';
console.log(cool);
try {
const song = await coolSong(iAmABadass);
console.log(song);
} catch (error) {
console.log(`Aparently something went wrong: The result is ${error
}
};
coolSongAsync(true); // The coolest song is... Welcome to the jungle
Object.entries
const data = {
name: 'Manuel',
age: 24,
rocks: true,
};
const entries = Object.entries(data);
console.log(entries);
// [ [ 'name', 'Manuel' ], [ 'age', 24 ], [ 'rocks', true ] ]
Object.values
const data = {
name: 'Manuel',
age: 24,
rocks: true,
};
const entries = Object.values(data);
console.log(entries);
// [ 'Manuel', 24, true ]
padStart
const string = 'hunt';
const theWitcher = string.padStart(9, 'wild ');
// specifies a string of 9 characters
console.log(theWitcher); // 'wild hunt'
padEnd
const string = 'the wild ';
const theWitcher = string.padEnd(13, 'hunt');
console.log(theWitcher); // 'the wild hunt'
Si se especifican más o menos caracteres, el string original se mantiene y el segundo se repite hasta
completar los caracteres o se corta dependiendo del caso
Ecmascript 8 también introduce las trailing commas 😃
Ecmascript 9
Spread en objetos (rest)
const data = {
name: 'Manuel',
age: 24,
rocks: true,
}
const { name, ...rest } = data;
console.log(rest); // { age: 24, rocks: true }
Composición de objetos
const data = {
name: 'Manuel',
age: 24,
rocks: true,
}
const additionalData = {
country: 'PE',
city: 'Trujillo',
}
const person = {
...data,
...additionalData,
}
console.log(person);
/* {
name: 'Manuel',
age: 24,
rocks: true,
country: 'PE',
city: 'Trujillo'
} */
Finally en promesas
const coolSong = (iAmABadass) => {
returnnewPromise((resolve, reject) => {
if (iAmABadass === true) {
return setTimeout(() => resolve('Welcome to the jungle'),
}
return setTimeout(() => reject('All about that bass'), 2000);
})
};
console.log('The coolest song is...');
coolSong(true)
.then((song) => {
console.log(song);
})
.catch((error) => {
console.log(`Aparently something went wrong: The result is ${error
})
.finally(() => {
console.log('They are all good songs :D');
})
/* The coolest song is...
Welcome to the jungle
They are all good songs :D */
Regex
const regex = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regex.exec('2020-06-02');
const year = match[1];
const month = match[2];
const day = match[3];
console.log(year, month, day); // 2020 06 02
Ecmascript 10
Array.flat
const messedArray = [1, 2, 3, [1, 2, 3, [1, 2, 3]], [4, 5, 6]];
const flatedArray = messedArray.flat();
const flatedArray2 = messedArray.flat(2);
console.log(flatedArray); // [ 1, 2, 3, 1, 2, 3, [ 1, 2, 3 ], 4, 5, 6 ]
console.log(flatedArray2); // [ 1, 2, 3, 1, 2, 3, 1, 2, 3, 4, 5, 6 ]
Flatmap
const messedArray = [1, 2, 3, 4, 5, 6];
const mapFlatArray = messedArray.flatMap((value) => [value * 2, value * 3]);
console.log(mapFlatArray); // [ 2, 3, 4, 6, 6, 9, 8, 12, 10, 15, 12, 18 ]
trimStart
const hello = ' welcome to the jungle '
console.log(`${hello} here is the end`);
// welcome to the jungle here is the end
console.log(`${hello.trimStart()} here is the end`);
// welcome to the jungle here is the end
console.log(`${hello.trimEnd()} here is the end`);
// welcome to the jungle here is the end
Optional catch bind
try {
...
} catch {
...
} // no es necesario pasar error al catch
Object.fromEntries
const data = [
['name', 'Manuel'],
['age', 24],
['rocks', true],
];
const object = Object.fromEntries(data);
console.log(object); // { name: 'Manuel', age: 24, rocks: true }
Symbol description
const symbolDescription = 'My Symbol description';
const mySymbol = Symbol(symbolDescription);
console.log(mySymbol.description); // My symbol description
1 hace un mes Frontend con React.JS
Curso de ECMAScript 6+ • TC39 y Cierre del curso
Escribe tu comentario +2
Jahziel.Duarte 4336 Puntos un mes
2 Gracias!
