숫자 배열이 있고 .push() 메서드를 사용하여 요소를 추가하고 있습니다.
배열에서 특정 요소를 제거하는 간단한 방법이 있습니까?
나는 다음과 같은 것을 찾고 있습니다.
array.remove(number);핵심 JavaScript를 사용해야 합니다. 프레임워크는 허용되지 않습니다.
반응형
질문자 :Walker
답변자 : Community Wiki
indexOf 사용하여 제거하려는 배열 요소의 index splice 해당 인덱스를 제거합니다.
splice() 메서드는 기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
const array = [2, 5, 9]; console.log(array); const index = array.indexOf(5); if (index > -1) { array.splice(index, 1); } // array = [2, 9] console.log(array); splice 의 두 번째 매개변수는 제거할 요소의 수입니다. splice 는 배열을 제자리에서 수정하고 제거된 요소를 포함하는 새 배열을 반환합니다.
완성도를 위해 다음과 같은 기능이 있습니다. 첫 번째 함수는 한 번만 제거하는 [2,5,9,1,5,8,5] 에서 5 일치 제거), 두 번째 함수는 모든 항목을 제거합니다.
function removeItemOnce(arr, value) { var index = arr.indexOf(value); if (index > -1) { arr.splice(index, 1); } return arr; } function removeItemAll(arr, value) { var i = 0; while (i < arr.length) { if (arr[i] === value) { arr.splice(i, 1); } else { ++i; } } return arr; } // Usage console.log(removeItemOnce([2,5,9,1,5,8,5], 5)) console.log(removeItemAll([2,5,9,1,5,8,5], 5))TypeScript에서 다음 함수는 유형 매개변수를 사용하여 유형을 안전하게 유지할 수 있습니다.
function removeItem<T>(arr: Array<T>, value: T): Array<T> { const index = arr.indexOf(value); if (index > -1) { arr.splice(index, 1); } return arr; }답변자 : ujeenator
2016년 10월에 수정됨
- 간단하고 직관적이며 명시적( Occam's razor )
- 변경할 수 없도록 설정(원래 배열은 변경되지 않음)
- 브라우저가 지원하지 않는 경우 표준 JavaScript 기능으로 수행하십시오 - polyfill 사용
이 코드 예제에서는 "array.filter(...)" 함수를 사용하여 배열에서 원하지 않는 항목을 제거합니다. 이 함수는 원래 배열을 변경하지 않고 새 배열을 만듭니다. 브라우저가 이 기능을 지원하지 않는 경우(예: Internet Explorer 버전 9 이전 또는 Firefox 버전 1.5 이전) Mozilla의 필터 폴리필 사용을 고려하십시오.
항목 제거(ECMA-262 Edition 5 코드 일명 oldstyle JavaScript)
var value = 3 var arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(function(item) { return item !== value }) console.log(arr) // [ 1, 2, 4, 5 ]항목 제거(ECMAScript 6 코드)
let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ]중요 ECMAScript 6 "() => {}" 화살표 함수 구문은 Internet Explorer, Chrome 45 이전 버전, Firefox 22 이전 버전 및 Safari 10 버전에서 전혀 지원되지 않습니다. 이전 브라우저에서 ECMAScript 6 구문을 사용하려면 BabelJS 를 사용할 수 있습니다.
여러 항목 제거(ECMAScript 7 코드)
이 방법의 또 다른 장점은 여러 항목을 제거할 수 있다는 것입니다.
let forDeletion = [2, 3, 5] let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => !forDeletion.includes(item)) // !!! Read below about array.includes(...) support !!! console.log(arr) // [ 1, 4 ]중요 "array.includes(...)" 함수는 Internet Explorer, Chrome 47 이전 버전, Firefox 43 이전 버전, Safari 9 이전 버전, Edge 14 이전 버전에서는 전혀 지원되지 않으므로 여기 Mozilla의 polyfill이 있습니다 .
여러 항목 제거(향후 가능)
"This-Binding Syntax" 제안이 수락되면 다음을 수행할 수 있습니다.
// array-lib.js export function remove(...forDeletion) { return this.filter(item => !forDeletion.includes(item)) } // main.js import { remove } from './array-lib.js' let arr = [1, 2, 3, 4, 5, 3] // :: This-Binding Syntax Proposal // using "remove" function as "virtual method" // without extending Array.prototype arr = arr::remove(2, 3, 5) console.log(arr) // [ 1, 4 ]참조
답변자 : Peter Olson
array.remove(int) 가 어떻게 작동할 것으로 예상하는지 모르겠습니다. 내가 생각할 수 있는 세 가지 가능성이 있습니다. 당신이 원할 수도 있습니다.
i 에서 배열의 요소를 제거하려면 다음을 수행하십시오.
array.splice(i, 1); 배열에서 number 가 있는 모든 요소를 제거하려면 다음을 수행하십시오.
for (var i = array.length - 1; i >= 0; i--) { if (array[i] === number) { array.splice(i, 1); } } i 있는 요소를 더 이상 존재하지 않게 만들고 싶지만 다른 요소의 인덱스가 변경되는 것을 원하지 않는 경우:
delete array[i];답변자 : xavierm02
빈 자리를 유지할지 여부에 따라 다릅니다.
당신이 경우에 빈 슬롯을 원하는 :
array[index] = undefined;빈 슬롯을 원하지 않는 경우:
//To keep the original: //oldArray = [...array]; //This modifies the array. array.splice(index, 1);그리고 해당 항목의 값이 필요한 경우 반환된 배열의 요소를 저장할 수 있습니다.
var value = array.splice(index, 1)[0]; 당신이 배열의 양쪽 끝에서 제거하려는 경우, 당신은 사용할 수 있습니다 array.pop() 마지막 하나를 위해 array.shift() 처음에 (둘뿐만 아니라 항목의 값을 반환).
항목의 인덱스를 모르는 경우 array.indexOf(item) 을 사용하여 가져올 수 있습니다( if() 에서 하나의 항목을 가져오거나 while() 에서 모든 항목을 가져옴). array.indexOf(item) 은 인덱스를 반환하거나 찾지 못하면 -1
답변자 : Ben Lesh
친구가 Internet Explorer 8 에서 문제를 겪고 있었고 그가 한 일을 나에게 보여주었습니다. 나는 그것이 틀렸다고 말했고 그는 여기서 답을 얻었다고 말했다. 현재 상위 답변은 모든 브라우저(예: Internet Explorer 8)에서 작동하지 않으며 항목의 첫 번째 항목만 제거합니다.
배열에서 모든 인스턴스 제거
function removeAllInstances(arr, item) { for (var i = arr.length; i--;) { if (arr[i] === item) arr.splice(i, 1); } }배열을 거꾸로 반복하고(항목이 제거되면 인덱스와 길이가 변경되므로) 항목을 찾으면 제거합니다. 모든 브라우저에서 작동합니다.
답변자 : Saša
두 가지 주요 접근 방식이 있습니다.
splice() :
anArray.splice(index, 1);삭제 :
delete anArray[index];
배열에 delete 를 사용할 때 주의하십시오. 객체의 속성을 삭제하는 데는 좋지만 배열에는 좋지 않습니다. 배열 splice 를 사용하는 것이 좋습니다.
delete 를 사용 anArray.length 대해 잘못된 결과를 얻을 수 있음을 명심하십시오. 즉, delete 는 요소를 제거하지만 길이 속성 값은 업데이트하지 않습니다.
또한 삭제를 사용한 후 인덱스 번호에 구멍이 있을 것으로 예상할 수 있습니다. 예를 들어 인덱스 1, 3, 4, 8, 9, 11과 삭제를 사용하기 전과 같은 길이를 가질 수 있습니다. 이 경우 인덱스가 더 이상 순차적이지 않기 때문에 모든 인덱싱된 for
delete 를 사용해야 하는 경우 배열을 반복해야 할 때 for each 사실, 가능하면 항상 인덱싱된 for 루프를 사용하지 마십시오. 그렇게 하면 코드가 더 강력해지고 인덱스 문제가 덜 발생합니다.
답변자 : Zirak
Array.prototype.remove_by_value = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] === val) { this.splice(i, 1); i--; } } return this; }[ // call like (1, 2, 3, 4) ].remove_by_value(3); Array.prototype.remove_by_value = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] === val) { this.splice(i, 1); i--; } } return this; } var rooms = ['hello', 'something'] rooms = rooms.remove_by_value('hello') console.log(rooms)답변자 : slosd
indexOf 또는 splice 를 사용할 필요가 없습니다. 그러나 한 요소만 제거하려는 경우 더 나은 성능을 보입니다.
찾기 및 이동(이동):
function move(arr, val) { var j = 0; for (var i = 0, l = arr.length; i < l; i++) { if (arr[i] !== val) { arr[j++] = arr[i]; } } arr.length = j; } indexOf 및 splice (indexof) 사용:
function indexof(arr, val) { var i; while ((i = arr.indexOf(val)) != -1) { arr.splice(i, 1); } } splice (스플라이스)만 사용:
function splice(arr, val) { for (var i = arr.length; i--;) { if (arr[i] === val) { arr.splice(i, 1); } } }1000개 요소가 있는 배열에 대한 nodejs의 런타임(평균 10000번 이상 실행):
indexof 는 move 보다 약 10배 느립니다. splice indexOf 에 대한 호출을 제거하여 개선하더라도 move 보다 성능이 훨씬 떨어집니다.
Remove all occurrences: move 0.0048 ms indexof 0.0463 ms splice 0.0359 ms Remove first occurrence: move_one 0.0041 ms indexof_one 0.0021 ms답변자 : amd
이것은 값 대신 술어를 제공합니다.
참고: 지정된 배열을 업데이트하고 영향을 받는 행을 반환합니다.
용법
var removed = helper.remove(arr, row => row.id === 5 ); var removed = helper.removeAll(arr, row => row.name.startsWith('BMW'));정의
var helper = { // Remove and return the first occurrence remove: function(array, predicate) { for (var i = 0; i < array.length; i++) { if (predicate(array[i])) { return array.splice(i, 1); } } }, // Remove and return all occurrences removeAll: function(array, predicate) { var removed = []; for (var i = 0; i < array.length; ) { if (predicate(array[i])) { removed.push(array.splice(i, 1)); continue; } i++; } return removed; }, };답변자 : Salvador Dali
필터 방법으로 쉽게 할 수 있습니다.
function remove(arrOriginal, elementToRemove){ return arrOriginal.filter(function(el){return el !== elementToRemove}); } console.log(remove([1, 2, 1, 0, 3, 1, 4], 1)); 이렇게 하면 배열에서 모든 요소가 제거되고 slice 와 indexOf 의 조합보다 더 빠르게 작동합니다.
답변자 : Roger
John Resig 는 좋은 구현을 게시했습니다 .
// Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); };전역 개체를 확장하지 않으려면 대신 다음과 같이 할 수 있습니다.
// Array Remove - By John Resig (MIT Licensed) Array.remove = function(array, from, to) { var rest = array.slice((to || from) + 1 || array.length); array.length = from < 0 ? array.length + from : from; return array.push.apply(array, rest); };그러나 내가 이것을 게시하는 주된 이유는 해당 페이지의 주석(2007년 12월 14일)에 제안된 대체 구현에 대해 사용자에게 경고하기 위함입니다.
Array.prototype.remove = function(from, to){ this.splice(from, (to=[0,from||1,++to-from][arguments.length])<0?this.length+to:to); return this.length; };처음에는 잘 작동하는 것처럼 보이지만 고통스러운 과정을 통해 배열에서 마지막에서 두 번째 요소를 제거하려고 할 때 실패한다는 것을 발견했습니다. 예를 들어, 10개의 요소로 구성된 배열이 있고 다음과 같이 9번째 요소를 제거하려고 하는 경우:
myArray.remove(8);당신은 8-요소 배열로 끝납니다. 이유는 모르겠지만 John의 원래 구현에는 이 문제가 없음을 확인했습니다.
답변자 : rajat44
ES6를 사용할 수 있습니다. 예를 들어 이 경우 값 '3'을 삭제하려면 다음을 수행합니다.
var array=['1','2','3','4','5','6'] var newArray = array.filter((value)=>value!='3'); console.log(newArray);출력:
["1", "2", "4", "5", "6"]답변자 : vatsal
Underscore.js 는 여러 브라우저의 문제를 해결하는 데 사용할 수 있습니다. 존재하는 경우 빌드 내 브라우저 방법을 사용합니다. 이전 Internet Explorer 버전의 경우와 같이 없는 경우 자체 사용자 지정 방법을 사용합니다.
(웹사이트에서) 배열에서 요소를 제거하는 간단한 예:
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]답변자 : Loupax
삭제된 위치가 제거된 새 배열을 원하는 경우 언제든지 특정 요소를 삭제하고 배열을 필터링할 수 있습니다. 필터 메서드를 구현하지 않는 브라우저를 위해 배열 객체 의 확장이 필요할 수 있지만 장기적으로는 다음과 같이 하면 되므로 더 쉽습니다.
var my_array = [1, 2, 3, 4, 5, 6]; delete my_array[4]; console.log(my_array.filter(function(a){return typeof a !== 'undefined';})); [1, 2, 3, 4, 6] 이 표시되어야 합니다.
답변자 : Flavio Copes
다음은 JavaScript를 사용하여 배열에서 항목 을 제거하는 몇 가지 방법입니다.
설명된 모든 방법 은 원래 배열을 변경하지 않고 대신 새 배열을 만듭니다.
아이템의 인덱스를 알고 있다면
i 위치에 있는 항목을 제거하려고 한다고 가정합니다.
slice() 를 사용하는 것입니다.
const items = ['a', 'b', 'c', 'd', 'e', 'f'] const i = 3 const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length)) console.log(filteredItems) slice() 는 수신한 인덱스로 새 배열을 만듭니다. 처음부터 제거하려는 인덱스까지 새 배열을 만들고 제거한 첫 번째 위치에서 배열의 끝까지 다른 배열을 연결하기만 하면 됩니다.
값을 안다면
이 경우 한 가지 좋은 옵션은 보다 선언 적인 접근 방식을 제공하는 filter()
const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valueToRemove = 'c' const filteredItems = items.filter(item => item !== valueToRemove) console.log(filteredItems)이것은 ES6 화살표 기능을 사용합니다. 기존 기능을 사용하여 이전 브라우저를 지원할 수 있습니다.
const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valueToRemove = 'c' const filteredItems = items.filter(function(item) { return item !== valueToRemove }) console.log(filteredItems)또는 Babel을 사용하고 ES6 코드를 다시 ES5로 변환하여 이전 브라우저에서 더 쉽게 이해할 수 있도록 하면서도 코드에 최신 JavaScript를 작성할 수 있습니다.
여러 항목 제거
단일 항목 대신 여러 항목을 제거하려면 어떻게 해야 합니까?
가장 간단한 해결책을 찾아보자.
인덱스별
함수를 만들고 연속적으로 항목을 제거할 수 있습니다.
const items = ['a', 'b', 'c', 'd', 'e', 'f'] const removeItem = (items, i) => items.slice(0, i-1).concat(items.slice(i, items.length)) let filteredItems = removeItem(items, 3) filteredItems = removeItem(filteredItems, 5) //["a", "b", "c", "d"] console.log(filteredItems)가치별
콜백 함수 내부에 포함을 검색할 수 있습니다.
const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valuesToRemove = ['c', 'd'] const filteredItems = items.filter(item => !valuesToRemove.includes(item)) // ["a", "b", "e", "f"] console.log(filteredItems)원래 배열을 변경하지 마십시오.
splice() slice() 와 혼동하지 말 것)는 원래 배열을 변경하므로 피해야 합니다.
(원래 내 사이트 https://flaviocopes.com/how-to-remove-item-from-array/ 에 게시됨)
답변자 : Ekramul Hoque
이 코드를 확인하십시오. 모든 주요 브라우저 에서 작동합니다.
remove_item = function(arr, value) { var b = ''; for (b in arr) { if (arr[b] === value) { arr.splice(b, 1); break; } } return arr; }; var array = [1,3,5,6,5,9,5,3,55] var res = remove_item(array,5); console.log(res)답변자 : Chun Yang
lodash _.pull (배열 변경), _.pullAt (배열 변경) 또는 _.without (배열을 변경하지 않음)을 사용할 수 있습니다.
var array1 = ['a', 'b', 'c', 'd'] _.pull(array1, 'c') console.log(array1) // ['a', 'b', 'd'] var array2 = ['e', 'f', 'g', 'h'] _.pullAt(array2, 0) console.log(array2) // ['f', 'g', 'h'] var array3 = ['i', 'j', 'k', 'l'] var newArray = _.without(array3, 'i') // ['j', 'k', 'l'] console.log(array3) // ['i', 'j', 'k', 'l']답변자 : Abdennour TOUMI
ES6 및 돌연변이 없음: (2016년 10월)
const removeByIndex = (list, index) => [ ...list.slice(0, index), ...list.slice(index + 1) ]; output = removeByIndex([33,22,11,44],1) //=> [33,11,44] console.log(output)답변자 : Max Alexander Hanna
배열에서 특정 요소/문자열을 제거하는 것은 한 줄로 수행할 수 있습니다.
theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);어디:
Array : 특정 항목을 제거하려는 배열
stringToRemoveFromArray : 제거하려는 문자열이고 1은 제거하려는 요소의 수입니다.
참고 : "stringToRemoveFromArray"가 배열에 없으면 배열의 마지막 요소가 제거됩니다.
요소를 제거하기 전에 먼저 배열에 요소가 있는지 확인하는 것이 항상 좋은 습관입니다.
if (theArray.indexOf("stringToRemoveFromArray") >= 0){ theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1); }클라이언트의 컴퓨터에서 Ecmascript의 최신 또는 이전 버전이 실행 중인지 여부에 따라:
var array=['1','2','3','4','5','6'] var newArray = array.filter((value)=>value!='3');또는
var array = ['1','2','3','4','5','6']; var newArray = array.filter(function(item){ return item !== '3' }); 여기서 '3'은 배열에서 제거하려는 값입니다. 그러면 배열은 ['1','2','4','5','6']
답변자 : Kamil Kiełczewski
성능
오늘(2019-12-09) 선택한 솔루션에 대해 macOS v10.13.6(High Sierra)에서 성능 테스트를 수행합니다. delete (A)를 보여주지만 배열에 빈 공간을 남기기 때문에 다른 방법과 비교하여 사용하지 않습니다.
결론
- 가장 빠른 솔루션은
array.splice(C)입니다(두 번째 시간이 있는 작은 어레이의 경우 Safari 제외). - 큰 배열의 경우
array.slice+splice(H)는 Firefox 및 Safari에서 가장 빠른 변경 불가능한 솔루션입니다.Array.from(B)는 Chrome에서 가장 빠릅니다. - 변경 가능한 솔루션은 일반적으로 변경 불가능한 솔루션보다 1.5배~6배 빠릅니다.
- Safari의 작은 테이블의 경우 놀랍게도 변경 가능한 솔루션(C)이 변경 불가능한 솔루션(G)보다 느립니다.
세부
테스트에서는 다양한 방법으로 배열에서 중간 요소를 제거합니다. A, C 솔루션이 제자리에 있습니다. B, D, E, F, G, H 솔루션은 변경할 수 없습니다.
10개 요소가 있는 배열에 대한 결과
Chrome에서 array.splice (C)는 가장 빠른 제자리 솔루션입니다. array.filter (D)는 가장 빠른 변경 불가능한 솔루션입니다. 가장 느린 것은 array.slice (F)입니다. 여기 에서 컴퓨터에서 테스트를 수행할 수 있습니다.
1.000.000개의 요소가 있는 배열에 대한 결과
Chrome에서 array.splice (C)는 가장 빠른 제자리 솔루션입니다( delete (C)는 비슷하지만 배열에 빈 슬롯을 남겼습니다(그래서 '전체 제거'를 수행하지 않음). array.slice-splice (H)는 가장 빠른 변경 불가능한 솔루션입니다. 가장 느린 것은 array.filter (D 및 E)입니다. 여기 에서 컴퓨터에서 테스트를 수행할 수 있습니다.
var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var log = (letter,array) => console.log(letter, array.join `,`); function A(array) { var index = array.indexOf(5); delete array[index]; log('A', array); } function B(array) { var index = array.indexOf(5); var arr = Array.from(array); arr.splice(index, 1) log('B', arr); } function C(array) { var index = array.indexOf(5); array.splice(index, 1); log('C', array); } function D(array) { var arr = array.filter(item => item !== 5) log('D', arr); } function E(array) { var index = array.indexOf(5); var arr = array.filter((item, i) => i !== index) log('E', arr); } function F(array) { var index = array.indexOf(5); var arr = array.slice(0, index).concat(array.slice(index + 1)) log('F', arr); } function G(array) { var index = array.indexOf(5); var arr = [...array.slice(0, index), ...array.slice(index + 1)] log('G', arr); } function H(array) { var index = array.indexOf(5); var arr = array.slice(0); arr.splice(index, 1); log('H', arr); } A([...a]); B([...a]); C([...a]); D([...a]); E([...a]); F([...a]); G([...a]); H([...a]); This snippet only presents code used in performance tests - it does not perform tests itself.브라우저 비교: Chrome v78.0.0, Safari v13.0.4, Firefox v71.0.0
답변자 : Alireza
OK, 예를 들어, 당신은 배열 아래에 있습니다 :
var num = [1, 2, 3, 4, 5];그리고 우리는 숫자 4를 삭제하고 싶습니다. 당신은 단순히 아래 코드를 사용할 수 있습니다:
num.splice(num.indexOf(4), 1); // num will be [1, 2, 3, 5];이 함수를 재사용하는 경우 아래와 같이 기본 배열 함수에 첨부될 재사용 가능한 함수를 작성합니다.
Array.prototype.remove = Array.prototype.remove || function(x) { const i = this.indexOf(x); if(i===-1) return; this.splice(i, 1); // num.remove(5) === [1, 2, 3]; }그러나 배열에 몇 개의 [5]가 있는 대신 아래 배열이 있다면 어떨까요?
var num = [5, 6, 5, 4, 5, 1, 5];모두 확인하려면 루프가 필요하지만 더 쉽고 효율적인 방법은 내장 JavaScript 함수를 사용하는 것이므로 대신 아래와 같은 필터를 사용하는 함수를 작성합니다.
const _removeValue = (arr, x) => arr.filter(n => n!==x); //_removeValue([1, 2, 3, 4, 5, 5, 6, 5], 5) // Return [1, 2, 3, 4, 6]또한 Lodash 또는 Underscore와 같이 이를 수행하는 데 도움이 되는 타사 라이브러리가 있습니다. 자세한 내용은 lodash _.pull, _.pullAt 또는 _.without을 참조하세요.
답변자 : sofiax
저는 JavaScript를 처음 접했고 이 기능이 필요했습니다. 나는 단지 이것을 썼다:
function removeFromArray(array, item, index) { while((index = array.indexOf(item)) > -1) { array.splice(index, 1); } }그런 다음 사용하고 싶을 때:
//Set-up some dummy data var dummyObj = {name:"meow"}; var dummyArray = [dummyObj, "item1", "item1", "item2"]; //Remove the dummy data removeFromArray(dummyArray, dummyObj); removeFromArray(dummyArray, "item2");출력 - 예상대로. ["항목1", "항목1"]
저와 다른 요구 사항이 있을 수 있으므로 그에 맞게 쉽게 수정할 수 있습니다. 이것이 누군가를 돕기를 바랍니다.
답변자 : flurdy
배열에 복잡한 객체가 있는 경우 필터를 사용할 수 있습니까? $.inArray 또는 array.splice가 사용하기 쉽지 않은 상황에서. 특히 객체가 배열에서 얕은 경우.
예를 들어 Id 필드가 있는 개체가 있고 배열에서 개체를 제거하려는 경우:
this.array = this.array.filter(function(element, i) { return element.id !== idToRemove; });답변자 : M. Twarog
ES10 업데이트
이 게시물은 ECMAScript 2019(ES10)부터 배열에서 요소를 제거하는 일반적인 접근 방식을 요약합니다.
1. 일반적인 경우
1.1. .splice() 사용하여 값으로 배열 요소 제거
| 제자리 : 예 |
| 중복 제거 : Yes(loop), No(indexOf) |
| 값/인덱스 기준 : 인덱스 기준 |
배열에서 제거하려는 값을 알고 있다면 splice 방법을 사용할 수 있습니다. 먼저 대상 항목의 인덱스를 식별해야 합니다. 그런 다음 인덱스를 시작 요소로 사용하고 하나의 요소만 제거합니다.
// With a 'for' loop const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; for( let i = 0; i < arr.length; i++){ if ( arr[i] === 5) { arr.splice(i, 1); } } // => [1, 2, 3, 4, 6, 7, 8, 9, 0] // With the .indexOf() method const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; const i = arr.indexOf(5); arr.splice(i, 1); // => [1, 2, 3, 4, 6, 7, 8, 9, 0] 1.2. .filter() 메서드를 사용하여 배열 요소 제거
| 제자리 : 아니요 |
| 중복 제거 : 예 |
| 값/인덱스 기준 : 값 기준 |
필터링 기능을 제공하여 특정 요소를 배열에서 필터링할 수 있습니다. 그런 다음 배열의 모든 요소에 대해 이러한 함수가 호출됩니다.
const value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ] 1.3. Array.prototype 을 확장하여 Array 요소 제거
| In-place : 예/아니오(구현에 따라 다름) |
| 중복 제거 : 예/아니오(구현에 따라 다름) |
| 값별 / 인덱스 : 인덱스별 / 값별 (구현에 따라 다름) |
Array의 프로토타입은 추가 메서드로 확장할 수 있습니다. 그런 다음 생성된 배열에서 이러한 메서드를 사용할 수 있습니다.
참고: JavaScript의 표준 라이브러리(예: Array)에서 객체의 프로토타입을 확장하는 것은 일부 사람들에게 안티패턴으로 간주됩니다.
// In-place, removes all, by value implementation Array.prototype.remove = function(item) { for (let i = 0; i < this.length; i++) { if (this[i] === item) { this.splice(i, 1); } } } const arr1 = [1,2,3,1]; arr1.remove(1) // arr1 equals [2,3] // Non-stationary, removes first, by value implementation Array.prototype.remove = function(item) { const arr = this.slice(); for (let i = 0; i < this.length; i++) { if (arr[i] === item) { arr.splice(i, 1); return arr; } } return arr; } let arr2 = [1,2,3,1]; arr2 = arr2.remove(1) // arr2 equals [2,3,1] 1.4. delete 연산자를 사용하여 배열 요소 제거
| 제자리 : 예 |
| 중복 제거 : 아니오 |
| 값/인덱스 기준 : 인덱스 기준 |
delete 연산자를 사용해도 length 속성에는 영향을 주지 않습니다. 또한 후속 요소의 인덱스에도 영향을 미치지 않습니다. 배열이 희박해집니다. 삭제된 항목이 제거되지 않고 정의되지 않은 상태가 된다는 멋진 표현입니다.
const arr = [1, 2, 3, 4, 5, 6]; delete arr[4]; // Delete element with index 4 console.log( arr ); // [1, 2, 3, 4, undefined, 6]삭제 연산자는 배열이 객체인 JavaScript 객체에서 속성을 제거하도록 설계되었습니다.
1.5. Object 유틸리티를 사용하여 배열 요소 제거(>= ES10)
| 제자리 : 아니요 |
| 중복 제거 : 예 |
| 값/인덱스 기준 : 값 기준 |
ES10은 Object.fromEntries 도입했습니다. 이 기능은 모든 Array와 유사한 객체에서 원하는 Array를 만들고 프로세스 중에 원하지 않는 요소를 필터링하는 데 사용할 수 있습니다.
const object = [1,2,3,4]; const valueToRemove = 3; const arr = Object.values(Object.fromEntries( Object.entries(object) .filter(([ key, val ]) => val !== valueToRemove) )); console.log(arr); // [1,2,4]2. 특별한 경우
2.1 배열 끝에 있는 요소 제거
2.1.1. 배열length | 제자리 : 예 |
| 중복 제거 : 아니오 |
| 값/인덱스 기준 : N/A |
JavaScript 배열 요소는 length 속성을 현재 값보다 작은 값으로 설정하여 배열 끝에서 제거할 수 있습니다. 인덱스가 새 길이보다 크거나 같은 요소는 제거됩니다.
const arr = [1, 2, 3, 4, 5, 6]; arr.length = 5; // Set length to remove element console.log( arr ); // [1, 2, 3, 4, 5] 2.1.2. .pop() 메서드 사용 | 제자리 : 예 |
| 중복 제거 : 아니오 |
| 값/인덱스 기준 : N/A |
pop 메서드는 배열의 마지막 요소를 제거하고 해당 요소를 반환하고 length 속성을 업데이트합니다. pop 메소드는 호출된 배열을 수정합니다. 이것은 delete를 사용하는 것과 달리 마지막 요소가 완전히 제거되고 배열 길이가 감소됨을 의미합니다.
const arr = [1, 2, 3, 4, 5, 6]; arr.pop(); // returns 6 console.log( arr ); // [1, 2, 3, 4, 5]2.2. 배열의 시작 부분에 있는 경우 요소 제거
| 제자리 : 예 |
| 중복 제거 : 아니오 |
| 값/인덱스 기준 : N/A |
.shift() 메서드는 JavaScript 배열의 마지막 요소 대신 첫 번째 요소를 제거한다는 점을 제외하고는 pop 메서드와 매우 유사하게 작동합니다. 요소가 제거되면 나머지 요소가 아래로 이동합니다.
const arr = [1, 2, 3, 4]; arr.shift(); // returns 1 console.log( arr ); // [2, 3, 4]2.3. 배열의 유일한 요소인 경우 요소 제거
| 제자리 : 예 |
| 중복 제거 : N/A |
| 값/인덱스 기준 : N/A |
가장 빠른 기술은 배열 변수를 빈 배열로 설정하는 것입니다.
let arr = [1]; arr = []; //empty array또는 길이를 0으로 설정하여 2.1.1의 기술을 사용할 수 있습니다.
답변자 : zykadelic
업데이트: 이 방법은 ECMAScript 2015(이전의 ES6)를 사용할 수 없는 경우에만 권장됩니다. 사용할 수 있다면 여기의 다른 답변이 훨씬 더 깔끔한 구현을 제공합니다.
이 요지 는 문제를 해결하고 1(또는 지정된 값) 대신 모든 인수를 삭제합니다.
Array.prototype.destroy = function(obj){ // Return null if no objects were found and removed var destroyed = null; for(var i = 0; i < this.length; i++){ // Use while-loop to find adjacent equal objects while(this[i] === obj){ // Remove this[i] and store it within destroyed destroyed = this.splice(i, 1)[0]; } } return destroyed; }용법:
var x = [1, 2, 3, 3, true, false, undefined, false]; x.destroy(3); // => 3 x.destroy(false); // => false x; // => [1, 2, true, undefined] x.destroy(true); // => true x.destroy(undefined); // => undefined x; // => [1, 2] x.destroy(3); // => null x; // => [1, 2]답변자 : AmerllicA
ECMAScript 6 을 기반으로 답변하고 싶습니다. 아래와 같은 배열이 있다고 가정합니다.
let arr = [1,2,3,4]; 2 와 같은 특수 인덱스에서 삭제하려면 아래 코드를 작성하세요.
arr.splice(2, 1); //=> arr became [1,2,4] 3 과 같은 특수 항목을 삭제하고 색인을 모르는 경우 다음과 같이 하십시오.
arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]힌트 : 빈 배열을 얻지 않는 한 필터 콜백에 화살표 함수를 사용하십시오.
답변자 : Adeel Imran
배열을 변경해서는 안 됩니다. 이것은 함수형 프로그래밍 패턴에 위배되기 때문입니다. filter 를 사용하여 데이터를 변경하려는 배열을 참조하지 않고 새 배열을 만들 수 있습니다.
var myArray = [1, 2, 3, 4, 5, 6]; 5 를 제거하려는 경우 다음과 같이 간단하게 수행할 수 있습니다.
myArray = myArray.filter(value => value !== 5);이렇게 하면 제거하려는 값이 없는 새 배열이 제공됩니다. 결과는 다음과 같습니다.
[1, 2, 3, 4, 6]; // 5 has been removed from this array더 깊은 이해를 위해 Array.filter 에 대한 MDN 문서를 읽을 수 있습니다.
답변자 : Jeff Noel
요소의 인스턴스가 여러 개 있는 경우 역방향 루프를 수행하여 인덱스를 망치지 않도록 할 수 있습니다.
var myElement = "chocolate"; var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate']; /* Important code */ for (var i = myArray.length - 1; i >= 0; i--) { if (myArray[i] == myElement) myArray.splice(i, 1); } console.log(myArray);답변자 : bjfletcher
보다 현대적인 ECMAScript 2015 (이전에는 Harmony 또는 ES 6으로 알려짐) 접근 방식입니다. 주어진:
const items = [1, 2, 3, 4]; const index = 2;그 다음에:
items.filter((x, i) => i !== index);굽힐 수 있는:
[1, 2, 4]Babel 과 polyfill 서비스 를 사용하여 브라우저에서 잘 지원되도록 할 수 있습니다.
답변자 : Thilina Sampath
배열에 1에서 9가 있고 5를 제거하고 싶습니다. 아래 코드를 사용하십시오.
var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var newNumberArray = numberArray.filter(m => { return m !== 5; }); console.log("new Array, 5 removed", newNumberArray);여러 값을 원하는 경우. 예:- 1,7,8
var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var newNumberArray = numberArray.filter(m => { return (m !== 1) && (m !== 7) && (m !== 8); }); console.log("new Array, 1,7 and 8 removed", newNumberArray);배열에서 배열 값을 제거하려는 경우. 예: [3,4,5]
var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var removebleArray = [3,4,5]; var newNumberArray = numberArray.filter(m => { return !removebleArray.includes(m); }); console.log("new Array, [3,4,5] removed", newNumberArray);지원되는 브라우저는 링크를 포함합니다.
출처 : Here
출처 : http:www.stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array">
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| var functionName = function() {} 대 함수 functionName() {} (0) | 2021.09.22 |
|---|---|
| Git: "git pull"이 로컬 파일을 덮어쓰도록 하려면 어떻게 해야 하나요? (0) | 2021.09.22 |
| JavaScript에서 객체를 딥 클론하는 가장 효율적인 방법은 무엇입니까? (0) | 2021.09.22 |
| JavaScript에서 문자열에 하위 문자열이 포함되어 있는지 확인하는 방법은 무엇입니까? (0) | 2021.09.22 |
| 파일이 예외 없이 존재하는지 어떻게 확인합니까? (0) | 2021.09.22 |