O caso usual de desestruturação é com um literal de objeto:
const dict = { prop1: "one", prop2: "two" }; const { prop1, prop2 } = dict; // prop1 = "one" // prop2 = "two"
A sintaxe da desestruturação de Array e Set é um pouco diferente:
const arr = ["uno", "dos"]; const [one, two] = arr; // one = "uno" // two = "dos" // Or more explicitly const [width, height] = [200, 400];
A sintaxe de desestruturação dentro da iteração tem a seguinte aparência:
const items = [ ["one", "two"], ["three", "four"] ]; items.forEach(([uno, dos]) => { console.log(uno, dos); }); // "one", "two" // "three", "foor"
O senhor também pode clonar uma matriz com desestruturação:
const arr = ["one", "two"]; const clone = [...arr];
O senhor também pode usar as vírgulas a seu favor se não se importar com um determinado índice de uma matriz:
const arr = [1, 2, 3, 4]; const [,,,four] = arr; // four === 4
A desestruturação é incrível para desenvolvedores JavaScript experientes e pode ser confusa para os novatos. A desestruturação básica de array não engana muito, mas a iteração pode ser um trecho feio. Se o senhor tirar um minuto para ver esses exemplos reduzidos, isso poderá ajudá-lo a entender melhor o padrão.
Animações JS responsivas e infinitamente escalonáveis
No final de 2012, não era fácil encontrar projetos de código aberto usando
requestAnimationFrame()
– esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…Demonstrações favoritas de Chris Coyier no CodePen
David me perguntou se eu gostaria de fazer um guest post escolhendo algumas das minhas canetas favoritas do CodePen. É uma tarefa difícil! São tantas! Mas consegui escolher algumas que me surpreenderam nos últimos meses. Se o senhor…
MooTools & Printing – Criando um índice de links
Um detalhe que às vezes esquecemos ao considerar a impressão de sites é que o usuário não pode ver os URLs dos links quando a página é impressa. Embora nem sempre seja importante mostrar os URLs dos links, alguns sites podem se beneficiar muito com isso. Este tutorial mostrará ao senhor…
Plug-in MooTools PulseFade
Recentemente, fui motivado a criar um plug-in MooTools que pegasse um elemento e o desvanecesse de um mínimo para um máximo em um determinado número de vezes. Aqui está o resultado do meu Moo-foolery. O MooTools JavaScript As opções da classe incluem: min: (o padrão é .5) o…