Hello everyone, here are some examples and simple exercises of some types of destructuring, I hope it helps
nested destructuring:
const person = { name: 'John', // Propriedade 'name' de valor 'John' address: { // Propriedade 'address' que é um objeto com outras propriedades city: 'New York', // Propriedade 'city' dentro de 'address' country: 'USA' // Propriedade 'country' dentro de 'address' } }; // Desestruturação aninhada: extraindo 'name' e, dentro de 'address', extraindo 'city' e 'country' let { name, // Extrai o valor de 'name' diretamente do objeto 'person' address: { city, country } // Dentro de 'address', extrai 'city' e 'country' } = person; // O objeto 'person' é a fonte da desestruturação // Exibindo os valores extraídos no console console.log(name, city, country); // Isso vai imprimir 'John New York USA'
destructuring an array (extracting values from arrays and storing them in variables):
const number = [1,2,3]; let [a,b,c] = number; console.log(a,b,c);
Exercise: Create a function that receives a date in the format dd/mm/yyyy and returns an array with separate values. Use the split function to separate the string into an array:
let date = "11/05/2005"; let separar = date.split("/"); console.log(separar);
Create a function that receives a date in the format dd/mm/yyyy and returns an array with separate values:
let date = "11/05/2005"; function splitDate(date) { return date.split('/'); } console.log(splitDate(date));
another way:
// Função que divide a string de data no formato 'dd/mm/yyyy' e retorna um array function splitDate(dateString) { return dateString.split('/'); // Usa o método split para separar a data por '/' } // Usando a função splitDate para desestruturar os valores de dia, mês e ano let [day, month, year] = splitDate('20/05/2024'); // Exibindo os valores no console console.log(day, month, year); // Isso vai imprimir: 20 05 2024
function parameter destructuring:
// Definindo a função 'printPerson1' que usa desestruturação no parâmetro function printPerson1({ name, age, city }) { // A função recebe um objeto e extrai as propriedades 'name', 'age' e 'city' // Usando console.log para exibir as variáveis 'name', 'age' e 'city' console.log(name, age, city); // Imprime os valores dessas propriedades } // Criando o objeto 'person' com as propriedades 'name', 'age' e 'city' const person = { name: 'John', // Nome da pessoa age: 30, // Idade da pessoa city: 'New York' // Cidade da pessoa }; // Chamando a função 'printPerson1' e passando o objeto 'person' como argumento // O objeto 'person' será desestruturado na função para acessar 'name', 'age' e 'city' printPerson1(person); // Ao chamar, imprime 'John 30 New York' no console
same thing but a different way of doing it:
function printPerson2({ name: n, age: a, city: c }) { console.log(n, a, c); } const person = { name: 'John', age: 30, city: 'New York' }; printPerson2(person);
this is array destructuring instead of object:
function printPerson3([ name, age, city ]) { console.log(name, age, city); } const person = ['Jooaca',30,'New York']; printPerson3(person);
The above is the detailed content of Destructuring in Javascript. For more information, please follow other related articles on the PHP Chinese website!