etc./StackOverFlow

JavaScript 객체에서 속성을 어떻게 제거합니까?

청렴결백한 만능 재주꾼 2021. 9. 23. 22:51
반응형

질문자 :johnstok


다음과 같이 객체를 생성한다고 가정해 보겠습니다.

 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" };

다음과 같이 myObject 로 끝나도록 regex 속성을 제거하려면 어떻게 해야 합니까?

 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI" };


답변자 : nickf


객체에서 속성을 제거하려면(객체 변경) 다음과 같이 하면 됩니다.

 delete myObject.regex; // or, delete myObject['regex']; // or, var prop = "regex"; delete myObject[prop];

데모

 var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; delete myObject.regex; console.log(myObject);

더 그것에 대해 독서에 관심있는 사람들을위한, 스택 오버플로 사용자 kangax는 [정보] 믿을 수 없을만큼 깊이있는 블로그 게시물 작성했습니다 delete , 자신의 블로그에 문을 삭제 이해 . 적극 추천합니다.

일부를 제외하고 원본의 모든 키를 가진 객체를 원하면 Destructuring 을 사용할 수 있습니다.

데모

 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; const {regex, ...newObj} = myObject; console.log(newObj); // has no 'regex' key console.log(myObject); // remains unchanged



답변자 : Dan


JavaScript의 객체는 키와 값 사이의 맵으로 생각할 수 있습니다. delete 연산자는 일반적으로 개체 속성으로 알려진 이러한 키를 한 번에 하나씩 제거하는 데 사용됩니다.

 var obj = { myProperty: 1 } console.log(obj.hasOwnProperty('myProperty')) // true delete obj.myProperty console.log(obj.hasOwnProperty('myProperty')) // false

delete 연산자는 메모리를 직접 해제하지 않으며 속성 자체 가 개체에서 제거된다는 점에서 속성 null 또는 undefined 삭제된 속성의 이 참조 유형(객체)이고 프로그램의 다른 부분이 여전히 해당 객체에 대한 참조를 보유하는 경우 해당 객체는 물론 모든 참조가 다음을 가질 때까지 가비지 수집되지 않습니다. 사라졌다.

delete 는 설명자가 구성 가능한 것으로 표시한 속성에서만 작동합니다.



답변자 : redsquare


 var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; delete myObject.regex; console.log ( myObject.regex); // logs: undefined

이것은 Firefox와 Internet Explorer에서 작동하며 다른 모든 것에서도 작동한다고 생각합니다.



답변자 : Koen.


오래된 질문, 현대적인 답변. ECMAScript 6 기능인 객체 구조화를 사용하면 다음과 같이 간단합니다.

 const { a, ...rest } = { a: 1, b: 2, c: 3 };

또는 질문 샘플:

 const myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; const { regex, ...newObject } = myObject; console.log(newObject);

Babel 체험판 편집기에서 실제로 작동하는 것을 볼 수 있습니다.


편집하다:

동일한 변수에 재할당하려면 let 사용하십시오.

 let myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; ({ regex, ...myObject } = myObject); console.log(myObject);


답변자 : Braden Best


delete 연산자는 객체에서 속성을 제거하는 데 사용됩니다.

 const obj = { foo: "bar" } delete obj.foo obj.hasOwnProperty("foo") // false

배열의 경우 이는 요소 제거와 동일하지 않습니다 . 배열에서 요소를 제거하려면 Array#splice 또는 Array#pop 합니다. 예를 들어:

 arr // [0, 1, 2, 3, 4] arr.splice(3,1); // 3 arr // [0, 1, 2, 4]

세부

delete 는 C 및 C++의 키워드와 기능이 다릅니다. 메모리를 직접 해제하지 않습니다. 대신, 유일한 목적은 객체에서 속성을 제거하는 것입니다.

배열의 경우 인덱스에 해당하는 속성을 삭제하면 희소 배열(즉, "구멍"이 있는 배열)이 생성됩니다. 대부분의 브라우저는 이러한 누락된 배열 인덱스를 "비어 있음"으로 나타냅니다.

 var array = [0, 1, 2, 3] delete array[2] // [0, 1, empty, 3]

delete array[3]array[2] 로 재배치하지 않습니다.

