>  기사  >  웹 프론트엔드  >  나의 React 여정: 4일차

나의 React 여정: 4일차

DDD
DDD원래의
2024-11-25 05:52:11163검색

My React Journey: Day 4

오늘은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:중요한 JS 리소스다음 기사:중요한 JS 리소스