JavaScript의 구조 분해 할당은 배열의 값이나 객체의 속성을 고유한 변수로 풀 수 있는 구문입니다. 데이터를 추출할 때 코드를 더 간결하고 읽기 쉽게 만듭니다.
배열 구조 분해는 배열에서 값을 추출하여 변수에 할당합니다.
예:
const fruits = ["Apple", "Banana", "Cherry"]; const [first, second, third] = fruits; console.log(first); // Output: Apple console.log(second); // Output: Banana console.log(third); // Output: Cherry
쉼표 사이에 공백을 남겨두면 요소를 건너뛸 수 있습니다.
예:
const numbers = [1, 2, 3, 4, 5]; const [first, , third] = numbers; console.log(first); // Output: 1 console.log(third); // Output: 3
배열 요소가 정의되지 않은 경우 기본값을 사용할 수 있습니다.
예:
const colors = ["Red"]; const [primary, secondary = "Blue"] = colors; console.log(primary); // Output: Red console.log(secondary); // Output: Blue
나머지 연산자 ...를 사용하여 나머지 요소를 배열로 수집합니다.
예:
const numbers = [1, 2, 3, 4]; const [first, ...rest] = numbers; console.log(first); // Output: 1 console.log(rest); // Output: [2, 3, 4]
객체 구조 분해는 객체의 속성을 변수로 추출합니다.
예:
const person = { name: "Alice", age: 25, country: "USA" }; const { name, age } = person; console.log(name); // Output: Alice console.log(age); // Output: 25
콜론(:)을 사용하여 구조 분해하는 동안 변수 이름을 바꿀 수 있습니다.
예:
const person = { name: "Alice", age: 25 }; const { name: fullName, age: years } = person; console.log(fullName); // Output: Alice console.log(years); // Output: 25
속성이 정의되지 않은 경우 기본값을 사용할 수 있습니다.
예:
const person = { name: "Alice" }; const { name, age = 30 } = person; console.log(name); // Output: Alice console.log(age); // Output: 30
중첩된 개체의 속성을 분해할 수 있습니다.
예:
const employee = { id: 101, details: { name: "Bob", position: "Developer" }, }; const { details: { name, position }, } = employee; console.log(name); // Output: Bob console.log(position); // Output: Developer
나머지 연산자를 사용하여 나머지 속성을 수집합니다.
예:
const person = { name: "Alice", age: 25, country: "USA" }; const { name, ...others } = person; console.log(name); // Output: Alice console.log(others); // Output: { age: 25, country: "USA" }
배열과 객체 구조 분해를 결합할 수 있습니다.
예:
const data = { id: 1, items: ["Apple", "Banana", "Cherry"], }; const { id, items: [firstItem], } = data; console.log(id); // Output: 1 console.log(firstItem); // Output: Apple
함수 매개변수에서 직접 배열이나 객체의 구조를 해제할 수 있습니다.
아. 매개변수의 배열 구조 분해:
function sum([a, b]) { return a + b; } console.log(sum([5, 10])); // Output: 15
베. 매개변수의 객체 구조 분해:
const fruits = ["Apple", "Banana", "Cherry"]; const [first, second, third] = fruits; console.log(first); // Output: Apple console.log(second); // Output: Banana console.log(third); // Output: Cherry
const numbers = [1, 2, 3, 4, 5]; const [first, , third] = numbers; console.log(first); // Output: 1 console.log(third); // Output: 3
const colors = ["Red"]; const [primary, secondary = "Blue"] = colors; console.log(primary); // Output: Red console.log(secondary); // Output: Blue
const numbers = [1, 2, 3, 4]; const [first, ...rest] = numbers; console.log(first); // Output: 1 console.log(rest); // Output: [2, 3, 4]
구조 분해 할당을 마스터하면 JavaScript 코드를 더 읽기 쉽고 효율적으로 만들 수 있습니다.
안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어 및 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.
위 내용은 JavaScript의 구조 분해 할당 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!