Skip to content

Latest commit

 

History

History
309 lines (242 loc) · 11.8 KB

clase27.md

File metadata and controls

309 lines (242 loc) · 11.8 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 27

img

Recursos

Implementados

Iteraciones

Array.prototype.entries()

var lista = ['a', 'b', 'c'];
var iterador = lista.entries();

console.log(iterador.next().value); // [0, "a"]
console.log(iterador.next().value); // [1, "b"]

Array.prototype.values()

var lista = ['f', 'i', 'c', 't', 'i', 'c', 'i', 'a']; 
var iterator = lista.values();

console.log(iterator.next().value); // f 
console.log(iterator.next().value); // i 
console.log(iterator.next().value); // c 
console.log(iterator.next().value); // t 
console.log(iterator.next().value); // i
//...

Array.prototype.keys() - ES6

var lista = ['a', 'b', 'c'];
var iterator = lista.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

En la práctica...

var a = [1,2,3];
[...a.values()];	// [1,2,3]
[...a.keys()];		// [0,1,2]
[...a.entries()];	// [ [0,1], [1,2], [2,3] ]

Array.prototype.includes

  • Retorna un booleno si encuentra el elemento. Tiene muchas mejoras respecto Array.prototype.indexOf
  • Propuesto por Domenic Denicola y Rick Waldron
  • ECMA documentation
['a', 'b', 'c'].includes('a') // true
['a', 'b', 'c'].includes('d') // false

// similitud con indexOf:
// arr.includes(x) -> arr.indexOf(x) >= 0

[NaN].includes(NaN) // true
[NaN].indexOf(NaN) // -1

// @see: http://speakingjs.com/es5/ch11.html#two_zeros
[-0].includes(+0) // true

// Arrays tipados también lo incluyen
let arrTip = Uint8Array.of(12, 5, 3);
console.log(arrTip.includes(5)); // true

Exponentiation Operator

  • Añade el operador exponencial x ** y, su comportamiento es igual que Math.pow(x, y)
  • Propuesto por Rick Waldron, Claude Pache y Brendan Eich
  • ECMA documentation
let cuadrado = 3 ** 2; // 9
let numero = 3;
numero **= 2; // 9

ES2017 (ES8)

img

Recursos

Implementados cambios principales

Async Functions

Propuesto por Brian Terlson

Código asíncrono utilizando promesas y generadores

  • Nativo
function fetchJson(url) {
    return fetch(url)
    .then(request => request.text())
    .then(text => {
        return JSON.parse(text);
    })
    .catch(error => {
        console.log(`ERROR: ${error.stack}`);
    });
}
fetchJson('http://example.com/some_file.json')
.then(obj => console.log(obj));
  • Usando la librería CO
const fetchJson = co.wrap(function* (url) {
    try {
        let request = yield fetch(url);
        let text = yield request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
});
  • Funciones Asíncronas
async function fetchJson(url) {
    try {
        let request = await fetch(url);
        let text = await request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
}
  • Variantes
// Declaración
async function foo() {}

// Expresión
const foo = async function () {};

// Método
let obj = { async foo() {} }

// Formato Arrow Function
const foo = async () => {};

Shared memory and atomics

  • Gestiona multithreading en Javascript, basicamente web wrokers con ArrayBuffer.
  • Muy bajo nivel
  • Propuesto por Lars T. Hansen

Implementados cambios menores

Object.values/Object.entries

  • Retornan un array o una matriz con los valores o las propiedades iterables de los objetos
  • Propuesto por Jordan Harband

Objetos

const data = { elemnto: 'primero', otro_dato: 1 };
Object.values(data); // ["primero", 1]
Object.entries(data); // [["elemnto", "primero"], ["otro_dato", 1]]

Arrays

const obj = ['p1', 'p2', 'p3']; // equivale a { 0: 'a', 1: 'z', 2: '5' };
Object.values(obj); // ["p1", "p2", "p3"]
Object.entries(obj); // [["0", "p1"], ["1", "p2"], ["2", "p3"]]

Cadenas

Object.values('Fictizia'); // ["F", "i", "c", "t", "i"]
Object.entries('Ficti'); // [["0", "F"], ["1", "i"], ["2", "c"], ["3", "t"], ["4", "i"]]

String padding

  • Se rellena una cadena por delante con padStart o por detras con padEnd, puedes especificar el relleno
  • Propuesto por Jordan Harband y Rick Waldron
// .padStart()
'data'.padStart(1);          // "data"
'data'.padStart(7);          // "   data"
'data'.padStart(6, '-');     // "--data"
'data'.padStart(10, 'info'); // "infoindata"
'data'.padStart(5, '*');     // "*data"

// .padEnd()
'data'.padEnd(1);          // "data"
'data'.padEnd(7);          // "data   "
'data'.padEnd(6, '-');     // "data--"
'data'.padEnd(10, 'info'); // "datainfoin"
'data'.padEnd(5, '*');     // "data*"

Object.getOwnPropertyDescriptors()

  • No confundir con Object.getOwnPropertyDescriptor()
  • Devulve las descripciones de las propiedades del objeto
  • Esta pensado para facilitar el clonado de objetos ya que no se muestran propiedades heredadas por prototype
  • Propuesto por Jordan Harband y Andrea Giammarchi
  • Object.getOwnPropertyDescriptors Proposal

Trailing commas in function parameter lists and calls

  • Se ignorarán las comas extras al final del último parámetro de una función
  • Propuesto por Jeff Morrison
//En declaración
function foo(p1, p2, p3,) { 
    //... 
}

//En ejecución
foo("a", "b", "b",);

ES2018 (ES9)

Recursos

Propuestas finalizadas (stage 4)

Candidatos muy probables (stage 3)

TC39 y nuestro futuro

img

Recursos

Estados