// Samuel Burbano
const socials = {
twitter: "@iosamuel",
facebook: "iosamuel.dev",
github: "iosamuel",
web: "iosamuel.dev"
};
const objeto = {
phrase: "Hola mundo!"
};
const { phrase: spreadThis } = objeto;
const spreaded = [...spreadThis];
console.log(spreaded);
// ["H", "o", "l", "a", " ", "m", "u", "n", "d", "o", "!"]
function restThis(...rested) {
console.log(...rested);
}
restThis(...spreaded);
// H o l a m u n d o !
const iterableObj = [1, 2, 3];
const obj = { phrase: "Hello world!" };
// Llamada de funciones
Math.max(...iterableObj); // (1, 2, 3)
// Objetos iterables, como Array y Stirng
[...iterableObj, '4', 'five', 6]; // [1, 2, 3, '4', 'five', 6]
// ECMAScript 2018: Objetos
let objClone = { ...obj }; // { phrase: "Hello World!" }
const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
const arr = [1, 2, 3];
const arr2 = [...arr]; // como arr.slice()
arr2.push(4);
// arr2 = [1, 2, 3, 4]
// arr = [1, 2, 3]
const a = [[1], [2], [3]];
const b = [...a];
b.shift().shift(); // 1
// [ [], [ 2 ], [ 3 ] ]
// [ [ 2 ], [ 3 ] ]
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
// [ 0, 1, 2, 3, 4, 5 ]
let arr3 = [...arr2, ...arr1, ...arr2];
// [ 3, 4, 5, 0, 1, 2, 3, 4, 5, 3, 4, 5 ]
const word1 = "Hello";
const word2 = "world";
const helloWorld = [...word1, " ", ...word2, "!"];
// ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields); // new Date(1970, 0, 1);
d.toDateString();
// "Thu Jan 01 1970"
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
Math.max(...arr1, ...arr2);
// 5
const word = "SPREADMEBABY";
console.log(...word);
// S P R E A D M E B A B Y
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr3 = [7, 8, 9]
arr1.push(...arr2, ...arr3);
// [0, 1, 2, 3, 4, 5, 7, 8, 9]
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
const mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
const mergedObj2 = { ...obj1, word: "hello", ...obj2, z: 90 };
// Object { foo: "baz", x: 42, word: "hello", y: 13, z: 90 }
function sum(...theArgs) {
// theArgs = [1, 2, 3]
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
// 6
console.log(sum(1, 2, 3, 4));
// 10
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]
myFun("one", "two");
// a, one
// b, two
// manyMoreArgs, []
function sortArguments() {
let sortedArgs = arguments.sort();
return sortedArgs; // this will never happen
}
console.log(sortArguments(5, 3, 7, 1));
// throws a TypeError (arguments.sort is not a function)
function sortArguments() {
let args = Array.from(arguments);
let sortedArgs = args.sort();
return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
function sortRestArgs(...theArgs) {
let sortedArgs = theArgs.sort()
return sortedArgs
}
console.log(sortRestArgs(5, 3, 7, 1)) // 1, 3, 5, 7
function multiply(multiplier, ...theArgs) {
return theArgs.map(function(element) {
return multiplier * element;
})
}
let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
let a, b, rest;
[a, b] = [10, 20];
console.log(a, b); // 10 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a, b, rest); // 10 20 [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a, b); // 10 20
({ b } = { a: 10, b: 20 });
console.log(b); // 20
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a, b, rest); // 10 20 {c: 30, d: 40}
({b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(b, rest); // 20 {a: 10, c: 30, d: 40}
const colors = ['red', 'green', 'yellow'];
const [rojo, verde, amarillo] = colors;
console.log(rojo); // "red"
console.log(verde); // "green"
console.log(amarillo); // "blue"
const colors = ['red', 'green', 'yellow'];
const [rojo, verde, amarillo, alpha = 1] = colors;
console.log(rojo); // "red"
console.log(verde); // "green"
console.log(amarillo); // "blue"
console.log(alpha); // 1
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
const arr = [1, 2, 3];
// const temp = arr[2]
// arr[2] = arr[1]
// arr[1] = temp
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1, 3, 2]
let shuffle = function (arr) { // Durstenfeld shuffle
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
};
function f() {
return [1, 2];
}
let [a, b] = f();
console.log(a); // 1
console.log(b); // 2
function f() {
return [1, 2, 3];
}
const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
function myFunc([ a, b ]) {
console.log(a, b);
}
myFunc([2, 3]);
// 2 3
myFunc();
// TypeError: undefined is not iterable
function myFunc([ a, b = 4 ] = []) {
console.log(a, b);
}
myFunc([2, 3]);
// 2 3
myFunc();
// undefined 4
const url = "https://iosamuel.dev/vue/photogallery";
const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
const [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // https:
const o = {p: 42, q: true};
const {p, q} = o;
console.log(p); // 42
console.log(q); // true
const o = {p: 42, q: true};
const {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
const {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
const {a, b: foo = 10} = {a: 3};
console.log(a); // 3
console.log(foo); // 10
function drawChart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
console.log(size, cords, radius);
}
drawChart({
cords: { x: 18, y: 30 },
radius: 30
});
const people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (let {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
const people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (let {name: n, family: { father: f, ...restOfFamily }, ...data } of people) {
console.log("Name: " + n + ", Father: " + f);
console.log("The rest of the family is: ", restOfFamily);
console.log(data);
}
// "Name: Mike Smith, Father: Harry Smith"
// {mother: "Jane Smith", sister: "Samantha Smith"}
// {age: 35}
// "Name: Tom Jones, Father: Richard Jones"
// {mother: "Norah Jones", brother: "Howard Jones"}
// {age: 25}
function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
let key = "z";
let { [key]: foo } = { z: "bar" };
// { z: foo } = { z: "bar" }
console.log(foo); // "bar"
function userNick(user) {
const field = user.type === "twitter" ? "displayName" : "nick";
const { [field]: nick } = user;
return nick;
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
},
type: "twitter"
};
var user2 = {
id: 12,
nick: "baz",
fullName: {
firstName: "Foo",
lastName: "Bar"
},
type: "facebook"
};
console.log(userNick(user)); // jdoe
console.log(userNick(user2)); // baz
// Samuel Burbano
const socials = {
twitter: "@iosamuel",
facebook: "iosamuel.dev",
github: "iosamuel",
web: "iosamuel.dev"
};