JavaScript 객체에서 속성을 어떻게 제거합니까? “ircEvent”: “PRIVMSG”,

다음과 같이 객체를 생성한다고 가정 해보십시오.

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

다음과 같이 regex새 속성 으로 끝나는 속성 을 제거하는 가장 좋은 방법은 무엇입니까 myObject?

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

답변

이처럼 :

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, 자신의 블로그에 문을 삭제 이해 . 적극 권장합니다.

답변

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 디스크립터가 구성 가능으로 표시 한 특성에서만 작동합니다.

답변

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

delete myObject.regex;

console.log ( myObject.regex); // logs: undefined

스 니펫 확장

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

답변

delete연산자 오브젝트에서 속성을 제거하기 위해 사용된다.

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

배열의 경우 이것은 element를 제거하는 것과 다릅니다 . 어레이에서 사용하는 요소를 제거 Array#splice하거나 Array#pop. 예를 들면 다음과 같습니다.

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

세부

deleteJavaScript에서는 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, map그리고 reduce단순히 누락 된 인덱스를 건너 뜁니다.

따라서 delete연산자를 배열에서 요소를 제거하는 일반적인 사용 사례에 사용해서는 안됩니다. 배열 요소를 제거하고 메모리를 재 할당하기위한 전용의 방법이있다 : Array#splice()및 Array#pop.

배열 #splice (start [, deleteCount [, item1 [, item2 [, …]]]])

Array#splice배열을 변경하고 제거 된 인덱스를 반환합니다. deleteCount요소는 index start에서 제거되고 index 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.

배열 # 슬라이스 ([begin [, end]])

Array#slice는 비파괴 적이며 표시된 인덱스를 포함하는 새 배열을 startto 에서 반환합니다 end. 경우 endIS는 배열의 마지막에 지정, 기본값을 떠났다. 경우 end긍정적, 그것은 제로로부터 지정 비 포함 에서 중지하는 인덱스를. 경우 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배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다. 이 작업은 배열의 길이를 변경합니다.

답변

오래된 질문, 현대적인 답변. 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);

답변

확산 구문 (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는 값 a이 1 인 새 변수입니다 .

확장 된 답변 ?
객체에서 속성을 제거하는 일반적인 방법은 거의 없습니다.
각각에는 자체 장단점 이 있습니다 ( 이 성능 비교를 확인하십시오 ).

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

delete obj[key];

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

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

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

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

답변

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

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

참조 : link _.pick (object, * keys)

허용 된 키 (또는 유효한 키 배열)의 값만 갖도록 필터링 된 객체의 복사본을 반환합니다.

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

_.pick(myJSONObject, "ircEvent", "method");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

참조 : link _.omit (object, * keys)

차단 된 키 (또는 키 배열)를 생략하도록 필터링 된 객체의 복사본을 반환합니다.

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

_.omit(myJSONObject, "regex");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

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