Dia 43/2019 - Brincando com array: Some, Every, Array.from, Array.of e Array.isArray

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 43, mostrando o uso dos métodos: Some, Every, Array.from, Array.of e Array.isArray.

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 43</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: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 60px auto; max-width: 992px; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-43.css">
</head>
<body>
<div class="container">
<!-- list -->
</div>
<script src="./day-43.js"></script>
</body>
</html>
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
<ul class="list">
<li class="item">
<figure class="item-media">
<img src="http://br.web.img2.acsta.net/r_1920_1080/pictures/19/07/21/02/43/5787455.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Marvel" data-year="2020">Os Eternos</strong>
</li>
<li class="item">
<figure class="item-media">
<img src="http://br.web.img3.acsta.net/r_1920_1080/pictures/19/07/02/14/49/2765564.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Sony" data-year="2019">Jumanji: Próxima fase</strong>
</li>
<li class="item">
<figure class="item-media">
<img src="http://br.web.img3.acsta.net/r_1920_1080/pictures/19/07/22/12/32/3620170.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Marvel" data-year="2020">Viúva Negra</strong>
</li>
<li class="item">
<figure class="item-media">
<img src="http://br.web.img3.acsta.net/r_1920_1080/pictures/19/04/15/11/34/2455464.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Disney" data-year="2019">Star Wars: A Ascensão Skywalker</strong>
</li>
<li class="item">
<figure class="item-media">
<img src="http://br.web.img2.acsta.net/r_1920_1080/pictures/19/07/23/11/16/2258712.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Marvel" data-year="2021">Thor: Amor e Trovão</strong>
</li>
<li class="item">
<figure class="item-media">
<img src="http://br.web.img3.acsta.net/r_1920_1080/pictures/18/03/09/17/10/0318945.jpg" alt="" class="item-media-image" />
<figcaption class="item-media-tag">Ação</figcaption>
</figure>
<strong class="item-title" data-studio="Marvel" data-year="2022">Pantera Negra 2</strong>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.list { display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between; }

.item { background-color: #fff; border-radius: 4px; margin-bottom: 65px; width: 16%; }

.item-media { height: 120px; padding: 0 0 10px; position: relative; width: 100%; }

.item-media-image { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); height: 120px; position: relative; width: 100%; }

.item-media-tag {
background: #501375;
border-radius: 2px;
display: inline-block;
font-size: 1rem;
font-weight: 500;
letter-spacing: .4px;
padding: 5px 8px;
position: absolute;
right: 10px;
text-transform: uppercase;
bottom: -10px;
}

.item-title { color: #222; display: inline-block; font-size: 1.8rem; margin: 10px; }
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
// Array.from
const items = document.querySelectorAll('.item-title');
const movies = Array.from(items, movie => {
return { name: movie.textContent, studio: movie.getAttribute('data-studio'), year: movie.getAttribute('data-year'), }
});
// isArray
if (Array.isArray(movies)) {

console.log(movies);

// some - will return true if any predicate is true
if (movies.some(movie => movie.studio === "Marvel")) {
console.log("There is Marvel movie");
} else {
console.log("There is no Marvel movie");
}

// every - will return true if all predicate is true
if (movies.every(movie => movie.year >= 2020)) {
console.log("Now from 2020");
} else {
console.log("Still has movie in 2019");
}

// Array.of
const result1 = Array.of(movies.length);
console.log(result1);

const result2 = Array(movies.length);
console.log(result2);
}

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.