Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Hacks

JavaScript Hacks

Neste talk você vai aprender alguns hacks de JavaScript úteis na prática. Entendendo quando e como usá-las de forma que torne suas aplicações JavaScript/Meteor/Node.js mais rápidas.

Avatar for Caio Ribeiro Pereira

Caio Ribeiro Pereira

October 11, 2014
Tweet

More Decks by Caio Ribeiro Pereira

Other Decks in Technology

Transcript

  1. about me Web Developer na Concrete Solutions Entusiasta JavaScript e

    Node.js Participo do NodeBR, Meteor Brasil e DevInSantos
  2. VanillaMasker A pure javascript input mask Biblioteca minimalista que aplica

    máscara em inputs Não usa jQuery ou Zepto, é puro javascript! Extremamente leve (1 kbyte) em 160 linhas de código! Mask money e mask patterns Compatível com Bower e Meteor via AtmosphereJS Github: bankfacil.github.io/vanilla-masker
  3. Caching array.length num loop for (var i = 0; i

    < array.length; i++) { console.log(array[i]); } for (var i = 0, len = array.length; i < len; i++) { console.log(array[i]); } O cache evita contar o tamanho do array a cada iteração Sem cache Com cache
  4. Elementos do final do array var array = [1,2,3,4,5,6]; console.log(array.slice(-1));

    // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6] var array = [1,2,3,4,5,6]; console.log(array[array.length-1]); // 6 Pegando último elemento usando array.length - 1 Pegando último elemento usando array.slice()
  5. Combinando arrays var array1 = [1,2,3]; var array2 = [4,5,6];

    array1.concat(array2); // [1,2,3,4,5,6] var array1 = [1,2,3]; var array2 = [4,5,6]; Array.prototype.push.apply(array1, array2); console.log(array1); // [1,2,3,4,5,6] O push.apply() é otimizado, pois ele trabalha em cima de um array existente enquanto o concat cria um novo array. Combinando arrays com concat… Combinando arrays com push.apply…
  6. Convertendo NodeList para array <html> <body> <p>item1</p> <p>item2</p> <p>item3</p> </body>

    </html> var itens = document.querySelectorAll(“p”); var array = [].slice.call(itens); Esta ação libera as funções de array para um NodeList
  7. Array shuffle var array = [1,2,3,4,5,6]; array.sort(function(){ Math.random()-0.5 }) Array.prototype.shuffle

    = function() { return this.sort(function(){Math.random()-0.5});
 }; var array = [1,2,3,4,5,6]; array.shuffle(); // [3,4,2,1,5,6] ou Útil para embaralhar elementos de um array.
  8. Convertendo para Numbers console.log(+”1234”); // 1234 console.log(+”not a number”); //

    NaN O operador "+" converte uma string para number. Se o valor for inválido ele retorna um NaN (Not A Number) O operador "+" também converte Date para milisegundos. console.log(+new Date()); // 1303319203123
  9. Convertendo para boolean O operador "!!" converte variáveis para boolean

    Valores falsos: false, 0, null, "" ou NaN. Valores verdadeiros: qualquer coisa diferente de valores falsos. function User(email, nick) { this.email = email; this.nick = nick; this.hasNick = !!nick; } var user = new User(“user@mail.com”); console.log(user.hasNick); // false
  10. Condicional inline com short-circuits if (user.hasNick) { console.log(user.nick); } user.hasNick

    && console.log(user.nick); if (!user.hasNick) { user.nick = user.email; } (!user.hasNick) && (user.nick = user.email); condicional que executa uma função condicional que atribui um valor para um objeto versão inline versão inline
  11. Default values function User(email, nick) { this.email = email; this.nick

    = nick || email; } var user = new User(“user@mail.com”); console.log(user.nick); // user@mail.com Utilize o operador "||" entre uma variável e um valor default
  12. Replace all var names = “joao joao”; names.replace(/ao/, “ana”); //

    “joana joao” var names = “joao joao”; names.replace(/ao/g, “ana”); // “joana joana” A função replace() por default substitui apenas uma ocorrência Para substituir N ocorrências utilize o parâmetro "/g"
  13. Float to Integer var value = 100.1233123; console.log(~~value); // 100

    O operador "~~" converte float para integer
  14. Calculando idade // 24 * 3600 * 365.25 * 1000

    = 31557600000 function calcAge(birthday) { return ~~(((+new Date) - (+birthday)) / 31557600000); } calcAge(new Date(1985,1,1)); // 29 Função minimalista que calcula uma idade Fonte: http:/ /jsperf.com/birthday-calculation