JavaScript: 객체에서 주어진 키에 해당하는 키-값 쌍을 제거하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript: 객체에서 주어진 키에 해당하는 키-값 쌍을 제거하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-08-22 15:53:12

앞으로

3243명이 탐색했습니다.

JavaScript: 객체에서 주어진 키에 해당하는 키-값 쌍을 제거하는 방법은 무엇입니까?

JavaScript에서는 키-값 쌍 형식으로 데이터를 저장하기 위한 개체를 만들 수 있습니다. 객체의 데이터는 점 표기법(obj.key) 또는 대괄호 표기법(obj["key"])을 사용하여 액세스할 수 있습니다. 아래 예시를 참고하세요 −

let obj = { key1: "value1", key2: "value2", key3: "value" };

로그인 후 복사

주어진 키에 해당하는 키-값 쌍을 객체에서 삭제할 수 있지만, 삭제하기 전에 해당 키가 객체에 존재하는지 확인해야 합니다. 이번 튜토리얼에서는 3가지 방법을 소개하겠습니다.

삭제 연산자 사용

삭제 연산자는 객체의 속성을 삭제하는 데 사용됩니다. 삭제 연산자는 변수 자체를 삭제하지 않고 해당 값만 삭제합니다.

예

아래 예를 참고해주세요 -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let obj = { key1: "value1", key2: "value2", key3: "value3" };
      delete obj.key2;
      document.getElementById("result").innerHTML = JSON.stringify(obj);
      console.log(obj)
   </script>
</body>
</html>

로그인 후 복사

위 예에서 볼 수 있듯이 삭제 연산자는 값만 삭제합니다

키 자체가 아니라 키입니다.

아래는 위 코드에 대한 한 줄씩 설명입니다 −

키가 아니라 키 자체입니다.

다음은 위 코드를 한줄씩 설명한 것입니다. −

let obj = { key1: "value1", key2: "value2", key3: "value3" };

로그인 후 복사

3개의 키-값 쌍을 포함하는 객체를 생성했습니다.

delete obj.key2;

로그인 후 복사

delete 연산자는 키가 "key2"인 키-값 쌍을 삭제하는 데 사용됩니다.

console.log(obj);

로그인 후 복사

위 코드의 콘솔 출력은 다음과 같습니다: { key1: "value1", key3: "value3" } 키가 "key2"인 키-값 쌍이 객체에서 제거된 것을 볼 수 있습니다.

filter() 메서드 사용

filter() 메서드는 기존 배열에서 새 배열을 만드는 데 사용됩니다. 아래 예를 참조하세요.

Example




   Examples


   
   <script>
      let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; };
      let newObj = Object.keys(obj)
      .filter(key => key != "key2")
      .reduce((acc, key) => {
         acc[key] = obj[key];
         return acc;
      }, {});
      document.getElementById("result").innerHTML =
      JSON.stringify(newObj);
      console.log(newObj)
   </script>

로그인 후 복사

위 예에서 볼 수 있듯이 filter() 메서드는 키 자체가 아니라 키입니다.

다음은 위 코드에 대한 한 줄씩 설명입니다.

열쇠는 열쇠 그 자체이다.

다음은 위 코드에 대한 한 줄씩 설명입니다:

let obj = { key1: "value1", key2: "value2", key3: "value3" };

로그인 후 복사

3개의 키-값 쌍을 포함하는 객체를 생성했습니다.

let newObj = Object.keys(obj)
.filter(key => key != "key2")
.reduce((acc, key) => {
   acc[key] = obj[key];
   return acc;
}, {});

로그인 후 복사

Object.keys() 메서드는 객체 키를 포함하는 배열을 만드는 데 사용됩니다. filter() 메서드는 기존 배열에서 새 배열을 만드는 데 사용됩니다. 핵심은 "key2"와 비교해보세요. 같지 않으면 키-값 쌍을 새 배열에 추가합니다. Reduce() 메소드는 배열을 객체로 축소하는 데 사용됩니다.

console.log(newObj);

로그인 후 복사

위 코드의 출력은

{ key1: "value1", key3: "value3" }

입니다. 보시다시피, 키가 "key2"인 삭제된 키-값 쌍이 객체에서 삭제되었습니다.

for…in 루프 사용

for…inloop는 객체의 속성을 반복하는 데 사용됩니다.

예제

다음 예를 참고하세요 −




   Examples


   
   <script>
      let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; };
      for (let key in obj) {
         if (key == "key2") {
            delete obj[key];
         }
      }
      document.getElementById("result").innerHTML =
      JSON.stringify(obj);
      console.log(obj)
   </script>

로그인 후 복사

위 예에서 볼 수 있듯이 for…in 루프는 키의 값만 삭제합니다. 키 자체는 아닙니다.

위 코드에 대한 아래 줄별 설명은 다음과 같습니다.

열쇠 자체는 아닙니다.

다음은 위 코드를 한 줄씩 설명합니다.

let obj = {key1: "value1", key2: "value2", key3: "value3"};

로그인 후 복사

3개의 키-값 쌍을 포함하는 객체를 생성했습니다.

for (let key in obj) {
   if (key == "key2") {
      delete obj[key];
   }
}

로그인 후 복사

객체의 속성을 반복하려면 for…in 루프를 사용하세요. key 변수는 객체의 키를 저장하는 데 사용됩니다. 키가 "key2"인 경우 개체에서 키-값 쌍을 제거합니다.

console.log(obj);

로그인 후 복사

위 코드의 출력은

{ key1: "value1", key3: "value3" }

입니다. 보시다시피, 키 이름이 "key2"인 삭제된 키-값 쌍이 객체에서 삭제되었습니다.

결론

이 튜토리얼에서는 키-값 쌍에 해당하는 키-값 쌍을 삭제하는 3가지 방법을 소개했습니다. 객체의 키가 주어졌습니다. 삭제 연산자, for...in 루프 및 filter() 메서드.

위 내용은 JavaScript: 객체에서 주어진 키에 해당하는 키-값 쌍을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

JavaScript: 객체에서 주어진 키에 해당하는 키-값 쌍을 제거하는 방법은 무엇입니까?

삭제 연산자 사용

예

filter() 메서드 사용

Example

for…in 루프 사용

예제

결론