JavaScript의 다른 내장 함수는 희소 배열을 다르게 처리합니다.

  • for...in 은 빈 인덱스를 완전히 건너뜁니다.

  • 전통적인 for 루프는 인덱스의 값에 대해 undefined

  • Symbol.iterator 를 사용하는 모든 메서드는 인덱스의 값에 대해 undefined

  • forEach , mapreduce 는 단순히 누락된 인덱스를 건너뜁니다.

따라서 배열에서 요소를 제거하는 일반적인 사용 사례 delete 배열에는 요소를 제거하고 메모리를 재할당하기 위한 전용 메서드가 있습니다: Array#splice()Array#pop .

Array#splice(start[, deleteCount[, item1[, item2[, ...]]]])

Array#splice 는 배열을 변경하고 제거된 인덱스를 반환합니다. deleteCount 요소는 index start 에서 제거되고 item1, item2... itemN start 부터 배열에 삽입됩니다. deleteCount 가 생략되면 startIndex의 요소가 배열의 끝까지 제거됩니다.

 let a = [0,1,2,3,4] a.splice(2,2) // returns the removed elements [2,3] // ...and `a` is now [0,1,4]

Array.prototype : Array#slice 에는 이름이 비슷하지만 다른 함수도 있습니다.

배열#슬라이스([시작[, 끝]])

Array#slice start 부터 end 표시된 인덱스를 포함하는 새 배열을 반환합니다. end 를 지정하지 않으면 기본적으로 배열의 끝이 됩니다. end 가 양수이면 중지할 0부터 시작하는 비포함 인덱스를 지정합니다. end 가 음수이면 배열의 끝부터 다시 계산하여 중지할 인덱스를 지정합니다(예: -1은 최종 인덱스를 생략합니다). end <= start 이면 결과는 빈 배열입니다.

 let a = [0,1,2,3,4] let slices = [ a.slice(0,2), a.slice(2,2), a.slice(2,3), a.slice(2,5) ] // a [0,1,2,3,4] // slices[0] [0 1]- - - // slices[1] - - - - - // slices[2] - -[3]- - // slices[3] - -[2 4 5]

배열#팝

Array#pop 은 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다. 이 작업은 배열의 길이를 변경합니다.



답변자 : Lior Elrom


스프레드 구문 (ES6)

Koen의 답변 을 완료하려면 스프레드 구문을 사용하여 동적 변수를 제거하려는 경우 다음과 같이 할 수 있습니다.

 const key = 'a'; const { [key]: foo, ...rest } = { a: 1, b: 2, c: 3 }; console.log(foo); // 1 console.log(rest); // { b: 2, c: 3 }

* foo 의 값을 가진 새로운 변수가 될 것이다 (1). a

확장된 답변

개체에서 속성을 제거하는 몇 가지 일반적인 방법이 있습니다.
각각의 장단점 이 있습니다(이 성능 비교 확인 ).

삭제 연산자

읽기 쉽고 짧지만 성능이 최적화되지 않았기 때문에 많은 수의 개체에서 작업하는 경우 최선의 선택이 아닐 수 있습니다.

 delete obj[key];

재할당

delete 보다 2배 이상 빠르지만 속성이 삭제되지 않고 반복될 수 있습니다.

 obj[key] = null; obj[key] = false; obj[key] = undefined;

스프레드 연산자

ES6 연산자를 사용하면 기존 객체를 변경하지 않고 속성을 제외하고 완전히 새로운 객체를 반환할 수 있습니다. 단점은 위의 것보다 성능이 더 나쁘고 한 번에 많은 속성을 제거해야 할 때 사용하지 않는 것이 좋습니다.

 { [key]: val, ...rest } = obj;


답변자 : Thaddeus Albers


또 다른 대안은 Underscore.js 라이브러리를 사용하는 것입니다.

_.pick()_.omit() 둘 다 객체의 복사본을 반환하고 원본 객체를 직접 수정하지 않습니다. 결과를 원래 개체에 할당하면 트릭을 수행해야 합니다(표시되지 않음).

참조: 링크 _.pick(객체, *키)

화이트리스트에 있는 키(또는 유효한 키의 배열)에 대한 값만 갖도록 필터링된 객체의 복사본을 반환합니다.

 var myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; _.pick(myJSONObject, "ircEvent", "method"); => {"ircEvent": "PRIVMSG", "method": "newURI"};

