JavaScript의 개체에서 속성 제거

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript의 개체에서 속성 제거
Moataz Farid 2023년1월30일 2020년12월25일
JavaScript JavaScript Object
  1. delete 연산자를 사용하여 JavaScript의 객체에서 속성 제거
  2. underscore 라이브러리를 사용하여 JavaScript의 객체에서 속성 제거
  3. spread 구문을 사용하여 JavaScript ECMAScript 6의 객체에서 속성 제거
JavaScript의 개체에서 속성 제거

이 튜토리얼은 여러 메서드를 사용하여 JavaScript의 객체에서 속성을 제거하는 방법을 설명합니다. ECMAScript 6에서delete 연산자,reassignment 메커니즘,underscore 라이브러리 및spread 구문을 사용하여 시연합니다.

delete 연산자를 사용하여 JavaScript의 객체에서 속성 제거

객체의 속성을 제거하는 한 가지 방법은 delete연산자입니다. 이 연산자는 객체에서 속성을 제거합니다. 예를 들어,id,subject 및grade 속성을 가진myObject 객체가 있고grade 속성을 제거해야합니다.

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);
//delete the grade property 
delete myObject.grade
console.log("Updated object: ",myObject)

출력:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object:  {id: "12345", subject: "programming"}

underscore 라이브러리를 사용하여 JavaScript의 객체에서 속성 제거

JavaScript의 객체에서 속성을 제거하는 데 도움이되지만 원래 객체를 업데이트하지 않는 라이브러리 중 하나는 underscore 라이브러리입니다. 이 라이브러리는 두 가지 중요한 함수_.pick()과_.omit()을 제공합니다.

_.omit()함수는 객체에서 주어진 속성을 제거하고 업데이트 된 사본을 반환 할 수 있습니다.

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var updatedObject  = _.omit(myObject , "grade")
console.log("Updated object with omit() : ",updatedObject)
console.log("Original object after update:",myObject);

출력:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with omit() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

_.pick()함수는 객체의 지정된 속성 만 포함하고 다른 모든 속성은 무시하며 해당 객체에서 업데이트 된 복사본을 반환합니다.

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var updatedObject  = _.pick(myObject , "id" ,"subject" )
console.log("Updated object with pick() : ",updatedObject)
console.log("Original object after update:",myObject);

출력:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with pick() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

여기에서 라이브러리를 가져올 수 있습니다.

spread 구문을 사용하여 JavaScript ECMAScript 6의 객체에서 속성 제거

ECMAScript 6의 JavaScript spread 구문은 원래 객체를 변경하지 않고 JavaScript 객체에서 주어진 속성을 제거하지만 새로 업데이트 된 객체를 반환하는 매우 우아한 방법을 제공합니다.

spread 구문을 사용하면 원래 객체를 두 개의 변수로 분리하는 것처럼 보입니다. 그중 하나는 제거 된 속성이됩니다. 다른 변수는 제거 된 개체없이 원본 개체의 복사본을 보유합니다.

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var {grade , ...myUpdatedObject} = myObject;

console.log("The removed 'grade' property : ",grade)
console.log("Updated object : ",myUpdatedObject)
console.log("Original object after update:",myObject);

출력:

Original object: {id: "12345", subject: "programming", grade: "A"}
The removed 'grade' property :  A
Updated object :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

관련 문장 - JavaScript Object