JavaScript 객체 마스터하기: 비교, 조작 및 제어 기술

Linda Hamilton
풀어 주다: 2024-11-12 01:32:03
원래의
469명이 탐색했습니다.

Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

JavaScript 개체는 놀라울 정도로 강력하고 다재다능합니다. 이를 통해 복잡한 데이터를 저장할 수 있으며 데이터 조작을 더 쉽게 만드는 다양한 내장 방법이 제공됩니다. 가장 유용한 객체 메소드 중 일부를 살펴보고 서로 어떻게 비교하는지 살펴보겠습니다.


1. 객체 비교

JavaScript는 값이 아닌 참조로 비교하기 때문에 ===로 객체를 직접 비교하는 것은 작동하지 않습니다. 예:

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false
로그인 후 복사
로그인 후 복사

내용을 비교하려면 심층비교 기능이나 Lodash 같은 라이브러리를 이용하세요.


2. 객체 설명자

속성 설명자는 개체의 속성에 대한 메타데이터를 제공합니다. 예를 들면 다음과 같습니다.

value: 속성의 값
쓰기 가능: 값을 변경할 수 있나요?
열거 가능: 루프에서 표시됩니까?
구성 가능: 수정할 수 있나요?

const obj = { name: "Alice" };
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);
로그인 후 복사

3. 키, 값, 항목 추출

Object.keys(): 객체의 키 배열을 반환합니다.
Object.values(): 값의 배열을 반환합니다.
Object.entries(): 키-값 쌍의 배열을 반환합니다.

const person = { name: "Alice", age: 25 };
console.log(Object.keys(person));   // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
로그인 후 복사

4. 개체 병합 및 복제

Object.sign()은 한 객체의 속성을 다른 객체에 복사합니다. 얕은 복사만 수행하므로 중첩된 개체를 깊게 복제하지 않습니다.

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
로그인 후 복사

5.객체.생성()

이 메소드는 지정된 프로토타입을 사용하여 새 객체를 생성합니다. 상속에 유용함:

const personPrototype = {
  greet() { return `Hello, ${this.name}`; }
};
const person = Object.create(personPrototype);
person.name = "Alice";
console.log(person.greet()); // "Hello, Alice"
로그인 후 복사

6. 객체.is()

이 방법은 0과 -0을 구별하거나 NaN을 정확하게 비교하여 두 값이 동일한지 확인합니다.

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true
로그인 후 복사

7. Object.getOwnPropertyDescriptors()

모든 속성의 설명자를 가져옵니다. 기본이 아닌 설명자가 포함된 전체 복사에 유용합니다.

const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptors(obj));
로그인 후 복사

8. 객체.getOwnPropertyNames()

열거 불가능한 속성을 포함하여 모든 속성 이름을 반환합니다.

const obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b"]
로그인 후 복사

9. 객체.씰()

객체를 봉인하여 기존 속성을 변경할 수 있지만 추가나 삭제는 허용하지 않습니다.

const obj = { name: "Alice" };
Object.seal(obj);
obj.age = 30; // Fails
console.log(obj); // { name: "Alice" }
로그인 후 복사

10. 객체.동결()

개체를 고정하여 수정을 방지합니다.

const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // Fails
console.log(obj); // { name: "Alice" }
로그인 후 복사

11.객체.할당()

여러 원본 개체의 속성을 대상 개체로 복사하는 데 사용됩니다.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false
로그인 후 복사
로그인 후 복사

결론

JavaScript는 각각 특정 목적을 수행하는 객체 작업을 위한 다양한 메소드를 제공합니다. 이러한 메소드를 사용하는 방법과 시기를 이해하면 객체 동작을 제어하고 해당 속성을 수정하거나 심지어 변경되지 않도록 잠글 수도 있습니다.

위 내용은 JavaScript 객체 마스터하기: 비교, 조작 및 제어 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