자바스크립트에서 배열 요소를 삭제하는 방법

JavaScript는 웹 페이지에 대화형 및 동적 콘텐츠를 추가하는 데 사용되는 고급 프로그래밍 언어입니다. 그중에서도 데이터 유형을 조작하는 능력은 JavaScript가 인기 있고 중요한 이유 중 하나입니다. 데이터를 처리할 때 컬렉션의 요소를 추가하고 읽고 삭제해야 하는 경우가 많습니다. 예를 들어, 사용자가 페이지의 그림 위로 마우스를 이동하면 사진 컬렉션(예: 배열)에서 그림을 동적으로 삭제하여 마우스가 위로 이동할 때 사용자가 더 이상 그림을 볼 수 없도록 해야 할 수 있습니다. 컬렉션을 다시 제거했습니다. 이러한 요구에 맞춰 JavaScript는 요소를 삭제하는 여러 가지 방법을 제공하며, 이에 대해서는 다음에 하나씩 소개하겠습니다.

1. splice() 메서드를 사용하세요

splice() 메서드는 원래 배열을 수정할 수 있는 메서드로, 배열에 요소를 삽입하거나 삭제하고 삭제된 요소의 배열 값을 반환할 수 있습니다. 이 메소드는 두 개 이상의 매개변수를 허용합니다. 첫 번째 매개변수는 삭제 또는 삽입할 시작 요소의 위치를 ​​지정하고 두 번째 매개변수는 삭제 또는 삽입할 요소 수를 지정합니다. 하나의 요소만 삭제하려면 하나의 매개변수만 전달하면 됩니다.

let myArray = ["apple", "banana", "orange", "pear"];
myArray.splice(2, 1); // 第一个参数是要删除元素的位置，第二个参数是要删除的元素数量。
console.log(myArray); // ["apple", "banana", "pear"]

이 코드에서는 네 개의 과일 이름을 포함하는 myArray 배열을 정의합니다. 그런 다음 splice() 메서드를 사용하고 두 번째 매개변수 1을 전달합니다. 이는 하나의 요소만 삭제합니다. 첫 번째 매개변수는 2입니다. 이는 삭제 작업이 세 번째 요소부터 시작됨을 의미합니다. 즉, 배열에서 "orange"를 삭제합니다. . 최종 출력에는 삭제 작업이 성공했으며 myArray에는 "apple", "banana" 및 "pear"라는 세 가지 요소만 포함되어 있음이 표시됩니다.

2. 삭제 키워드 사용

delete 키워드를 사용하여 요소를 삭제할 수도 있지만 이는 개체 속성에서만 작동하고 배열의 요소에서는 작동하지 않습니다. delete 키워드를 사용하여 배열 요소를 삭제하면 단순히 요소의 값이 정의되지 않음으로 설정됩니다. 원래 배열의 길이는 변경되지 않습니다. 따라서 실제로 배열에서 요소를 제거하려면 splice() 메서드를 다시 호출해야 합니다.

let myArray = ["apple", "banana", "orange", "pear"];
delete myArray[2];
console.log(myArray); // ["apple", "banana", undefined, "pear"]

이 코드에서는 delete 키워드를 사용하여 myArray 배열의 세 번째 요소인 "orange"를 삭제합니다. 그러나 이 배열은 [ "사과", "바나나", 정의되지 않음, "배" ]가 되며 삭제된 요소의 위치는 정의되지 않습니다. 이는 유효하지 않은 요소일 뿐만 아니라 배열을 반복할 때 문제를 일으키기 때문에 삭제하지 않는 것보다 훨씬 더 나쁩니다. 따라서 배열에서 요소를 제거하기 위해 delete를 사용하지 않는 것이 좋습니다.

3. filter() 메소드 사용

JavaScript의 배열 메소드 filter()는 배열의 요소를 필터링하고 특정 조건과 일치하는 요소의 모든 인스턴스를 반환하는 데 사용할 수 있습니다. filter() 메서드는 원래 배열을 수정하지 않으므로 splice() 메서드에 비해 filer() 메서드를 사용하여 요소를 삭제할 때 수정하고 싶지 않은 일부 요소를 수정하는 문제가 발생하지 않습니다.

let myArray = ["apple", "banana", "orange", "pear"];
myArray = myArray.filter(function (item) {
  return item !== "orange"; // 返回所有不是“orange”元素的数组实例
});
console.log(myArray); // ["apple", "banana", "pear"]

이 코드에서는 네 개의 과일 이름을 포함하는 myArray 배열을 정의합니다. 그런 다음 filter() 메서드를 사용하여 항목 삭제 조건을 지정하는 익명 함수를 전달합니다. 이 익명 함수는 "주황색" 요소가 아닌 모든 인스턴스를 포함하는 새 배열을 반환합니다. 이 방법은 하나의 요소를 삭제할 수 있을 뿐만 아니라 여러 요소를 삭제할 수도 있습니다. 마지막으로 더 이상 "주황색" 요소를 포함하지 않는 업데이트된 myArray가 있습니다.

4. pop() 또는 Shift() 메서드 사용

pop() 또는 Shift() 메서드는 배열의 요소를 삭제하는 데 사용됩니다. pop() 메서드는 배열의 마지막 요소를 삭제하고, Shift() 메서드는 배열의 첫 번째 요소를 삭제합니다. 컬렉션에서 제거할 요소의 위치를 ​​알고 있으면 이를 사용하여 특정 요소를 제거할 수 있습니다. 그러나 이는 배열의 요소를 직접 삭제하는 것이 아니라 대상 요소를 포함하는 새 배열을 삭제하는 것뿐입니다. 원래 배열을 수정해야 하는 경우 splice()를 호출하여 교체할 수 있습니다.

let myArray = ["apple", "banana", "orange", "pear"];
myArray.pop(); // 删除 myArray 中的最后一个元素
console.log(myArray); // ["apple", "banana", "orange"]
myArray.shift(); // 删除 myArray 中的第一个元素
console.log(myArray); // ["banana", "orange"]

이 코드에서는 네 개의 과일 이름을 포함하는 myArray 배열을 정의합니다. 그런 다음 pop() 및 Shift() 메서드를 각각 사용하여 배열의 마지막 요소와 첫 번째 요소를 제거합니다. 이러한 메서드를 호출하면 원래 배열이 수정되고 제거된 요소에 액세스할 수 없습니다. 따라서 어레이를 수정해야 하는 경우 먼저 복사본을 생성해야 합니다.

요약하자면, JavaScript의 배열에서 요소를 삭제하는 방법에는 여러 가지가 있으며 각 방법에는 고유한 장점과 단점이 있습니다. splice()는 가장 일반적으로 사용되는 메소드 중 하나이며 원래 배열을 직접 수정하고 삭제된 요소 값을 반환할 수 있습니다. 그러나 배열을 수정하고 싶지 않다면 filter()를 사용할 수 있지만 이 메서드는 원래 배열을 직접 수정할 수 없습니다. 구체적인 삭제 방법 선택은 특정 비즈니스 요구에 따라 결정되어야 합니다.

위 내용은 자바스크립트에서 배열 요소를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!