참조: 링크 _.omit(객체, *키)

블랙리스트에 있는 키(또는 키 배열)를 생략하도록 필터링된 개체의 복사본을 반환합니다.

 var myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; _.omit(myJSONObject, "regex"); => {"ircEvent": "PRIVMSG", "method": "newURI"};

배열의 경우 _.filter()_.reject() 를 비슷한 방식으로 사용할 수 있습니다.



답변자 : YairTawil


속성 없이 개체를 복제하려면 다음을 수행합니다.

예를 들어:

 let object = { a: 1, b: 2, c: 3 };

그리고 삭제해야 a .

  1. 명시적 소품 키 사용 :

     const { a, ...rest } = object; object = rest;
  2. 가변 소품 키 사용 :

     const propKey = 'a'; const { [propKey]: propValue, ...rest } = object; object = rest;
  3. 멋진 화살표 기능 :

     const removeProperty = (propKey, { [propKey]: propValue, ...rest }) => rest; object = removeProperty('a', object);
  4. 여러 속성의 경우

     const removeProperties = (object, ...keys) => (keys.length ? removeProperties(removeProperty(keys.pop(), object), ...keys) : object);

용법

 object = removeProperties(object, 'a', 'b') // result => { c: 3 }

또는

 const propsToRemove = ['a', 'b'] object = removeProperties(object, ...propsToRemove) // result => { c: 3 }


답변자 : Mehran Hatami


질문 제목, JavaScript 객체에서 속성 제거에 사용한 용어는 몇 가지 다른 방식으로 해석될 수 있습니다. 하나는 전체 메모리와 개체 키 목록을 제거하거나 다른 하나는 개체에서 제거하는 것입니다. 다른 답변에서 언급했듯이 delete 키워드가 주요 부분입니다. 다음과 같은 개체가 있다고 가정해 보겠습니다.

 myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

당신이 할 경우:

 console.log(Object.keys(myJSONObject));

결과는 다음과 같습니다.

 ["ircEvent", "method", "regex"]

다음과 같이 객체 키에서 특정 키를 삭제할 수 있습니다.

 delete myJSONObject["regex"];

Object.keys(myJSONObject) 사용하는 개체 키는 다음과 같습니다.

 ["ircEvent", "method"]

그러나 요점은 메모리에 관심이 있고 전체 개체를 메모리에서 제거하려는 경우 키를 삭제하기 전에 null로 설정하는 것이 좋습니다.

 myJSONObject["regex"] = null; delete myJSONObject["regex"];

여기서 또 다른 중요한 점은 동일한 객체에 대한 다른 참조에 주의해야 한다는 것입니다. 예를 들어, 다음과 같은 변수를 생성하는 경우:

 var regex = myJSONObject["regex"];

또는 다음과 같이 다른 개체에 대한 새 포인터로 추가합니다.

 var myOtherObject = {}; myOtherObject["regex"] = myJSONObject["regex"];

myJSONObject 객체에서 제거하더라도 regex 변수와 myOtherObject["regex"] 여전히 값이 있기 때문에 해당 특정 객체는 메모리에서 삭제되지 않습니다. 그렇다면 어떻게 확실히 메모리에서 객체를 제거할 수 있을까요?

대답은 코드에 있는 모든 참조를 삭제하고 바로 그 개체를 가리키고 var 문을 사용하여 해당 개체에 대한 새 참조를 생성하지 않는 것 입니다. var 문에 관한 이 마지막 요점은 우리가 일반적으로 직면하는 가장 중요한 문제 중 하나입니다. var 문을 사용하면 생성된 객체가 제거되지 않기 때문입니다.

var regex 변수를 생성했기 때문에 해당 객체를 제거할 수 없으며 다음과 같이 하면 됩니다.

 delete regex; //False

결과는 false . 이는 삭제 문이 예상대로 실행되지 않았음을 의미합니다. 그러나 이전에 해당 변수를 생성한 적이 myOtherObject["regex"] 만 마지막 기존 참조로 가지고 있는 경우 다음과 같이 제거하여 이 작업을 수행할 수 있습니다.

 myOtherObject["regex"] = null; delete myOtherObject["regex"];

즉, JavaScript 객체는 해당 객체를 가리키는 코드에 참조가 남지 않는 즉시 종료됩니다.


업데이트:

@AgentME 덕분에:

