Dia 39/2019 - Brincando com array: Concat, Sort, Reverse e ForEach

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 39, mostrando o uso dos métodos concat, sort, reverse e forEach.

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 39</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; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 100px auto; max-width: 600px; text-align: center; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-39.css">
</head>
<body>
<div class="container">
<!-- states -->
</div>
<script src="./day-39.js"></script>
</body>
</html>
1
2
3
4
<div data-js="main"></div>
<button class="button button--reset" data-js="original">Reset</button>
<button class="button" data-js="sort">Sort</button>
<button class="button" data-js="reverse">Reverse</button>
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
.list { align-items: center; display: flex; flex-direction: row; flex-flow: row wrap; justify-content: center; }
.item { background: #fff; color: #000; margin: 1%; padding: 10px; width: 8%; }

.button { background: #3a97a5; border: none; border-radius: 4px; color: #fff; cursor: pointer; margin: 20px 10px; padding: 10px; }
.button--reset { background: #ca4a50; }

.ac,
.am,
.ap,
.ro,
.rr,
.pa,
.to { background: #20863f; }

.pi,
.ma,
.ce,
.rn,
.pb,
.pe,
.se,
.al,
.ba { background: #862020; }

.ms,
.mt,
.go,
.df { background: #865f20; }

.sp,
.rj,
.es,
.mg { background: #cec10e; }

.pr,
.sc,
.rs { background: #582086; }
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
const main = document.querySelector('[data-js="main"]');
const originalButton = document.querySelector('[data-js="original"]');
const sortButton = document.querySelector('[data-js="sort"]');
const reverseButton = document.querySelector('[data-js="reverse"]');

const north = ["AC","AM","AP","RO","RR","PA","TO"];
const northeast = ["PI","MA","CE","RN","PB","PE","SE","AL","BA"];
const midwest = ["MS","MT","GO","DF"];
const southeast = ["SP","RJ","ES","MG"];
const south = ["PR","SC","RS"];

const original = north.concat(northeast, midwest, southeast, south);
let states = [...original];

const renderList = (states, method) => {
let html = '';

switch(method) {
case 'sort':
// ascending order
states.sort();
// This doesn't work when the data we wish to sort using is deep inside a property of the array object, and not the array itself.
// const example = [{ name: 'Hemerson', name: 'Nerd' }];
// example.sort((param1, param2) => {
// const a = param1.name.toLowerCase(), b = param2.name.toLowerCase();
// return a > b ? 1 : b > a ? -1 : 0;
// });
break;
case 'reverse':
states.reverse();
break;
default:
break;
}

states.forEach((element, index, array) => {
if(index === 0) { html += '<ul class="list">'}

html += `<li class="item ${element.toLowerCase()}">${element}</li>`;

if(index === array.length) { html += '</ul>' }
});

main.innerHTML = html;
};

renderList(original);

originalButton.addEventListener('click', () => {
states = [...original];
renderList(original);
});

sortButton.addEventListener('click', () => {
renderList(states, 'sort');
});

reverseButton.addEventListener('click', () => {
renderList(states, 'reverse');
});

// extra
const extra = [12, 1, 10, 20];
const asc = [...extra];
const desc = [...extra];

asc.sort((a, b) => a - b);
desc.sort((a, b) => b - a );

console.log(asc); // [1, 10, 12, 20]
console.log(desc); // [20, 12, 10, 1]

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.