Caderno com anotações de aulas e de pesquisas sobre a linguagem Javascript ECMA6
- Prototypes
- Promisse
- Try cacth
- Funções especiais
- Gerando HTML com a função map
- Spread
- Abribuição por Desconstrução
É uma tentativa de fazer uma herança usando classe, mas não exatamente igual a herança de classe (Classes em Javascript não existem de verdade).
Javascript é uma linguagem orientada à prototipos e não á classes
Object.assign(this, newDev)Pega o primeiro objeto (this) e junta com o segundo (newDev), assim simulando um objeto, mas analizando o proto, você vai ver que ele está apontando para o construtor (Object), como vemos no arquivo Herança sem classes. Para resolver isso, podemos usar o setPrototypeoF
setPrototypeoF(this, newDev)Promise é um objeto que vai representar eventual conclusão ou falha de uma operação assícrona qualquer. A promisse pode estar em PEDING, FULFILLED (ou RESOLVED) ou REJECTED
O objeto promise é instanciado dessa forma:
const umaPromessa = new Promise(()- É opcional usar o reject, mas é importante usá-lo para evitar um loop
- O finally execultará independente do resultado noo encadeamento
Vai ler o codigo uma primeira vez, deixar tudo que não foi resolvid como pendencia, depois vai ler o codigo novamente e vai executar o que ficou pendente.
Promise é um objeto string que fica pendurado no objeto global que conseguimos acessar metodos disponíveis como o all() e o race.
Promise.all([promise1, promise2, promise3])
.then((message) => {
console.log(message)
})
Promise.race([promise1, promise2, promise3])
.then((message) => {
console.log(message)
})No codigo apresentado, o race() vai mostrar a promise executada primeiro, como que em uma corrida, enquanto que o all() vai mostrar todas as promise executadas numa lista
- Dá para usar o encadeamento mesmo usando o await, mas suja mais o código
O try-catch funciona de maneira parecida com o then catch. Tu coloca o que acha que pode dar erro dentro do try, caso ocorra realmente um erro, exibimos a mensagem através do cacth
const main = () => {
try {
codigo
}
catch (error) {
console.error(`deu ruim! Veja aí => \n"${error}"`)
}
finally {
console.info('Este valor sempre será mostrado')
console.count('teste')
}
}Para o resto do código continuar, você pode usar o finally
Quando temos um try-catch que esteja dentro de uma função, nós lançamos o error que estiver nela através do throw para o catch acima, assim rastreando a origem do erro.
Também podemos forçar um erro lançando através do throw. Exemplo:
try {
if (valor) {
// Aqui está forçanodo/lançando o error
throw new Error("Deu erro no valor")
}
}
catch (error) {
console.error(error);
throw error
}Boas funções para guardar no arcenal.
Fonte
- Desempenho impulsonado por eventos A função debounce não permitirá que um callback seja usado mais de uma vez por um determinado período de tempo. Isso é especialmente importante quando a atribuição de uma função de callback para eventos é utilizada com uma frequência de disparo.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};- Verificação do estado em intervalos
- Util caso o evento não exista
function poll(fn, callback, errback, timeout, interval) {
var endTime = Number(new Date()) + (timeout || 2000);
interval = interval || 100;
(function p() {
// If the condition is met, we're done!
if(fn()) {
callback();
}
// If the condition isn't met but the timeout hasn't elapsed, go again
else if (Number(new Date()) < endTime) {
setTimeout(p, interval);
}
// Didn't match and too much time, reject!
else {
errback(new Error('timed out for ' + fn + ': ' + arguments));
}
})();
}Garante que uma determinada função só pode ser chamada uma vez, evitanto inicialização duplicada, além de fornecer o recurso rapidamente.
function once(fn, context) {
var result;
return function() {
if(fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}- Obter URL absoluta
- Não funciona se não fornecer argumentos necessários O elemento “burn” do href cria um objeto com a URL, fornecendo uma URL absoluta no retorno.
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();Saber se a função é nativa
;(function() {
// Used to resolve the internal `[[Class]]` of values
var toString = Object.prototype.toString;
// Used to resolve the decompiled source of functions
var fnToString = Function.prototype.toString;
// Used to detect host constructors (Safari > 4; really typed array specific)
var reHostCtor = /^\[object .+?Constructor\]$/;
// Compile a regexp using a common native method as a template.
// We chose `Object#toString` because there's a good chance it is not being mucked with.
var reNative = RegExp('^' +
// Coerce `Object#toString` to a string
String(toString)
// Escape any special regexp characters
.replace(/[.*+?^${}()|[\]\/\\]/g, '\\amp;')
// Replace mentions of `toString` with `.*?` to keep the template generic.
// Replace thing like `for ...` to support environments like Rhino which add extra info
// such as method arity.
.replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '#039')
);
function isNative(value) {
var type = typeof value;
return type == 'function'
// Use `Function#toString` to bypass the value's own `toString` method
// and avoid being faked out.
? reNative.test(fnToString.call(value))
// Fallback to a host object check because some environments will represent
// things like typed arrays as DOM methods which may not conform to the
// normal native pattern.
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
}
// export however you want
module.exports = isNative;
}());- Valida se um elemento é de um determinado jogo de seletores
function matchesSelector(el, selector) {
var p = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
};
return f.call(el, selector);
}Vamos usar a função map no JavaScript para gerar uma tabela no HTML.
No caso de termos um array.
let tabela = [
{nome: "Ricardo", nota: 10},
{nome: "Pedro", nota: 10},
{nome: "João", nota: 10},
{nome: "Carla", nota: 10},
]Criamos o cara que vai a tabela como uma string vazia e usamos o map para listar e substituír os elementos por um elemento correspondente
Podermos usar o map para renderizar cada célula da tabela, substituíndo em vez de escrever diretamente. Isso fácilita em futuras automações
tabela.map( e => `<tr><td>${e.nome}</td><td>${e.nota}</td></tr>`).join("")Se temos um array " const x = [1,2,3]" e queros aplicar um função em cada número desse array, usamos o operador spread que transforma arrays em () dentro do parametro.
Por exemplo na função:
Math.max(...x)qua vai retornar o maior valor. Caso o array não fosse transformado, não seria possívei fazer essa operação.
Fonte
No caso de termos o "let ponto = {x: 10, y:15, z:20}", pondemos descontruír esse objeot da seguinte forma:
let ponto = {x: 10, y:15, z:20}
let {x} = pontoPronto! Criamos uma variável descontruído o objeto. Se dermos o console.log no x, veremos que o valor do x do ponto é o mesmo da variavél
Mas nós também podemos renomear desta forma: let {x:p1} = ponto. Agora a variável que obteve o valor de x, do objeto, se chama p1
Digamos que temos uma variável let variavel = "y". Então temos uam vaiável que o valor é uma string y. Conseguímos extraír diretamente o x x do objeto usando diretamente a variável.
let variavel = "y"
let {[variavel]:p2} = ponto
console.log(p2)
// output: 15