JavaScript의 구조 분해 할당의 강력한 예-JS 튜토리얼-php.cn

JavaScript의 구조 분해 할당의 강력한 예

Linda Hamilton

풀어 주다： 2024-11-04 00:30:30

원래의

575명이 탐색했습니다.

Powerful Examples of Destructuring Assignments in JavaScript

구조 분해 할당은 ES6에 도입된 구문 설탕으로, 배열이나 객체의 값을 변수로 풀어낼 수 있습니다. 코드를 대폭 단순화하고 가독성을 높일 수 있습니다.

배열 파괴하기

기본 예:

const numbers = [1, 2, 3, 4];
const [first, second, ...rest] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4]

로그인 후 복사

요소 건너뛰기: 쉼표를 사용하여 요소를 건너뛸 수 있습니다.

const [first, , third] = numbers;
console.log(first, third); // Output: 1 3

로그인 후 복사

중첩 배열: 중첩 배열에 구조 분해를 적용할 수 있습니다.

const nestedArray = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = nestedArray;
console.log(a, b, c, d); // Output: 1 2 3 4

로그인 후 복사

객체 파괴

기본 예:

const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, age, city } = person;

console.log(name, age, city); // Output: Alice 30 New York

로그인 후 복사

속성 이름 바꾸기: 구조 분해 중에 속성 이름을 바꿀 수 있습니다.

const { name: firstName, age, city } = person;
console.log(firstName, age, city); // Output: Alice 30 New York

로그인 후 복사

기본값: 누락될 수 있는 속성에 대한 기본값을 제공하세요.

const { name, age = 25, city } = person;
console.log(name, age, city); // Output: Alice 30 New York

로그인 후 복사

중첩 개체: 중첩 개체 구조 해제:

const person = { name: 'Alice', address: { street: '123 Main St', city: 'New York' } };
const { name, address: { street, city } } = person;
console.log(name, street, city); // Output: Alice 123 Main St New York

로그인 후 복사

변수 교환

구조 분해를 사용하면 변수를 간결하게 교환할 수 있습니다.

let a = 10;
let b = 20;

[a, b] = [b, a];

console.log(a, b); // Output: 20 10

로그인 후 복사

구조 분해 함수 매개변수

함수 매개변수를 더 쉽게 읽을 수 있도록 구조화할 수 있습니다.

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet({ name: 'Alice', age: 30 });

로그인 후 복사

구조 분해 할당을 효과적으로 사용하면 더욱 깔끔하고 간결하며 읽기 쉬운 JavaScript 코드를 작성할 수 있습니다.

위 내용은 JavaScript의 구조 분해 할당의 강력한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!