속성을 삭제하기 전에 null로 설정하면 아무 것도 수행되지 않습니다(Object.seal에 의해 개체가 봉인되고 삭제가 실패하지 않는 한. 특별히 시도하지 않는 한 일반적으로 그렇지 않습니다).

Object.seal 대한 자세한 정보를 얻으려면: Object.seal()



답변자 : madox2


ECMAScript 2015(또는 ES6)에는 Reflect 객체가 내장되어 있습니다. 대상 객체와 속성 키를 매개변수로 하여 Reflect.deleteProperty() 함수를 호출하여 객체 속성을 삭제할 수 있습니다.

 Reflect.deleteProperty(myJSONObject, 'regex');

이는 다음과 같습니다.

 delete myJSONObject['regex'];

그러나 객체의 속성을 구성할 수 없는 경우 deleteProperty 함수나 delete 연산자로 삭제할 수 없습니다.

 let obj = Object.freeze({ prop: "value" }); let success = Reflect.deleteProperty(obj, "prop"); console.log(success); // false console.log(obj.prop); // value

Object.freeze() 는 객체의 모든 속성을 구성할 수 없도록 합니다(다른 항목 제외). deleteProperty 함수( 삭제 연산자 포함 )는 속성을 삭제하려고 하면 false 속성을 구성할 수 있는 경우 속성이 존재하지 않더라도 true

deletedeleteProperty 의 차이점은 엄격 모드를 사용할 때입니다.

 "use strict"; let obj = Object.freeze({ prop: "value" }); Reflect.deleteProperty(obj, "prop"); // false delete obj["prop"]; // TypeError: property "prop" is non-configurable and can't be deleted


답변자 : John Slegers


다음과 같은 객체가 있다고 가정합니다.

 var Hogwarts = { staff : [ 'Argus Filch', 'Filius Flitwick', 'Gilderoy Lockhart', 'Minerva McGonagall', 'Poppy Pomfrey', ... ], students : [ 'Hannah Abbott', 'Katie Bell', 'Susan Bones', 'Terry Boot', 'Lavender Brown', ... ] };

객체 속성 삭제

staff 배열을 사용하려는 경우 적절한 방법은 다음과 같습니다.

 delete Hogwarts.staff;

또는 다음을 수행할 수도 있습니다.

 delete Hogwarts['staff'];

마찬가지로, 전체 학생 배열을 제거 delete Hogwarts.students; 또는 delete Hogwarts['students']; .

배열 인덱스 삭제

이제 한 명의 교직원이나 학생을 제거하려는 경우 두 속성이 모두 배열 자체이기 때문에 절차가 약간 다릅니다.

직원의 인덱스를 알고 있다면 간단히 다음과 같이 할 수 있습니다.

 Hogwarts.staff.splice(3, 1);

색인을 모르는 경우 색인 검색도 수행해야 합니다.

 Hogwarts.staff.splice(Hogwarts.staff.indexOf('Minerva McGonnagall') - 1, 1);

메모

delete 를 사용할 수 있지만 나중에 Hogwarts.staff.length 호출할 때 잘못된 결과를 얻을 수 있습니다. 즉, delete length 속성의 값은 업데이트하지 않습니다. delete 사용하면 인덱싱도 엉망이 됩니다.

따라서 개체에서 값을 삭제할 때 항상 먼저 개체 속성을 처리하는지 아니면 배열 값을 처리하는지 여부를 고려하고 이에 따라 적절한 전략을 선택하십시오.

이것을 실험하고 싶다면 이 Fiddle 을 시작점으로 사용할 수 있습니다.



답변자 : emil


저는 개인적으로 개체 및 배열 조작을 위해 Underscore.js 또는 Lodash를 사용합니다.

 myObject = _.omit(myObject, 'regex');


답변자 : Alireza


삭제 방법을 사용하는 것이 가장 좋은 방법입니다. MDN 설명에 따라 삭제 연산자는 개체에서 속성을 제거합니다. 따라서 다음과 같이 간단히 작성할 수 있습니다.

 delete myObject.regex; // OR delete myObject['regex'];

