Heim > Web-Frontend > js-Tutorial > Destrukturierung in Javascript

Destrukturierung in Javascript

Susan Sarandon
Freigeben: 2024-12-24 16:06:10
Original
609 Leute haben es durchsucht

Desestruturação em Javascript

Hallo zusammen, hier sind einige Beispiele und einfache Übungen für einige Arten der Destrukturierung, ich hoffe, es hilft

verschachtelte Destrukturierung:

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'

Nach dem Login kopieren

Destrukturierung eines Arrays (Werte aus Arrays extrahieren und in Variablen speichern):

const number = [1,2,3];
let [a,b,c] = number;
console.log(a,b,c);

Nach dem Login kopieren

Übung: Erstellen Sie eine Funktion, die ein Datum im Format TT/MM/JJJJ empfängt und ein Array mit separaten Werten zurückgibt. Verwenden Sie die Split-Funktion, um die Zeichenfolge in ein Array aufzuteilen:

let date = "11/05/2005";
let separar =  date.split("/");
console.log(separar);

Nach dem Login kopieren

Erstellen Sie eine Funktion, die ein Datum im Format TT/MM/JJJJ empfängt und ein Array mit separaten Werten zurückgibt:

let date = "11/05/2005";


function splitDate(date) {
return date.split('/');
}
console.log(splitDate(date));

Nach dem Login kopieren

anders:

// 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
Nach dem Login kopieren

Destrukturierung von Funktionsparametern:

// 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

Nach dem Login kopieren

Dasselbe, aber auf eine andere Art und Weise:

function printPerson2({ name: n, age: a, city: c }) {
console.log(n, a, c);
}
const person = {
name: 'John',
age: 30,
city: 'New York'
};
printPerson2(person);

Nach dem Login kopieren

Dies ist eine Array-Destrukturierung anstelle von Objekt:

function printPerson3([ name, age, city ]) {
console.log(name, age, city);
}
const person = ['Jooaca',30,'New York'];
printPerson3(person);

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDestrukturierung in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage