Dia 45/2019 - Brincando com array: Keys, Values, Entries, CopyWithin, Fill e ReduceRight

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 45, mostrando o uso dos métodos: Keys, Values, Entries, CopyWithin, Fill e ReduceRight.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 45</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size: 62.5%; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #3e0c80; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 100px auto; max-width: 992px; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-45.css">
</head>
<body>
<div class="container">
<!-- array -->
</div>
<script src="./day-45.js"></script>
</body>
</html>
1
2
3
4
5
6
7
<h1 class="title">Playing with <span class="title-hl">Array</span></h1>
<div data-js="main" class="status"></div>

<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
@import url("https://fonts.googleapis.com/css?family=Calistoga&display=swap");

.title {
font-family: 'Calistoga', cursive;
font-size: 7rem;
color: #fff;
position: relative;
text-align: center;
text-shadow:
0.1rem 0.2rem rgba(0, 0, 0, 1),
0.5rem -0.3rem 0 rgba(0, 0, 0, 1),
0.5rem 0.5rem 0 rgba(0, 0, 0, 1),
0 0.8rem 0 rgba(0, 0, 0, 1),
0.5rem 0.8rem 0 rgba(0, 0, 0, 1),
0 -0.3rem 0 rgba(0, 0, 0, 1),
-0.3rem -0.3rem 0 rgba(0, 0, 0, 1),
-0.3rem 0.8rem 0 rgba(0, 0, 0, 1),
-0.3rem 0 0 rgba(0, 0, 0, 1);
}

.title:before { content: 'Series'; display: block; font-size: 2rem; }

.title-hl {
animation: _effect 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
transition: all 0.5s ease-in-out;
transform: scale(0.9);
display: inline-block;
}

.status {
font-family: 'Calistoga', cursive;
font-size: 5rem;
text-align: center;
text-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 1);
}

.status:before { content: 'Status: '; display: inline-block; font-size: 2rem; margin-right: 20px; }

@keyframes _effect {
0% { transform: scale(0.9); }
80%,
100% { color: #fdffa1; transform: scale(1.4) rotateZ(-3deg); }
}

/* Fireworks */
/* Created by Poychang - https://gist.github.com/poychang/fb1e8878f68a47e57d54627c18e739c7 */
.pyro > .before,
.pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
animation-delay: 1.25s, 1.25s, 1.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}

@keyframes bang {
to {
box-shadow: 40px -162.6666666667px #006fff, 70px -95.6666666667px #ff0059, -216px -147.6666666667px #ff7b00, -205px -73.6666666667px #44ff00, -175px -188.6666666667px #00ff0d, 45px -18.6666666667px #00ff51, 14px -188.6666666667px #ff9500, -163px -77.6666666667px #ff7300, 190px -51.6666666667px #99ff00, -210px 58.3333333333px #00fbff, 46px -372.6666666667px #00ff44, -242px -171.6666666667px #00ff04, 12px -235.6666666667px #ffea00, 150px 16.3333333333px #001aff, -213px -338.6666666667px #00fff7, -141px -242.6666666667px #4d00ff, 210px 12.3333333333px #00ff88, 178px -240.6666666667px #8800ff, -95px -308.6666666667px #ff00b3, 10px -262.6666666667px #99ff00, -121px -261.6666666667px #ffdd00, -245px -275.6666666667px #ff00e1, 224px -200.6666666667px #a2ff00, -246px -342.6666666667px #00ff44, -243px 31.3333333333px #e600ff, -55px -387.6666666667px #ee00ff, 160px -30.6666666667px #00ff77, 197px -138.6666666667px #d9ff00, -228px -65.6666666667px #ff0040, 35px -7.6666666667px #00ff5e, 39px -24.6666666667px #00ff62, 173px -123.6666666667px #00ff40, 221px -164.6666666667px #2f00ff, -182px -243.6666666667px #51ff00, -237px -271.6666666667px #ff2200, -124px -343.6666666667px #59ff00, -88px -255.6666666667px #ffa200, -6px -284.6666666667px #ff0091, 164px -65.6666666667px #ff0900, 223px 69.3333333333px #ff004d, -241px -146.6666666667px #7bff00, -244px -97.6666666667px #00ff1e, 77px 75.3333333333px #ff0400, 128px -203.6666666667px #001aff, 25px -15.6666666667px #00ffb3, 196px -309.6666666667px #00d0ff, 173px -231.6666666667px #00f2ff, 173px -412.6666666667px #4800ff, -46px -397.6666666667px #ff0400, 111px -187.6666666667px #0055ff, -148px -212.6666666667px #00ff88;
}
}

@keyframes gravity {
to { transform: translateY(200px); opacity: 0; }
}

@keyframes position {
0%, 19.9% { margin-top: 10%; margin-left: 40%; }
20%, 39.9% { margin-top: 40%; margin-left: 30%; }
40%, 59.9% { margin-top: 20%; margin-left: 70%; }
60%, 79.9% { margin-top: 30%; margin-left: 20%; }
80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const items = ['a', 's', 'e', 'b', 'b', 'u', 's'];

// keys
const iterator0 = items.keys();
console.log(iterator0.next().value);
// values
const iterator1 = items.values();
console.log(iterator1.next().value);
// entries
const iterator = items.entries();
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().done ? 'Done!' : '');

// copyWithin
console.log(items.copyWithin(0, 6, 7));

// fill
console.log(items.fill('c', 3, 5));

// reduceRight
const result = items.reduceRight((acc, currentValue) => acc + currentValue);
console.log(result);

const main = document.querySelector('[data-js="main"]');

main.innerHTML = result;

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Relacionados

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.