삭제 연산자는 객체에서 주어진 속성을 제거합니다. 성공적으로 삭제되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 그러나 다음 시나리오를 고려하는 것이 중요합니다.

  • 삭제하려는 속성이 존재하지 않으면 삭제는 아무런 효과가 없으며 true를 반환합니다.

  • 객체의 프로토타입 체인에 같은 이름의 속성이 있는 경우 삭제 후 객체는 프로토타입 체인의 속성을 사용합니다(즉, 삭제는 자체 속성에만 영향을 미칩니다).

  • var로 선언된 속성은 전역 범위 또는 함수 범위에서 삭제할 수 없습니다.

  • 따라서 delete는 전역 범위에서 함수를 삭제할 수 없습니다(함수 정의의 일부인지 또는 함수(표현식)).

  • 객체의 일부인 기능(
    전역 범위)는 삭제로 삭제할 수 있습니다.

  • let 또는 const로 선언된 속성은 정의된 범위에서 삭제할 수 없습니다. 구성할 수 없는 속성은 제거할 수 없습니다. 여기에는 Math, Array, Object와 같은 내장 객체의 속성과 Object.defineProperty()와 같은 메서드로 구성할 수 없는 것으로 생성된 속성이 포함됩니다.

다음 스니펫은 또 다른 간단한 예를 보여줍니다.

 var Employee = { age: 28, name: 'Alireza', designation: 'developer' } console.log(delete Employee.name); // returns true console.log(delete Employee.age); // returns true // When trying to delete a property that does // not exist, true is returned console.log(delete Employee.salary); // returns true

더 많은 예를 보고 더 자세히 알아보려면 아래 링크를 방문하세요.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete



답변자 : kind user


Array#reduce 사용하는 또 다른 솔루션입니다.

 var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; myObject = Object.keys(myObject).reduce(function(obj, key) { if (key != "regex") { //key you want to remove obj[key] = myObject[key]; } return obj; }, {}); console.log(myObject);

그러나 원래 개체 가 변경됩니다. 지정된 키 없이 새 객체를 생성하려면 다음과 같이 새 변수에 reduce 함수를 할당하십시오.

(ES6)

 const myObject = { ircEvent: 'PRIVMSG', method: 'newURI', regex: '^http://.*', }; const myNewObject = Object.keys(myObject).reduce((obj, key) => { key !== 'regex' ? obj[key] = myObject[key] : null; return obj; }, {}); console.log(myNewObject);



답변자 : Willem


여기에 좋은 답변이 많이 있지만 JavaScript에서 속성을 제거하기 위해 delete를 사용할 때 오류를 방지하기 위해 해당 속성이 있는지 먼저 확인하는 것이 종종 현명하다는 점을 말씀드리고 싶습니다.

 var obj = {"property":"value", "property2":"value"}; if (obj && obj.hasOwnProperty("property2")) { delete obj.property2; } else { //error handling }

JavaScript의 동적 특성으로 인해 속성의 존재 여부를 단순히 알 수 없는 경우가 종종 있습니다. && 앞에 obj가 있는지 확인하면 정의되지 않은 객체에서 hasOwnProperty() 함수를 호출하여 오류가 발생하지 않습니다.

이것이 귀하의 특정 사용 사례에 추가되지 않았다면 죄송하지만 개체 및 해당 속성을 관리할 때 적용하기에 좋은 디자인이라고 생각합니다.



답변자 : talsibony


이 게시물은 매우 오래되었고 매우 유용하다고 생각하여 다른 사람이 이 게시물을 보고 PHP unset 함수에서처럼 간단하지 않은 이유를 생각하는 경우를 대비하여 제가 작성한 unset 함수를 공유하기로 결정했습니다.

unset 함수를 작성하는 이유는 이 hash_map에 있는 다른 모든 변수의 인덱스를 유지하기 위해서입니다. 다음 예제를 보고 hash_map에서 값을 제거한 후 "test2"의 인덱스가 어떻게 변경되지 않았는지 확인하십시오.

 function unset(unsetKey, unsetArr, resort) { var tempArr = unsetArr; var unsetArr = {}; delete tempArr[unsetKey]; if (resort) { j = -1; } for (i in tempArr) { if (typeof(tempArr[i]) !== 'undefined') { if (resort) { j++; } else { j = i; } unsetArr[j] = tempArr[i]; } } return unsetArr; } var unsetArr = ['test', 'deletedString', 'test2']; console.log(unset('1', unsetArr, true)); // output Object {0: "test", 1: "test2"} console.log(unset('1', unsetArr, false)); // output Object {0: "test", 2: "test2"}



답변자 : Amio.io


ramda#dissoc 을 사용하면 regex 속성이 없는 새 객체를 얻을 수 있습니다.

 const newObject = R.dissoc('regex', myObject); // newObject !== myObject

다른 기능을 사용하여 동일한 효과를 얻을 수도 있습니다. 생략, 선택, ...



답변자 : Mohammed Safeer


다음 방법을 시도하십시오. Object 속성 값을 undefined 할당합니다. 그런 다음 객체를 stringify parse 합니다.

 var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; myObject.regex = undefined; myObject = JSON.parse(JSON.stringify(myObject)); console.log(myObject);



답변자 : ayushgp


객체에 깊이 중첩된 속성을 삭제하려면 속성 경로를 두 번째 인수로 사용하여 다음 재귀 함수를 사용할 수 있습니다.

 var deepObjectRemove = function(obj, path_to_key){ if(path_to_key.length === 1){ delete obj[path_to_key[0]]; return true; }else{ if(obj[path_to_key[0]]) return deepObjectRemove(obj[path_to_key[0]], path_to_key.slice(1)); else return false; } };

예시:

 var a = { level1:{ level2:{ level3: { level4: "yolo" } } } }; deepObjectRemove(a, ["level1", "level2", "level3"]); console.log(a); //Prints {level1: {level2: {}}}


답변자 : user8629798


Object.assign() & Object.keys() & Array.map()

 const obj = { "Filters":[ { "FilterType":"between", "Field":"BasicInformationRow.A0", "MaxValue":"2017-10-01", "MinValue":"2017-09-01", "Value":"Filters value" } ] }; let new_obj1 = Object.assign({}, obj.Filters[0]); let new_obj2 = Object.assign({}, obj.Filters[0]); /* // old version let shaped_obj1 = Object.keys(new_obj1).map( (key, index) => { switch (key) { case "MaxValue": delete new_obj1["MaxValue"]; break; case "MinValue": delete new_obj1["MinValue"]; break; } return new_obj1; } )[0]; let shaped_obj2 = Object.keys(new_obj2).map( (key, index) => { if(key === "Value"){ delete new_obj2["Value"]; } return new_obj2; } )[0]; */ // new version! let shaped_obj1 = Object.keys(new_obj1).forEach( (key, index) => { switch (key) { case "MaxValue": delete new_obj1["MaxValue"]; break; case "MinValue": delete new_obj1["MinValue"]; break; default: break; } } ); let shaped_obj2 = Object.keys(new_obj2).forEach( (key, index) => { if(key === "Value"){ delete new_obj2["Value"]; } } );



답변자 : John Doe


항목을 쉽게 제거하는 ES6 방법은 다음과 같습니다.

 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; const removeItem = 'regex'; const { [removeItem]: remove, ...rest } = myObject; console.log(remove); // "^http://.*" console.log(rest); // Object { ircEvent: "PRIVMSG", method: "newURI" }



답변자 : Chong Lip Phang


'삭제'가 매우 느리다는 Dan의 주장 은 그가 게시한 벤치마크가 의심스러웠습니다. 그래서 Chrome 59에서 직접 테스트를 수행했습니다. '삭제'가 약 30배 느린 것 같습니다.

 var iterationsTotal = 10000000; // 10 million var o; var t1 = Date.now(),t2; for (let i=0; i<iterationsTotal; i++) { o = {a:1,b:2,c:3,d:4,e:5}; delete oa; delete ob; delete oc; delete od; delete oe; } console.log ((t2=Date.now())-t1); // 6135 for (let i=0; i<iterationsTotal; i++) { o = {a:1,b:2,c:3,d:4,e:5}; oa = ob = oc = od = oe = undefined; } console.log (Date.now()-t2); // 205

다른 작업으로 인한 영향을 최소화하기 위해 의도적으로 한 루프 주기에서 둘 이상의 '삭제' 작업을 수행했습니다.



답변자 : johndavedecano


로다쉬 사용하기

 import omit from 'lodash/omit'; const prevObject = {test: false, test2: true}; // Removes test2 key from previous object const nextObject = omit(prevObject, 'test2');

람다 사용

 R.omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}


답변자 : james_womack


JavaScript에서 속성 제거

이 페이지에는 다양한 옵션이 있습니다. 대부분의 옵션이 잘못되었거나 답변이 중복되었기 때문이 아니라 적절한 기술이 현재 상황과 작업 목표에 따라 다르기 때문입니다. 팀이 수행하려고 합니다. 질문에 명확하게 대답하려면 다음을 알아야 합니다.

  1. 타겟팅하는 ECMAScript 버전
  2. 속성을 제거하려는 개체 유형의 범위와 생략할 수 있어야 하는 속성 이름의 유형(문자열만? 기호? 임의의 개체에서 매핑된 약한 참조? 이들은 모두 몇 년 동안 JavaScript의 속성 포인터 유형이었습니다. )
  3. 당신과 당신의 팀이 사용하는 프로그래밍 정신/패턴. 기능적 접근 방식을 선호하고 팀에서 돌연변이가 구두로 표현됩니까? 아니면 와일드 웨스트 돌연변이 객체 지향 기술을 사용합니까?
  4. 순수 JavaScript로 이를 달성하려고 합니까, 아니면 타사 라이브러리를 사용할 의향이 있고 사용할 수 있습니까?

이 네 가지 쿼리에 대한 답변이 끝나면 기본적으로 목표를 달성하기 위해 선택할 수 있는 JavaScript의 "속성 제거" 범주가 네 가지 있습니다. 그들은:

돌연변이 개체 속성 삭제, 안전하지 않음

이 범주는 원래 참조를 유지/계속하고 코드에서 상태 비저장 기능 원칙을 사용하지 않을 때 개체 리터럴 또는 개체 인스턴스에서 작동하기 위한 것입니다. 이 범주의 구문 예시:

 'use strict' const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true } delete iLikeMutatingStuffDontI[Symbol.for('amICool')] // true Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false }) delete iLikeMutatingStuffDontI['amICool'] // throws

이 범주는 가장 오래되고 가장 간단하며 가장 널리 지원되는 자산 제거 범주입니다. Symbol 및 배열 인덱스를 지원하며 첫 번째 릴리스를 제외한 모든 JavaScript 버전에서 작동합니다. 그러나 일부 프로그래밍 원칙을 위반하고 성능에 영향을 미치는 것은 돌연변이입니다. 또한 엄격 모드에서 구성할 수 없는 속성에 사용하면 catch되지 않는 예외가 발생할 수 있습니다.

나머지 기반 문자열 속성 생략

이 범주는 변경되지 않는 접근 방식이 필요하고 기호 키를 고려할 필요가 없을 때 새로운 ECMAScript 방식의 일반 객체 또는 배열 인스턴스에서 작동하기 위한 것입니다.

 const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true } const { name, ...coolio } = foo // coolio doesn't have "name" const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

돌연변이 객체 속성 삭제, 안전

이 범주는 구성할 수 없는 속성에서 throw되는 예외를 보호하면서 원래 참조를 유지/계속 사용하려는 경우 개체 리터럴 또는 개체 인스턴스에서 작동하기 위한 것입니다.

 'use strict' const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true } Reflect.deleteProperty(iLikeMutatingStuffDontI, Symbol.for('amICool')) // true Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false }) Reflect.deleteProperty(iLikeMutatingStuffDontI, 'amICool') // false

또한 개체를 제자리에서 변경하는 것은 상태 비저장이 아니지만, Reflect.deleteProperty delete 문으로 불가능한 기타 기능 기술을 수행할 수 있습니다.

구문 기반 문자열 속성 생략

이 범주는 변경되지 않는 접근 방식이 필요하고 기호 키를 고려할 필요가 없을 때 새로운 ECMAScript 방식의 일반 객체 또는 배열 인스턴스에서 작동하기 위한 것입니다.

 const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true } const { name, ...coolio } = foo // coolio doesn't have "name" const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

라이브러리 기반 속성 누락

이 범주는 일반적으로 기호 설명 및 하나의 명령문에서 둘 이상의 속성 생략을 포함하여 더 큰 기능적 유연성을 허용합니다.

 const o = require("lodash.omit") const foo = { [Symbol.for('a')]: 'abc', b: 'b', c: 'c' } const bar = o(foo, 'a') // "'a' undefined" const baz = o(foo, [ Symbol.for('a'), 'b' ]) // Symbol supported, more than one prop at a time, "Symbol.for('a') undefined"


답변자 : hygull


@johnstock , 우리는 또한 JavaScript의 프로토타입 개념을 사용하여 객체에 메서드를 추가하여 호출 객체에서 사용 가능한 전달된 키를 삭제할 수 있습니다.

