마스터 JavaScript 객체 가이드

객체는 JavaScript의 기본 부분으로, 데이터를 저장하고 관리하는 백본 역할을 합니다. 객체는 속성의 컬렉션이며 각 속성은 키(또는 이름)와 값 간의 연결입니다. 객체를 생성, 조작 및 활용하는 방법을 이해하는 것은 모든 JavaScript 개발자에게 중요합니다. 이 글에서는 JavaScript의 다양한 개체 기능을 살펴보고 이를 익히는 데 도움이 되는 자세한 설명, 예제 및 설명을 제공합니다.

JavaScript의 객체 소개

JavaScript에서 객체는 데이터 컬렉션과 더 복잡한 엔터티를 저장하는 데 사용됩니다. 객체 리터럴이나 객체 생성자를 사용하여 생성됩니다.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

개체 속성

• Object.prototype: 모든 JavaScript 객체는 프로토타입에서 속성과 메서드를 상속합니다.

let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

객체 메소드

1.객체.할당()

하나 이상의 소스 개체에서 열거 가능한 모든 자체 속성 값을 대상 개체에 복사합니다. 대상 객체를 반환합니다.

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2.객체.생성()

지정된 프로토타입 객체와 속성을 사용하여 새 객체를 생성합니다.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. 객체 정의속성()

객체에서 직접 새 속성을 정의하거나 기존 속성을 수정하여 객체를 반환합니다.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. 객체 정의속성()

객체에 직접 새 속성을 정의하거나 기존 속성을 수정하여 객체를 반환합니다.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. 객체.항목()

주어진 객체의 열거 가능한 문자열 키 속성 [키, 값] 쌍의 배열을 반환합니다.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. 객체.동결()

객체를 고정합니다. 고정된 개체는 더 이상 변경할 수 없습니다. 개체를 고정하면 새 속성이 개체에 추가되거나 기존 속성이 제거되거나 기존 속성 값이 변경되는 것을 방지할 수 있습니다.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. 객체.fromEntries()

키-값 쌍 목록을 객체로 변환합니다.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Object.getOwnPropertyDescriptor()

주어진 객체의 자체 속성(즉, 객체의 프로토타입 체인이 아닌 객체에 직접 존재하는 속성)에 대한 속성 설명자를 반환합니다.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Object.getOwnPropertyDescriptors()

객체의 모든 속성 설명자를 포함하는 객체를 반환합니다.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. 객체.getOwnPropertyNames()

주어진 객체에서 직접 발견된 모든 속성(Symbol을 사용하는 속성을 제외한 열거 불가능한 속성 포함)의 배열을 반환합니다.

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Object.getOwnPropertySymbols()

주어진 개체에서 직접 발견된 모든 기호 속성의 배열을 반환합니다.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. 객체.getPrototypeOf()

지정된 객체의 프로토타입(즉, 내부 [[Prototype]] 속성 값)을 반환합니다.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. 객체.is()

두 값이 같은 값인지 확인합니다.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Object.isExtensible()

객체 확장이 허용되는지 확인합니다.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. 객체.isFrozen()

객체가 동결되었는지 확인합니다.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. 객체.isSealed()

객체가 봉인되었는지 확인합니다.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. 객체.키()

특정 객체의 열거 가능한 속성 이름 배열을 반환하며 일반 루프와 동일한 순서로 반복됩니다.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Object.preventExtensions()

객체의 확장을 방지합니다.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. 객체.씰()

객체를 봉인하여 새 속성이 객체에 추가되는 것을 방지하고 모든 기존 속성을 구성 불가능으로 표시합니다. 현재 속성의 값은 쓰기가 가능한 한 계속 변경할 수 있습니다.

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Object.setPrototypeOf()

지정된 객체의 프로토타입(즉, 내부 [[Prototype]] 속성)을 다른 객체 또는 null로 설정합니다.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. 객체.값()

for...in 루프에서 제공하는 것과 동일한 순서로 특정 객체의 열거 가능한 속성 값 배열을 반환합니다.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

실제 사례

예 1: 객체 복제

객체 복제를 위해 Object.sign() 사용

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

예 2: 객체 병합

객체 병합을 위해 Object.sign() 사용

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

위 내용은 마스터 JavaScript 객체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!