자바스크립트 객체를 추가, 삭제, 수정, 확인하는 방법

JavaScript는 웹 프런트 엔드 개발에 널리 사용되는 스크립팅 언어로, 배우기 쉽고 HTML 및 CSS와 밀접하게 통합되어 웹 사이트 및 애플리케이션의 클라이언트 측 스크립팅에 널리 사용되어 웹 사이트 프레젠테이션을 더욱 역동적이고 대화형으로 만듭니다. . JavaScript에서 객체는 매우 중요한 데이터 유형이며 객체 추가, 삭제, 수정 및 쿼리 작업도 프런트 엔드 개발에서 어디에나 있습니다.

1. JavaScript 객체 개요

1. 정의

JavaScript에서 객체는 키-값 쌍으로 구성된 정렬되지 않은 데이터 컬렉션의 집합입니다. 여기서 키-값 쌍의 키는 문자열 유형입니다. 이름, 각 속성에는 고유한 키가 있으며 값은 JavaScript 객체 또는 기본 데이터 유형의 값일 수 있습니다.

2. 정의 방법

JavaScript에서 객체를 정의하는 방법은 다음 두 가지입니다.

1) 객체 리터럴 사용

객체 리터럴은 중괄호 { }로 묶인 표현식입니다. JavaScript에서 객체를 생성하는 가장 일반적이고 간단한 방법입니다.

예:

const person = {
이름: "Tom",
나이: 20,
성별: "남성"
}

2) 생성자 사용(Constructor)

JavaScript에서 생성자는 객체에 대한 템플릿을 만드는 데 사용되는 특수 함수입니다. 일부 속성이나 메서드는 생성자에서 미리 설정할 수 있습니다. new 키워드를 사용하면 생성자를 호출하고 새 개체 인스턴스를 만들 수 있습니다. 객체 인스턴스를 생성하는 프로세스를 종종 인스턴스화라고 합니다.

예:

function Person(이름, 나이, 성별) {
this.name = 이름;
this.age = age;
this.sex = sex; " , 20, "male");

2. JavaScript 객체 연산

1. 객체 속성 추가 및 수정

JavaScript에서 객체의 속성은 동적으로 추가되며, 이후에는 임의로 속성을 추가, 수정, 삭제할 수 있습니다. 객체가 생성됩니다. 다음으로 자바스크립트에서 객체 속성을 추가하고 수정하는 방법을 살펴보겠습니다.

(1) 도트를 사용하세요.

도트 연산자를 사용하여 JavaScript 개체 속성에 액세스하고 수정할 수 있습니다. 예:

const person = {

name: "Tom",

age: 20,

sex: "male"
}

// 속성 수정
person.name = "Jerry";

person.age = 30 ;

person.address = "Beijing";

위 코드에서는 점 기호를 사용하여 person 객체의 속성명을 통해 객체 속성을 조작하거나 추가할 수 있습니다. 런타임에 새로운 속성을 부여합니다.

(2) 대괄호 [] 사용

대괄호 []를 사용하여 JavaScript 개체 속성에 액세스하고 수정할 수도 있습니다. 예:

const person = {

name: "Tom",

age: 20,

sex: "male"
}

// 속성 수정
person["name"] = "Jerry";

person[ " age"] = 30;

person["address"] = "Beijing";

위 코드에서는 대괄호 [] 연산자를 사용하여 사용하려는 개체 속성의 이름에 액세스합니다. 새 속성을 추가하려는 경우 형식은 다음과 같습니다.

person["propertyName"] = propertyValue;

2 개체 속성 삭제

JavaScript의 개체 속성도 삭제할 수 있습니다. . 더 이상 필요하지 않은 속성을 삭제하려면 delete 키워드를 사용할 수 있습니다. 예:

const person = {

name: "Tom",

age: 20,

sex: "male"
}

// 속성 삭제
delete person.sex;

위 코드에서 다음을 사용합니다. 삭제 키를 입력하면 person 개체의 성별 속성이 삭제됩니다.

3. 객체 속성에 대한 액세스

JavaScript의 객체 속성은 위에서 언급한 두 가지 방법을 통해 액세스하고 쿼리할 수 있습니다. 아래에서는 이 두 가지 방법을 자세히 소개합니다.

(1) 점 표기법을 사용합니다.

점 표기법을 사용하여 객체의 속성에 액세스할 수 있습니다. 예:

const person = {

name: "Tom",

age: 20,

sex: " male"
}

console.log(person.name); // 출력 "Tom"
console.log(person.age); // 출력 "20"

console.log(person.sex); // 출력 "male"

(2) 대괄호 [] 사용

대괄호 []를 사용하여 JavaScript 개체의 속성에 액세스할 수도 있습니다. 예:

const person = {

name: "Tom",

age: 20,

sex: "남성"
}

console.log(person["name"]) // 출력 "Tom"
console.log(person["age"]) // 출력 "20"

console.log(person ["sex"]); // "male" 출력

3. JavaScript 개체 사례

JavaScript 개체 사례를 통해 이론적 지식을 통합합니다.

// 학생 개체 정의

let Student = {

name: 'Tom',
id: 001,
major: 'Computer Science',
scores: {
    math: 100,
    english: 90,
    physics: 95
}

};

// 개체 속성 액세스 및 수정

student.name = 'Jerry' // 이름 속성 수정

student.scores.english = 92; / 영어 속성 수정

student.scores['physics'] = 98 // 물리 속성 수정
;

// 개체 속성 삭제
delete Student['major']; // 주요 속성 삭제

// 새 속성 추가
student.gender = 'male'; // 성별 속성 추가

// 개체 속성 출력
console .log(student.name); // "Jerry" 출력
console.log(student.scores.math); // "100" 출력
console.log(student.scores.english) // 출력 "92"
console.log(student.scores.physic); // "98" 출력
console.log(student.gender); // "male" 출력

위의 경우 "student" 객체라는 JavaScript를 생성합니다. . 먼저 마침표와 대괄호 연산자를 사용하여 개체의 속성에 액세스하고 수정했습니다. 또한 개체의 속성을 삭제하고 개체에 새 속성을 추가하는 방법도 보여 주었습니다. 마지막으로 객체에 여러 속성값을 출력합니다.

요약:

JavaScript에서 개체는 매우 중요한 데이터 유형이며 개체 추가, 삭제, 수정 및 쿼리 작업도 프런트 엔드 개발에서 어디에나 있습니다. 점 및 대괄호 [] 연산자를 사용하여 JavaScript 개체의 속성에 액세스하고 수정할 수 있으며, 삭제 키워드를 사용하여 더 이상 필요하지 않은 속성을 삭제할 수도 있습니다. 프론트엔드 개발자로서 웹 애플리케이션을 빠르고 쉽게 개발하려면 JavaScript 객체의 작동에 능숙해야 합니다.

위 내용은 자바스크립트 객체를 추가, 삭제, 수정, 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!