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

Destrukturierung in Javascript

Susan Sarandon
Susan SarandonOriginal
2024-12-24 16:06:10617Durchsuche

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'

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);

Ü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);

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));

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

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

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);

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);

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

Stellungnahme:
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