├── index.html
└── scripts.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 7 recursos de JS que todo Dev deveria saber!
8 |
9 |
10 |
11 | 7 recursos de JS que todo Dev deveria saber
12 |
13 |
14 |
--------------------------------------------------------------------------------
/scripts.js:
--------------------------------------------------------------------------------
1 | // 1 - promises
2 | function loadSomeData() {
3 | return new Promise(function (resolve, reject) {
4 | // faz alguma operação assíncrona aqui
5 | // e chama a função resolve se for bem-sucedida,
6 | // ou a função reject se houver algum erro
7 | setTimeout(function () {
8 | var data = { id: 123, name: "Algum dado" };
9 | resolve(data);
10 | }, 1000);
11 | });
12 | }
13 |
14 | // agora podemos chamar a função loadSomeData e lidar com o resultado
15 | loadSomeData()
16 | .then(function (data) {
17 | console.log("Dados carregados com sucesso:", data);
18 | })
19 | .catch(function (error) {
20 | console.error("Erro ao carregar dados:", error);
21 | });
22 |
23 | // 2 - arrow function
24 | // função tradicional
25 | function soma(a, b) {
26 | return a + b;
27 | }
28 |
29 | console.log(soma(4, 4));
30 |
31 | // arrow function equivalente
32 | const somaB = (a, b) => a + b;
33 |
34 | console.log(somaB(2, 3)); // 5
35 |
36 | const numeros = [1, 2, 3, 4, 5];
37 |
38 | // filtra apenas os números pares
39 | const numerosPares = numeros.filter((numero) => numero % 2 === 0);
40 |
41 | console.log(numerosPares); // [2, 4]
42 |
43 | // 3 - destructuring
44 | const usuario = {
45 | nome: "João",
46 | idade: 30,
47 | email: "joao@example.com",
48 | };
49 |
50 | // extrai o nome e o email do objeto usuario em variáveis separadas
51 | const { nome, email } = usuario;
52 |
53 | console.log(nome); // 'João'
54 | console.log(email); // 'joao@example.com'
55 |
56 | const numerosB = [1, 2, 3];
57 |
58 | // extrai os elementos do array em variáveis separadas
59 | const [a, b, c] = numerosB;
60 |
61 | console.log(a); // 1
62 | console.log(b); // 2
63 | console.log(c); // 3
64 |
65 | function exibeDadosUsuario({ nome, email }) {
66 | console.log(`Nome: ${nome}`);
67 | console.log(`E-mail: ${email}`);
68 | }
69 |
70 | const usuarioB = {
71 | nome: "João",
72 | idade: 30,
73 | email: "joao@example.com",
74 | };
75 |
76 | // chama a função com o objeto usuario como argumento
77 | exibeDadosUsuario(usuarioB);
78 |
79 | // 4 - template literals
80 | const nomeUsuario = "João";
81 | const idade = 30;
82 |
83 | // cria uma string usando um template literal
84 | const mensagem = `Olá, meu nome é ${nomeUsuario} e eu tenho ${idade} anos.`;
85 |
86 | console.log(mensagem); // 'Olá, meu nome é João e eu tenho 30 anos.'
87 |
88 | const saldo = 1000;
89 |
90 | // cria uma string usando um template literal e uma expressão ternária
91 | const mensagemB = `Seu saldo atual é ${saldo > 0 ? `$${saldo}` : "negativo"}.`;
92 |
93 | console.log(mensagemB); // 'Seu saldo atual é $1000.'
94 |
95 | // 5 - rest e spread
96 | // rest
97 | function somaC(...numeros) {
98 | return numeros.reduce((total, numero) => total + numero);
99 | }
100 |
101 | console.log(somaC(1, 2, 3, 4, 5)); // 15
102 |
103 | const numeros1 = [1, 2, 3];
104 | const numeros2 = [4, 5, 6];
105 |
106 | // spread
107 | // combina os dois arrays usando o operador spread
108 | const numerosCombinados = [...numeros1, ...numeros2];
109 |
110 | console.log(numerosCombinados); // [1, 2, 3, 4, 5, 6]
111 |
112 | const usuarioC = {
113 | nome: "Pedro",
114 | idade: 30,
115 | };
116 |
117 | // copia o objeto usuario e adiciona uma nova propriedade
118 | const usuarioComEndereco = { ...usuario, endereco: "Rua 1, nº 123" };
119 |
120 | console.log(usuarioComEndereco); // { nome: 'Pedro', idade: 30, endereco: 'Rua 1, nº 123' }
121 |
122 | // 6 - classes
123 | class Pessoa {
124 | constructor(nome, idade) {
125 | this.nome = nome;
126 | this.idade = idade;
127 | }
128 |
129 | apresenta() {
130 | console.log(`Meu nome é ${this.nome} e eu tenho ${this.idade} anos.`);
131 | }
132 | }
133 |
134 | const pessoa1 = new Pessoa("João", 30);
135 | const pessoa2 = new Pessoa("Maria", 25);
136 |
137 | pessoa1.apresenta(); // 'Meu nome é João e eu tenho 30 anos.'
138 | pessoa2.apresenta(); // 'Meu nome é Maria e eu tenho 25 anos.'
139 |
140 | class Funcionario extends Pessoa {
141 | constructor(nome, idade, salario) {
142 | super(nome, idade);
143 | this.salario = salario;
144 | }
145 |
146 | apresenta() {
147 | console.log(
148 | `Meu nome é ${this.nome}, eu tenho ${this.idade} anos e meu salário é ${this.salario}.`
149 | );
150 | }
151 | }
152 |
153 | const funcionario1 = new Funcionario("Pedro", 35, 5000);
154 | const funcionario2 = new Funcionario("Ana", 28, 4000);
155 |
156 | funcionario1.apresenta(); // 'Meu nome é Pedro, eu tenho 35 anos e meu salário é 5000.'
157 | funcionario2.apresenta(); // 'Meu nome é Ana, eu tenho 28 anos e meu salário é 4000.'
158 |
159 | // 7 - métodos de array
160 |
161 | // map
162 | const numerosC = [1, 2, 3];
163 |
164 | const numerosDobrados = numerosC.map((numero) => {
165 | return numero * 2;
166 | });
167 |
168 | console.log(numerosDobrados); // [2, 4, 6]
169 |
170 | // filter
171 | const numerosD = [1, 2, 3, 4, 5];
172 |
173 | const numerosImpares = numerosD.filter((numero) => {
174 | return numero % 2 === 1;
175 | });
176 |
177 | console.log(numerosImpares); // [1, 3, 5]
178 |
179 | // reduce
180 | const numerosE = [1, 2, 3, 4, 5];
181 |
182 | const somaNumeros = numerosE.reduce((total, numero) => {
183 | return total + numero;
184 | }, 0);
185 |
186 | console.log(somaNumeros); // 15
187 |
188 | // find
189 | const numerosF = [1, 2, 3, 4, 5];
190 |
191 | const numero3 = numerosF.find((numero) => {
192 | return numero === 3;
193 | });
194 |
195 | console.log(numero3); // 3
196 |
197 | // forEach
198 | const nomes = ["Pedro", "Paulo", "Jeferson"];
199 |
200 | nomes.forEach((nome) => {
201 | console.log(nome);
202 | });
203 |
--------------------------------------------------------------------------------