위의 답변에 감사드립니다.

 var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; // 1st and direct way delete myObject.regex; // delete myObject["regex"] console.log(myObject); // { ircEvent: 'PRIVMSG', method: 'newURI' } // 2 way - by using the concept of JavaScript's prototyping concept Object.prototype.removeFromObjectByKey = function(key) { // If key exists, remove it and return true if (this[key] !== undefined) { delete this[key] return true; } // Else return false return false; } var isRemoved = myObject.removeFromObjectByKey('method') console.log(myObject) // { ircEvent: 'PRIVMSG' } // More examples var obj = { a: 45, b: 56, c: 67 } console.log(obj) // { a: 45, b: 56, c: 67 } // Remove key 'a' from obj isRemoved = obj.removeFromObjectByKey('a') console.log(isRemoved); //true console.log(obj); // { b: 56, c: 67 } // Remove key 'd' from obj which doesn't exist var isRemoved = obj.removeFromObjectByKey('d') console.log(isRemoved); // false console.log(obj); // { b: 56, c: 67 }



답변자 : king neo


아래와 같이 필터를 사용할 수 있습니다.

 var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; // Way 1 let filter1 = {} Object.keys({...myObject}).filter(d => { if(d !== 'regex'){ filter1[d] = myObject[d]; } }) console.log(filter1) // Way 2 let filter2 = Object.fromEntries(Object.entries({...myObject}).filter(d => d[0] !== 'regex' )) console.log(filter2)



답변자 : BEJGAM SHIVA PRASAD


나는 Lodash "unset" 을 사용하여 중첩된 개체에 대해서도 발생하도록 했습니다... 생략 메서드에서 예상되는 속성 키의 경로를 가져오기 위해 작은 논리를 작성하기만 하면 됩니다.

  1. 속성 경로를 배열로 반환하는 메서드

 var a = {"bool":{"must":[{"range":{"price_index.final_price":{"gt":"450", "lt":"500"}}}, {"bool":{"should":[{"term":{"color_value.keyword":"Black"}}]}}]}}; function getPathOfKey(object,key,currentPath, t){ var currentPath = currentPath || []; for(var i in object){ if(i == key){ t = currentPath; } else if(typeof object[i] == "object"){ currentPath.push(i) return getPathOfKey(object[i], key,currentPath) } } t.push(key); return t; } document.getElementById("output").innerHTML =JSON.stringify(getPathOfKey(a,"price_index.final_price"))
 <div id="output"> </div>

  1. 그런 다음 Lodash unset 메서드를 사용하여 객체에서 속성을 제거합니다.

 var unset = require('lodash.unset'); unset(a, getPathOfKey(a, "price_index.final_price"));



답변자 : bluejayke


 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; obj = Object.fromEntries( Object.entries(myObject).filter(function (m){ return m[0] != "regex"/*or whatever key to delete*/ } )) console.log(obj)

Object.entries 사용하여 a2d 배열처럼 처리하고 일반 배열에서와 같이 splice를 사용하여 요소를 제거하거나 배열처럼 객체를 간단히 필터링하고 재구성된 객체를 다시 할당할 수 있습니다. 원래 변수



답변자 : akhtarvahid


원본 개체를 수정하지 않으려면.

개체를 변경하지 않고 속성 제거

변경 가능성이 우려되는 경우 제거하려는 속성을 제외한 모든 속성을 이전 속성에서 복사하여 완전히 새로운 개체를 만들 수 있습니다.

 let myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; let prop = 'regex'; const updatedObject = Object.keys(myObject).reduce((object, key) => { if (key !== prop) { object[key] = myObject[key] } return object }, {}) console.log(updatedObject);



답변자 : Rashid Iqbal


객체를 삭제하는 두 가지 방법

  1. 사용 ...에

     function deleteUser(key) { const newUsers = {}; for (const uid in users) { if (uid !== key) { newUsers[uid] = users[uid]; } return newUsers }

또는

 delete users[key]


출처 : Here


출처 : http:www.stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object">

반응형