Dia 37/2019 - Brincando com array: Splice, Slice, ToString e Join

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 37, mostrando o uso dos métodos: splice, slice, toString e join.

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 37</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: 20px auto; max-width: 992px; text-align: center; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-37.css">
</head>
<body>
<div class="container">
<!-- items -->
</div>
<script src="./day-37.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
<div class="items">
<section class="item">
<h1 class="title">slice</h1>
<div class="content">
<p class="description">Array</p>
<div data-js="original"></div>
<p class="description">slice(1, 3)</p>
<div data-js="slice"></div>
</div>
</section>
<section class="item">
<h1 class="title">splice</h1>
<div class="content">
<p class="description">Array modified</p>
<div data-js="original2"></div>
<p class="description">splice(3, 1, 'a52596')</p>
<div data-js="splice"></div>
</div>
</section>
<section class="item item--full">
<h1 class="title">toString and join</h1>
<div class="content">
<div data-js="toStringAndJoin"></div>
</div>
</section>
</div>
1
2
3
4
5
6
7
8
.items { display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between; }
.item { padding: 20px; width: 50%; }
.item--full { width: 100%; }

.title { text-transform: uppercase; }

.content { margin: 10px 0; }
.description { margin: 10px 0; }
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
// splice and slice
const original = document.querySelector('[data-js="original"]');
const original2 = document.querySelector('[data-js="original2"]');
const splice = document.querySelector('[data-js="splice"]');
const slice = document.querySelector('[data-js="slice"]');

const colors = ['fff', 'fc0', 'f00', '02d', 'dfc'];
const colors2 = [...colors];

const getCar = (color='fff', index) => {
return `
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 800 360" fill="#${color}" width="85">
<path d="M203.69 280.766c0 32.714-26.52 59.234-59.234 59.234s-59.234-26.52-59.234-59.234 26.52-59.234 59.234-59.234c32.713 0 59.233 26.52 59.233 59.234z"/>
<path d="M333.426 54.557c3.154-3.652 6.748-6.79 13.383-6.382h286.554L775.78 161.253c1.571 3.322 2.366 5.867 2.765 8.016l.541 100.203c-2.647 5.744-5.76 10.647-11.315 11.158h-33.054c0-97.968-144.833-98.168-144.833 0H217.772c0-97.588-145.935-97.962-145.935 0H31.515c-3.438-1.608-6.531-.112-11.074-11.661L20 196.91c2.345-6.556 5.27-9.054 8.187-11.598l209.458-34.796 95.78-95.96z" fill-rule="evenodd"/>
<path d="M720.924 280.741c0 32.714-26.52 59.234-59.234 59.234-32.713 0-59.233-26.52-59.233-59.234s26.52-59.234 59.233-59.234c32.714 0 59.234 26.52 59.234 59.234z"/>
<path d="M668.162 142.812l-61.168-61.603c-1.61-1.367-2.876-3.25-5.673-2.836H494.544v86.268h181.978c8.612-1.717-2.72-13.335-8.36-21.83zM266.99 151.629l71.378-70.432c1.61-1.368 2.875-3.251 5.673-2.837h126.92v86.268H272.427c-7.558-2.98-8.58-7.5-5.436-12.999z" fill="#000" fill-rule="evenodd"/>
<text x="400" y="270" fill="#000" font-size="120">${index}</text>
</svg>`;
}

const getCars = (list, text) => list.map((color, index) => getCar(color, text ? index : '')).join('') ;

const sliced = colors.slice(1, 3);
const spliced = colors2.splice(3, 1, 'a52596');

original.innerHTML = getCars(colors, true);
slice.innerHTML = getCars(sliced);

original2.innerHTML = getCars(colors2, true);
splice.innerHTML = getCars(spliced);

// toString and join
const toStringAndJoin = document.querySelector('[data-js="toStringAndJoin"]');
const fruits = ['apple', 'banana'];

console.log(fruits);
console.log(fruits.toString());
console.log(fruits.join(' - '));
console.log(fruits.join('/'));
console.log(fruits.join());

toStringAndJoin.innerHTML = fruits.join(' - ');

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.