Embed Size (px)
Citation preview
Java Script para adultos
Diego Rafael Perin HonórioFront-end Developer
G4 SOLUTIONS
Ecma Script
• European Computer Manufacturers Association
• ECMA Script
• ECMA Internacional
• Base do Javascript
Aprimoramentos ES6
• Variable Declaration
• Block Scope
• Destructuring Assignment
• Enhanced parameters
• Template String
• Arrow Function
• Proxy
VARIABLE DECLARTION
var a = 0;
let b = 0;
if (true) {
console.log(a);
console.log(b);
var a = 1;
let b = 1;
console.log(a);
console.log(b);
}
console.log(a);
console.log(b);
var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a);
console.log(b);
}
console.log(a);
console.log(b);
var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a); // 1
console.log(b); // 1
}
console.log(a);
console.log(b);
var a = 0;
let b = 0;
if (true) {
console.log(a); // 0
console.log(b); // undefined
var a = 1;
let b = 1;
console.log(a); // 1
console.log(b); // 1
}
console.log(a); // 1
console.log(b); // 0
BLOCK SCOPE
for(var i = 0; i < 3; i++){
var x = i + i;
console.log(x);
}
console.log(x); // 4
for(var i = 0; i < 3; i++){
let x = i + i;
console.log(x);
}
console.log(x); // Error
DESTRUCTING ASSIGNMENT
obj = { first:'a',second:'b',third:'c'};
var x = obj.first;
var y = obj.second;
var z = obj.third;
Destructuring Assignment
var {x,y,z} = { first:'a',second:'b',third:'c'};
// x = 'a', y = 'b', z = 'c‘
var {x,y,z} = ['a','b','c'];
// x = 'a', y = 'b', z = 'c‘
ENHANCED PARAMETERS
Default Params
function say(name) {
name = name || 'Anonymous';
return ‘Olá, ' + name + '!';
}
console.log(say()); // Olá, Anonymous!
console.log(say(‘Diego')); // Olá, Diego!
function say(name = 'Anonymous') {
return ‘Olá, ' + name + '!';
}
console.log(say()); // Olá, Anonymous!
console.log(say('Diego')); // Olá, Diego!
Rest Parameter
function f(a, b){
console.log(args);
var args =
Array.prototype.slice.call(arguments, f.length);
console.log(args);
}
f(1,2,3,4,5);
//[1,2,3,4,5];
//[3,4,5];
function(a, b, ...args) {
console.log(args);
}
//[3,4,5];
function ordernarArgumentos() {
var ordenados = arguments.sort();
return ordenados;
}
console.log(ordernarArgumentos(5,3,7,1));
// Error arguments.sort is not a function
// Arguments não é um objeto array, embora pareça
Shorthand Assignment
var arr1 = [0, 1];
var arr2 = [2, 3];
for(var i=0; i < arr2.length; i++){
arr1.push(arr2[i]);
}
//arr1 = [0,1,2,3]
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var union = [arr1, arr2]; //[0,1,2,3,4,5]
arr1.push(...arr2); //[0,1,2,3,4,5]
let x = 5;
let y = 20;
let coordinates = {
x,
y,
z: 10,
};
console.log(coordinates); // { x: 5, y: 20, z: 10 }
TEMPLATE STRING
let firstName = 'Diego';
let lastName = 'Honório';
let greeting = 'Hi, my name is ' + firstName + ' ' +
lastName + '.';
let firstName = ‘Diego';
let lastName = ‘Honório';
let greeting = `Hi, my name is ${firstName} ${lastName}.`;
ARROW FUNCTION
var namesList = ['Diego', 'Rafael', 'Perin', 'Honório'];
var names = namesList.filter(function (number) {
return name.length <= 5;
});
console.log(names); // ['Diego', 'Rafael', 'Perin']
let namesList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let names = namesList.filter(name => name.length <= 5);
console.log(names); // ['Diego', 'Rafael', 'Perin']
PROXY
var employee = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
employee = Proxy(employee, interceptor);
employee.salary = 300;
//salary is changed to 300
CLASS
class Pessoa {
constructor(nome, email) {
this.nome = nome;
this.comidas = [];
// verifica se o e-mail foi preenchido
if (email) {
this.email = email;
}
}
fala() {
console.log("Olá, meu nome é "+this.nome+" e meu email é
"+this.email);
}
get primeiroNome() {
return this.nome.split(" ")[0];
}
set gostaDe(comida) {
this.comidas.push(comida);
}
}
HERANÇA
class PessoaFisica extends Pessoa{
constructor(nome, email, cpf){
super(nome, email);
this.cpf = cpf;
}
dizCpf(){
console.log(this.cpf);
}
}
