>웹 프론트엔드 >JS 튜토리얼 >JavaScript 객체 마스터하기: 비교, 조작 및 제어 기술

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

Linda Hamilton
Linda Hamilton원래의
2024-11-12 01:32:03542검색

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

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