> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트의 구조분해

자바스크립트의 구조분해

Susan Sarandon
풀어 주다: 2024-12-24 16:06:10
원래의
608명이 탐색했습니다.

Desestruturação em Javascript

안녕하세요 여러분, 다음은 구조 분해의 몇 가지 예와 간단한 연습입니다. 도움이 되기를 바랍니다

중첩 분해:

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'

로그인 후 복사

배열 분해(배열에서 값을 추출하여 변수에 저장):

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

로그인 후 복사

연습: dd/mm/yyyy 형식으로 날짜를 수신하고 별도의 값이 있는 배열을 반환하는 함수를 생성하세요. 문자열을 배열로 분리하려면 분할 기능을 사용하세요.

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

로그인 후 복사

dd/mm/yyyy 형식으로 날짜를 수신하고 별도의 값이 있는 배열을 반환하는 함수를 만듭니다.

let date = "11/05/2005";


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

로그인 후 복사

다른 방법:

// 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
로그인 후 복사

함수 매개변수 구조 분해:

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

로그인 후 복사

같은 일이지만 다른 방법:

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

로그인 후 복사

이것은 객체 대신 배열 구조 분해입니다.

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

로그인 후 복사

위 내용은 자바스크립트의 구조분해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