자바스크립트 개발자가 알아야 할 5가지 객체 메소드

거의 모든 것이 자바 스크립트의 객체이며 불행히도 우리 모두가 자바 스크립트와 함께 제공되는 장점을 아는 것은 아닙니다.

이 기사에서는 가장 많이 사용되는 5가지 Object 메서드와 해당 예제를 보여 드리겠습니다.

1. Object.assign()



이것은 아마도 자바스크립트에서 가장 많이 사용되는 객체 메소드일 것입니다. 따라서 기본적으로 이 방법은 하나 이상의 소스에서 대상 개체로 모든 값을 복사합니다.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

console.log(honda);
// {type: "sedan", price: 10000, isLuxury: true}


위의 코드 블록에서 일부 데이터를 포함하는 새로운 객체 chevrolet을 만들었습니다.
그리고 어떤 이유로 우리는 동일한 데이터를 가진 다른 객체를 원합니다. 그래서 우리는 기본적으로 assign 방법을 사용하여 chevrolet 내부의 데이터를 honda에 복사합니다.

2. Object.create()



이 메서드는 Object.assign()과 매우 유사합니다. 참조 개체를 기반으로 새 개체를 만들 수 있습니다. 그러나 assign() 메서드로 생성된 객체는 참조 객체와 연결된다는 차이점이 있습니다. 그 중 하나에 대한 변경 사항은 다른 하나(상속 체인)에 영향을 미칩니다.

//  with  assign
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

honda.price = 2000; // this will overwrite both
//  the price property in honda
//  and chevrolet

console.log(chevrolet);
// {type: "sedan", price: 2000, isLuxury: true}

//  with object.create
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.create(chevrolet);

honda.price = 2000;
//  change will not affect reference object (chevrolet)

console.log(chevrolet);
// {type: "sedan", price: 10000, isLuxury: true}

console.log(honda);
// {type: "sedan", price: 2000, isLuxury: true}


3. Object.entries()



항목.() 메서드는 객체 내부의 모든 데이터(키/값)가 포함된 배열을 반환합니다.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};

const chevArr = Object.entries(chevrolet);

console.log(chevArr);
// [ [type,sedan,], [price,10000,], [isLuxury,true,]]


4. Object.freeze()



이 방법은 말 그대로 개체를 고정하여 불변으로 만듭니다. 속성은 변경하거나 삭제할 수 없습니다.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
Object.freeze(chevrolet);

chevrolet.price = 20000;

console.log(chevrolet.price);
//  10000 instead of 20000.


5. 개체. 이다()



이 메서드는 두 개체를 비교하고 부울을 반환합니다.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

const isEqual = Object.is(honda, chevrolet);

console.log(isEqual);
//  true


업데이트: 이 기능이 마음에 들면 내 항목을 확인해야 합니다.
그게 다야. 그리고 나는 당신이 이것으로부터 뭔가를 배우기를 바란다.
즐거운 코딩.

좋은 웹페이지 즐겨찾기