ECMA Script 6 Simple Course, Babel. Part 2
9. New characteristics on Objects work
10. Parameters Rest
11. Parameters Spread
12. Promises
13. New String Methods and Arrays
14. Flat operation
15. map and flatmap operation
reference from FalconMaster course.
9. New characteristics on Objects work
Create an object with function inside him.
const createObject = function (name, age) {
return {
name: name,
age: age
}
}
console.log( createObject("Juan", 24));
console.output: Object { name: "Juan", age: 24 }
Using arrow function
const createObject = (name, age) => {
return {
name: name,
age: age
}
}
console.log( createObject("Juan", 24));
Not needed the repetitive names.
const createObject = (name, age) => {
return {
name,
age
}
}
console.log( createObject("Juan", 24));
console output:
Adding a function to the object that return an string with formated data.
const createObject = (name, age) => {
return {
name,
age,
showInfo: function showInfo() { return `name: ${name} age: ${age}`}
}
}
console.log( createObject("Juan", 24).showInfo());
Same but simplifying
const createObject = (name, age) => {
return {
name,
age,
showInfo: function() { return `name: ${name} age: ${age}`}
}
}
With arrow function
console.log( createObject("Juan", 24).showInfo());
const createObject = (name, age) => {
return {
name,
age,
showInfo: () => { return `name: ${name} age: ${age}`}
}
}
console.log( createObject("Juan", 24).showInfo());
Simplifying even more
const createObject = (name, age) => {
return {
name,
age,
showInfo() { return `name: ${name} age: ${age}`}
}
}
console.log( createObject("Juan", 24).showInfo());
console output: name: Juan age: 24
All this diferent ways of object code "createObject" is transpiled like the next way
"use strict";
var createObject = function createObject(name, age) {
return {
name: name,
age: age,
showInfo: function showInfo() {
return "name: ".concat(name, " age: ").concat(age);
}
};
};
console.log(createObject("Juan", 24).showInfo());
10. Parameters Rest
Lets pass some many parameters to a function
const showInfo = (name, age, email, country ) => {
console.log(name, age, email, country );
}
showInfo("Funanito", 23, "fulanito@email.com", "México");
console output: Funanito 23 fulanito@email.com México
We can simplify the code to pass all these parameters, like this
const showInfo = (...data) => {
console.log(data );
}
showInfo("Funanito", 23, "fulanito@email.com", "México");
console output: Array(4) [ "Funanito", 23, "fulanito@email.com", "México" ]
We can see that all the parameters are inserted in an array with the use of ...containerOfParametersName
Babel transpile the Spread operation like this
"use strict";
var showInfo = function showInfo() {
for (var _len = arguments.length, data = new Array(_len), _key = 0; _key < _len; _key++) {
data[_key] = arguments[_key];
}
console.log(data);
};
showInfo("Funanito", 23, "fulanito@email.com", "México");
console output: Array(4) [ "Funanito", 23, "fulanito@email.com", "México" ]
11. Parameters Spread
Lets pass a collection (Array) of data as parameter, and the spread operation will spread the data.
const showInfo = (...data) => {
console.log(data);
}
const arrData = ['Perenganito',54,'Perenganito@gmail.com',"México"];
showInfo( ...arrData);
console output: Array(4) [ "Perenganito", 54, "Perenganito@gmail.com", "México" ]
In this case the parameter passed in showInfo function, is not an array, is processed as separated parameters.
12. Promises
When an asyncronous process is called, and wait for an success or not answer, the promises can help to do the job.
const myPromise = new Promise( (resolve, reject) => {
setTimeout( () => {
const asyncProcessCompleted = true;
if (asyncProcessCompleted){
resolve( "process Success");
}else{
reject( "process Not Success");
}
},3000);
});
myPromise.then( ( message) => {
alert( message);
});
myPromise.catch( ( message) => {
alert( message);
});
13. New String Methods and Arrays
const text = "Fulanito this is a text";
console.log( text.startsWith('T'));
console.log( text.toLowerCase().startsWith('T'));
console.log( text.includes('this is'));
In Arrays
To indicate if an element is contained in an array
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.includes('once'));
console.log( text.includes("twenty"));
To find the first element that meets the predicate
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.find( (e) => { return e.length > 4 }));
console output: eleven
Simplifying the expression
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.find( e => e.length > 4 ));
With other condition
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.find( e => e === "thirteen" ));
console output: thirteen
What if the condition is not satisfied
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.find( e => e === "NotInArray" ));
console output: undefined
To find the index of the element in the array that meets the condition
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.findIndex( e => e === "NotInArray" ));
console output: -1
const text = ["one","tree","once","eleven","thirteen"]
console.log( text.findIndex( e => e === "once" ));
console output: 2
14 Flat operation
Having an array that contains elements and also other arrays of elements. convert them into pure elements.
const array = [ 1, 2, [ 3, 4 ] , [5 , [ 6 ]], [[7]] ];
const flatten = array.flat();
console.log(array);
console.log(flatten);
console output:
Array(5) [ 1, 2, (2) […], (2) […], (1) […] ]
0: 1
1: 2
2: Array [ 3, 4 ]
3: Array [ 5, (1) […] ]
4: Array [ (1) […] ]
flattened
Array(7) [ 1, 2, 3, 4, 5, (1) […], (1) […] ]
0: 1
1: 2
2: 3
3: 4
4: 5
5: Array [ 6 ]
6: Array [ 7 ]
As we can see still there is a level of array that contains elements inside other array, to reach one level more we need to specify flat(2)
const array = [ 1, 2, [ 3, 4 ] , [5 , [ 6 ]], [[7]] ];
const flatten = array.flat(2);
console.log(array);
console.log(flatten);
flattened two levels
Array(7) [ 1, 2, 3, 4, 5, 6, 7 ]
15 map and flatmap operation
map and flatmap operation, map operation acts over each element of the map applying the process specified.
const transport = [ "avión","auto", "barco" ];
const transportType = ["aéreo","terrestre","maritimo"];
const dataMapped = transport.map(
(transport, idx) => [transport, transportType[idx]]
);
const dataFlatMapped = transport.flatMap(
(transport, idx) => [transport, transportType[idx]]
);
console.log(dataMapped);
console.log(dataFlatMapped);
dataMapped:
Array(3) [ (2) […], (2) […], (2) […] ]
0: Array [ "avión", "aéreo" ]
1: Array [ "auto", "terrestre" ]
2: Array [ "barco", "maritimo" ]
dataFlatMapped:
Array(6) [ "avión", "aéreo", "auto", "terrestre", "barco", "maritimo" ]
eot
No hay comentarios:
Publicar un comentario