오늘은 JavaScript의 두 가지 필수 데이터 구조인 객체와 배열에 대해 자세히 알아보는 시간이었습니다. 그들의 방법과 구조를 분해하는 방법을 이해하면 코드를 단순화할 수 있는 새로운 가능성이 열렸습니다. 제가 배운 내용을 요약하면 다음과 같습니다.
객체
객체는 관련 속성 및 메서드의 모음이므로 데이터를 의미 있게 그룹화할 수 있습니다.
예제 개체:
let user = { name: 'Segun', age: 30, email: 'ayoooladamilare@gmail.com', location: 'Nigeria', blogs: ['Why are you living', 'The original me'], login: function () { console.log(this.name, 'logged in'); }, logout: function () { console.log(this.name, 'logged out'); }, };
JavaScript는 내장 객체와 사용자 정의 객체를 생성할 수 있는 기능을 제공합니다.
객체 메서드
Object.keys(user): 객체에 있는 모든 키의 배열을 반환합니다.
console.log(Object.keys(user)); // Output: ['name', 'age', 'email', 'location', 'blogs']
Object.values(user): 객체에 포함된 모든 값의 배열을 반환합니다.
console.log(Object.values(user)); // Output: ['Segun', 30, 'ayoooladamilare@gmail.com', 'Nigeria', ['Why are you living', 'The original me']]
Object.seal(user): 속성 추가 또는 제거를 방지하지만 기존 속성 수정은 허용합니다.
Object.seal(user); user.age = 31; // Allowed user.country = 'Ghana'; // Not allowed
객체 분해
구조 분해는 객체에서 속성 추출을 단순화합니다.
const { name, age, email, location } = user; console.log(name); // Output: 'Segun' console.log(location); // Output: 'Nigeria'
배열
배열은 순서가 지정된 목록이므로 일련의 데이터를 처리하는 데 적합합니다.
배열 예시:
const numbers = [1, 2, 3, 4, 5];
배열 방법
.push(): 배열 끝에 요소를 추가하고 새 길이를 반환합니다.
numbers.push(6);
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]
.pop(): 배열에서 마지막 요소를 제거하고 반환합니다.
numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4, 5]
배열 구조 분해
객체 구조 분해와 유사하게 배열 구조 분해를 사용하면 요소를 깔끔하게 추출할 수 있습니다.
const colors = ['red', 'green', 'blue', 'black', 'white']; let [first, , third] = colors; console.log(first, third); // Output: 'red' 'blue'
구조 분해를 사용하여 요소를 교환할 수도 있습니다.
[colors[0], colors[4]] = [colors[4], colors[0]]; console.log(colors); // Output: ['white', 'green', 'blue', 'black', 'red']
마지막 생각
특히 메소드와 구조 분해를 사용하여 객체와 배열로 작업하면 코딩이 더 깔끔하고 직관적으로 됩니다. 구조 분해를 통해 데이터 액세스를 단순화하고 기본 제공 방법에 대해 배우는 것이 힘을 실어주는 방식이 마음에 들었습니다.
5일차, 나왔어요! 이 여행은 나날이 좋아지고 있습니다. 계속 지켜봐주세요!
위 내용은 나의 React 여정: 4일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!