6 javascript avançado

Arrow function

• Substitui uma funçao normal
• let f= (x, y) => { return x + y; }
• argumentos função
• invocar a funcao Inline
• let r = ( (x, y) => x + y )(4,6); // r = 10
• Diferença de uma função normal
• Numa funçao normal o this refere-se por exemplo á funçao
• this.nums = [2,5,34,115,4,10,12];
• this.fives = [];
• this.nums.forEach(function (v) {
• if (v % 5 === 0)
• this.fives.push(v); // ERROR
• // this.fives is undefined
• // because this refers to
• // the anonymous function
• });
• Numa arrow function o this refe o lexical scope
• this.nums = [2,5,34,115,4,10,12];
• this.fives = [];
• this.nums.forEach((v) => {
• if (v % 5 === 0)
• this.fives.push(v); // OK
• // this.fives is OK
• // because this refers to
• // this in outer scope
• });

Classes

• Usa protótipos internamente
• Feitas com o metodo "constructor"
• Extends faz a extsao da classe
• this refere-se á instancia da classe
• super refere-se a classe mae
• suporta metodos estáticos
• class Rectangle extends Shape {
• constructor(id, x, y, w, h) {
• super(id, x, y);
• this.width = w;
• this.height = h;
• }
• toString () {
• return "Rectangle > " + super.toString();
• }
• }
• let o = new Rectangle(1,2,3,5,8);

Getter e Setters

• class Rectangle extends Shape {
• . . .
• set width (width) { this._width = width; }
• get width () { return this._width; }
• set height (height) { this._height = height; }
• get height () { return this._height; }
• get area () { return this._width * this._height;}
• }
• let objRect = new Rectangle(1, 50, 50, 100, 200);
• console.log(objRect.area); // 20000
• objRect.width = 30;
• console.log(objRect.area); // 6000

Maps e Sets

• let s = new Set()
• s.add("hello").add("goodbye").add("hello")
• console.log(s.size); // 2
• console.log(s.has("hello")); // true
• for (let key of s.values()) // insertion order
• console.log(key);
• s.forEach( (value, key, set) => {
• // On a set, key === value
• console.log( key );
• console.log( value );
• });
• Set-Guardo tipo de dados expecificos

Maps

• var m = new Map();
• m.set("key1", 1);
• m.set(2, "value2");
• for (let value of m.values()) { // 1
• console.log(value); // value2
• }
• for (let key of m.keys()) { // key1
• console.log(key); // 2
• }
• m.forEach( (value, key, set) => {
• console.log( 'm['+key+']='+value );
• } ); // m[key1]=1
• // m[2]=value2
• guarda pares de chave-valores de kualker tipo

CallBacks

• funçoes k sao passadas por parametros paraa ooutras funçoes k a invoca postriormente
• Fundamental em eventos,programação funcional,programacao assincrona
• function doSomething(callback) {
• // … code to do something …
• callback(p1, p2, p3);
• }
• ou
• doSomething(function(a, b, c) {
• // … code of callback function …
• });
• function f(a, b, c) {
• // … code of callback function …
• }

Asynchronous programming

• Several instructions may be started at once, executed
• in parallel and terminated at no particular order
• The user interface does not freezes while the browser waits
• for the response from the server
• The callback function is only executed when the response
• "arrives" from the server

Promises

• Usada em asynchronous computations
• Possiveis valores->pending: .fulfilled:,rejected:
• Kuando está pending pode passar para fulfilled ou rejected,depois disso nunca muda
• Recebe dois parametros opcionais
• 1 sucesso 2 falha
• var promise = new Promise(function(resolve, reject) {
• // do a thing, possibly async, then…
• if (/* everything turned out fine */) {
• resolve("Stuff worked!");
• }
• else {
• reject(Error("It broke"));
• }
• });
• var promise = new Promise(. . . );
• promise.then(
• function(result) {
• console.log(result); // "Stuff worked!"
• },
• function(err) {
• console.log(err); // Error: "It broke"
• }
• );

Uso das promises

• Fetch devolve uma promises
• THEN pode devolver uma primises tbm
• ,permite enkademaneto de operaçoes na orddem correta
• O return vaalue é passado com argumento para o proximo then,pode nao ser uma promise
• then só executa a promise se for diferente de pending
• fetch('/some/endpoint').then(
• function (result) {
• console.log('Response from the endpoint ' + result)
• // do something with result
• },
• function (error){
• console.log('An error occurred: ' + error)
• // error has ocurred
• }
• );
• ou
• lookupPrice(123)
• .then(function (price) {
• console.log('The item costs: ' + price)
• })
• .catch(function (error){
• console.log('Could not find an item with that ID')
• });

ASYNC/AWAOT

• NAO É DO ES6 É DO ES8
• USA PROMISES internaamente
• FUNÇOES ASYNC DEVOLVE UMA PROMISE