source

자바스크립트에서 배열에서 특정 항목을 제거하려면 어떻게 해야 합니까?

ittop 2023. 5. 2. 22:58
반응형

자바스크립트에서 배열에서 특정 항목을 제거하려면 어떻게 해야 합니까?

배열에서 특정 값을 제거하려면 어떻게 해야 합니까?다음과 같은 것:

array.remove(value);

제약 조건:나는 코어 자바스크립트를 사용해야 합니다.프레임워크가 허용되지 않습니다.

» index를 사용하여 제거할 배열 요소의 를 선택한 다음 을 사용하여 해당 인덱스를 제거합니다.

splice() 메서드는 기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) { // only splice array when item is found
  array.splice(index, 1); // 2nd parameter means remove one item only
}

// array = [2, 9]
console.log(array); 

두 번 매 변 수 개 째의 두 번째 splice제거할 요소의 수입니다.:splice배열을 수정하고 제거된 요소를 포함하는 새 배열을 반환합니다.


완성도의 이유로, 여기에 함수가 있습니다.는 한 , 첫 번째 인 첫 번 함 수 하 나 발 즉 제 만 합 항 일 니 목 치 거 제 번 거 다 생 째 첫 째 의 는 즉 ▁of ▁the ▁removes 제 ▁match 거 i ▁the ▁only ▁first rence ▁first 목 항 ▁( ▁occur ▁a 첫 첫 니5[2,5,9,1,5,8,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에서 다음 함수는 Type 매개 변수로 Type-safe 상태를 유지할 수 있습니다.

function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

2016년 10월 편집

  • 단순하고 직관적이며 명확하게 수행합니다(Occam의 면도기).
  • 변경할 수 없음(원래 배열은 변경되지 않음)
  • 브라우저가 표준 JavaScript 기능을 지원하지 않는 경우 표준 JavaScript 기능으로 수행 - 폴리필 사용

이 코드 예제에서는 배열에서 원하지 않는 항목을 제거하는 기능을 사용합니다.이 함수는 원래 배열을 변경하지 않고 새 배열을 만듭니다.브라우저가 이 기능을 지원하지 않는 경우(예: 버전 9 이전의 Internet Explorer 또는 버전 1.5 이전의 Firefox) 를 사용하여 폴리필링을 수행하는 것이 좋습니다.

항목 제거 중(ECMA-262 Edition 5 코드 AA 이전 스타일 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 ]

중요 ECM 스크립트 6() => {}화살표 함수 구문은 Internet Explorer, 버전 45 이전의 Chrome, 버전 22 이전의 Firefox, 버전 10 이전의 Safari에서 전혀 지원되지 않습니다.이전 브라우저에서 ECMA스크립트 6 구문을 사용하려면 Babel을 사용합니다.제이에스


여러 항목 제거(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, 버전 47 이전의 Chrome, 버전 43 이전의 Firefox, 버전 9 이전의 Safari 및 버전 14 이전의 Edge에서 전혀 지원되지 않지만 로 폴리필할 수 있습니다.

여러 항목을 제거하는 중(앞으로 가능할 수 있음)

"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 ]

BabelJS에서 직접 해보세요 :)

언급

당신이 어떻게 기대하고 있는지 모르겠습니다.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];

그것은 당신이 빈 자리를 유지하고 싶은지 아닌지에 달려 있습니다.

슬롯을 원하는 경우:

array[index] = undefined;

슬롯을 원하지 않는 경우:

//To keep the original:
//oldArray = [...array];

//This modifies the array.
array.splice(index, 1);

또한 해당 항목의 값이 필요한 경우 반환된 배열의 요소만 저장할 수 있습니다.

var value = array.splice(index, 1)[0];

어이의양끝제에거다면수사있다음습니용할을려하레쪽서다▁if있을 사용하면 .array.pop() 마막으또는로지▁the.array.shift()첫 번째 항목의 경우(둘 다 항목의 값을 반환함).

이 그 항목의 , 은 항의인덱모경수있다사습을 사용할 수 .array.indexOf(item)그것을 얻기 위해 (단순히)if()하나의 아이템을 얻거나 하나의while()모든 것을 얻을 수 있습니다. array.indexOf(item) 또는 인스또를반니합다환는을 합니다.-1발견되지 않으면

한 친구가 Internet Explorer 8에서 문제가 발생하여 자신이 수행한 작업을 보여주었습니다.제가 틀렸다고 했더니 여기서 답을 얻었다고 하더군요.현재 상위 응답은 모든 브라우저(예: Internet Explorer 8)에서 작동하지 않으며 항목의 첫 번째 항목만 제거합니다.

배열에서 모든 인스턴스 제거

function removeAllInstances(arr, item) {
   for (var i = arr.length; i--;) {
     if (arr[i] === item) arr.splice(i, 1);
   }
}

항목이 제거됨에 따라 인덱스와 길이가 변경되므로 배열을 역방향으로 순환하고 항목이 발견되면 해당 항목을 제거합니다.모든 브라우저에서 작동합니다.

두 가지 주요 접근 방식이 있습니다.

  1. 스플라이스():anArray.splice(index, 1);

     let fruits = ['Apple', 'Banana', 'Mango', 'Orange']
     let removed = fruits.splice(2, 1);
     // fruits is ['Apple', 'Banana', 'Orange']
     // removed is ['Mango']
    
  2. 삭제:delete anArray[index];

     let fruits = ['Apple', 'Banana', 'Mango', 'Orange']
     let removed = delete fruits(2);
     // fruits is ['Apple', 'Banana', undefined, 'Orange']
     // removed is true
    

▁you를 사용할 는 주의해야 합니다.delete을 삭제하는 하지 않습니다.개체의 속성을 삭제하는 데는 좋지만 배열에는 적합하지 않습니다.사용하는 것이 더 좋습니다.splice배열용.

사할때는을 할 때 하세요.delete 수 .anArray.length 다른말하면로,하면,delete요소는 제거되지만 길이 속성 값은 업데이트되지 않습니다.

또한 delete를 사용한 후 인덱스 번호에 구멍이 생길 수 있습니다. 예를 들어 인덱스 1, 3, 4, 8, 9 및 11의 길이는 delete를 사용하기 전과 같습니다.이 경우 모든 인덱스가 지정됩니다.for인덱스가 더 이상 순차적이지 않기 때문에 루프가 충돌합니다.

강제로 사용하는 경우delete어떤 이유에서인지 배열을 반복해야 할 때는 루프를 사용해야 합니다.사실 색인화된 사용은 항상 피하십시오.for루프(가능한 경우).그렇게 하면 코드가 더 강력해지고 인덱스에 문제가 발생할 가능성이 줄어듭니다.

Array.prototype.removeByValue = function (val) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === val) {
      this.splice(i, 1);
      i--;
    }
  }
  return this;
}

var fruits = ['apple', 'banana', 'carrot', 'orange'];
fruits.removeByValue('banana');

console.log(fruits);
// -> ['apple', 'carrot', 'orange']

를 사용할 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 of으):

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

만 사용splice (splice):

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

요소가 1000개인 어레이의 Node.js에서의 런타임(평균 10,000개 이상의 런):

의 인덱스는 이동보다 약 10배 느립니다.에 대한 호출을 제거하여 개선하더라도indexOf로 나누면, 움직이는 것보다 훨씬 더 나쁜 성능을 발휘합니다.

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

값 대신 술어를 제공합니다.

참고: 지정된 배열을 업데이트하고 영향을 받는 행을 반환합니다.

사용.

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;
 },
};

다음과 같은 필터 방법을 사용하여 쉽게 수행할 수 있습니다.

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.

필터를 사용하는 것은 이 요구 사항을 달성하는 우아한 방법입니다. filter원래 배열을 변경하지 않습니다.

const num = 3;
let arr = [1, 2, 3, 4];
const arr2 = arr.filter(x => x !== num);
console.log(arr); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 4]

사용할 수 있습니다.filter변환 제거 동작을 수행하려면 결과를 원래 배열에 할당합니다.

const num = 3;
let arr = [1, 2, 3, 4];
arr = arr.filter(x => x !== num);
console.log(arr); // [1, 2, 4]

그렇고, 그저나나.filter볼수처럼 (첫 번째합니다.

const num = 3;
let arr = [1, 2, 3, 3, 3, 4];
arr = arr.filter(x => x !== num);
console.log(arr); // [1, 2, 4]

첫 번째 항목을 제거하려는 경우 스플라이스 방법을 사용할 수 있습니다.

const num = 3;
let arr = [1, 2, 3, 3, 3, 4];
const idx = arr.indexOf(num);
arr.splice(idx, idx !== -1 ? 1 : 0);
console.log(arr); // [1, 2, 3, 3, 4]

John Reig는 좋은 구현을 게시했습니다.

// 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의 원래 구현에는 이 문제가 없다는 것을 확인했습니다.

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"]

언더스코어.js는 여러 브라우저의 문제를 해결하는 데 사용할 수 있습니다.있는 경우 빌드 내 브라우저 메서드를 사용합니다.이전 Internet Explorer 버전의 경우와 같이 해당 버전이 없는 경우 자체 사용자 지정 방법을 사용합니다.

배열에서 요소를 제거하는 간단한 예(웹 사이트에서):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

삭제된 위치가 제거된 새 배열을 원하는 경우 언제든지 특정 요소를 삭제하고 배열을 필터링할 수 있습니다.필터 방법을 구현하지 않는 브라우저의 경우 어레이 개체를 확장해야 할 수도 있지만, 장기적으로는 다음과 같은 작업만 수행하기 때문에 더 쉽습니다.

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].

다음은 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()수신된 인덱스를 사용하여 새 배열을 만듭니다.처음부터 제거할 인덱스까지 새 배열을 만들고, 제거한 배열에 이어 첫 번째 위치에서 배열 끝까지 다른 배열을 연결합니다.

값을 알고 있는 경우

경우에 한 은 이우경한가좋옵같다다습니음과션은은지다같▁is▁in▁one니습을 사용하는 것을 사용하는 입니다.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/) 에 게시되었습니다.

이 코드를 확인하십시오.모든 주요 브라우저에서 작동합니다.

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)

배열에서 특정 요소/문자열을 제거하는 작업은 한 줄로 수행할 수 있습니다.

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

위치:

배열: 특정 항목을 제거할 배열

stringToRemoveFromArray: 제거할 문자열이며 1은 제거할 요소 수입니다.

참고: "stringToRemoveFromArray"가 배열에 없으면 배열의 마지막 요소가 제거됩니다.

요소를 제거하기 전에 먼저 요소가 배열에 있는지 확인하는 것이 좋습니다.

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

클라이언트의 컴퓨터에서 실행 중인 Emcascript의 최신 버전 또는 이전 버전이 있는지 여부에 따라 다음을 수행합니다.

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');

OR

var array = ['1','2','3','4','5','6'];
var newArray = array.filter(function(item){ return item !== '3' });

여기서 '3'은 배열에서 제거할 값입니다. 배열이 다음과 같이 .['1','2','4','5','6']

ES10

이 게시물에는 ECMA스크립트 2019(ES10) 기준 어레이에서 요소를 제거하는 일반적인 접근 방식이 요약되어 있습니다.

일반적인 경우

1.1을 사용하여 합니다..splice()

내부:예 |
중복 제거: 예(루프), 아니요(indexOf) |
값별 / 색인별 | 색인 기준

배열에서 제거할 값을 알고 있는 경우 스플라이스 방법을 사용할 수 있습니다.먼저 대상 항목의 인덱스를 식별해야 합니다.그런 다음 인덱스를 시작 요소로 사용하고 요소 하나만 제거합니다.

// 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. Array 를 요소 .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 요소 거Array.prototype

내부:예/아니오(구현에 따라 다름) |
중복 제거:예/아니오(구현에 따라 다름) |
값별 / 인덱스별 : 인덱스별 / 값별 (구현에 따라 다름) |

어레이의 프로토타입은 추가 방법으로 확장할 수 있습니다.그런 다음 이러한 메소드를 생성된 어레이에서 사용할 수 있습니다.

참고: 일부에서는 표준 자바스크립트 라이브러리(어레이 등)에서 객체의 프로토타입을 확장하는 것을 반패턴으로 간주합니다.

// 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를 . Array를 사용합니다.delete입니다.

내부:예 |
중복 제거:아니요 |
값별 / 색인별 | 색인 기준

삭제 연산자를 사용해도 길이 속성에는 영향을 주지 않습니다.후속 요소의 인덱스에도 영향을 미치지 않습니다.배열이 희소해집니다. 이는 삭제된 항목이 제거되지 않고 정의되지 않은 항목이라는 의미입니다.

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를 사용하여 하기. Array를 사용합니다.Object는 다음과 같습니다(>= ES10).

내부:아니요 |
중복 제거:예 |
기준 / 인덱스: 값 기준 |

ES10 »Object.fromEntries이를 사용하여 모든 배열 유사 개체에서 원하는 배열을 만들고 프로세스 중에 원하지 않는 요소를 필터링할 수 있습니다.

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.1 배열 끝에 있는 경우 요소 제거

Array 2.1.1 변경하기length

내부:예 |
중복 제거:아니요 |
값별 / 색인: 해당 없음 |

길이 속성을 현재 값보다 작은 값으로 설정하여 배열 끝에서 JavaScript Array 요소를 제거할 수 있습니다.인덱스가 새 길이보다 크거나 같은 모든 요소가 제거됩니다.

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()방법

내부:예 |
중복 제거:아니요 |
값별 / 색인: 해당 없음 |

pop 메서드는 배열의 마지막 요소를 제거하고 해당 요소를 반환한 다음 길이 속성을 업데이트합니다.pop 메서드는 호출되는 배열을 수정합니다. 즉, delete를 사용하는 것과 달리 마지막 요소가 완전히 제거되고 배열 길이가 줄어듭니다.

const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
console.log( arr ); // [1, 2, 3, 4, 5]

2.2. 배열의 시작 부분에 있는 경우 요소 제거

내부:예 |
중복 제거:아니요 |
값별 / 색인: 해당 없음 |

.shift()method 첫을 제외하면 와 매우 합니다.요소가 제거되면 나머지 요소가 아래로 이동됩니다.

const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
console.log( arr ); // [2, 3, 4]

2.3. 배열에서 유일한 요소인 경우 요소 제거

내부:예 |
중복 제거: 해당 없음 |
값별 / 색인: 해당 없음 |

가장 빠른 방법은 배열 변수를 빈 배열로 설정하는 것입니다.

let arr = [1];
arr = []; //empty array

길이를 0으로 설정하여 2.1.1의 다른 기법을 사용할 수 있습니다.

lodash _.pull(변종 배열), _.pullAt(변종 배열) 또는 _.not(변종 배열 안 함)을 사용할 수 있습니다.

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']

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)

성능

오늘(2019-12-09) 선택한 솔루션에 대해 macOS v10.13.6(High Sierra)에 대한 성능 테스트를 수행합니다.나는 보여줍니다delete하지만 배열에 빈 공간이 남아 있기 때문에 다른 메소드와 비교하여 사용하지 않습니다.

결론은

  • 은 가장빠해은책입니다.array.splice는 두
  • 대규모 어레이의 경우array.slice+splice 및입니다.Array.fromChrome Chrome에서
  • 가변 솔루션은 일반적으로 불변 솔루션보다 1.5배~6배 빠름
  • Safari의 작은 테이블의 경우, 놀랍게도 가변 솔루션(C)이 불변 솔루션(G)보다 느립니다.

세부 사항

테스트에서는 여러 가지 방법으로 배열에서 중간 요소를 제거합니다.A, C 솔루션이 준비되어 있습니다.B, D, E, F, G, H 솔루션은 불변입니다.

요소가 10개인 배열에 대한 결과

여기에 이미지 설명 입력

에서 크롬서는에array.splice가장 빠른 인플레이스 솔루션입니다.array.filter가장 빠른 불변 솔루션입니다. 것은 가장느것은입니다.array.slice여기서 기계에서 테스트를 수행할 수 있습니다.

요소 수가 1.000.000인 배열에 대한 결과

여기에 이미지 설명 입력

에서 크롬서는에array.splice입니다.delete유사한 속도이지만 어레이에 빈 슬롯을 남겼습니다(따라서 '전체 제거'를 수행하지 않음).array.slice-splice가장 빠른 불변 솔루션입니다. 것은 가장느것은입니다.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

여기에 이미지 설명 입력

를 들어 다음과 같은 배열이 있습니다.

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];

우리는 그것들을 모두 확인하기 위해 루프가 필요하지만, 더 쉽고 효율적인 방법은 내장된 자바스크립트 함수를 사용하는 것이므로, 우리는 아래와 같은 필터를 대신 사용하는 함수를 작성합니다.

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을 참조하십시오.

저는 자바스크립트에 익숙하지 않아서 이 기능이 필요했습니다.나는 단지 이것을 썼습니다:

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"]

당신은 저와 필요한 것이 다를 수 있으니 그에 맞게 쉽게 수정할 수 있습니다.이것이 누군가에게 도움이 되길 바랍니다.

ECMA스크립트 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]

힌트: 빈 배열을 얻지 못하면 필터 콜백에 화살표 함수를 사용하십시오.

업데이트: 이 방법은 ECMA스크립트 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]

이것은 기능적 프로그래밍 패턴에 반하는 것이므로 배열을 변형해서는 안 됩니다.6 method ECMA를 하지 않고 새 할 수 .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 설명서를 참조하십시오.

어레이에 복잡한 개체가 있는 경우 필터를 사용할 수 있습니까?$.inArray 또는 array.splice를 사용하기가 쉽지 않은 경우.특히 물체가 배열에서 얕을 수 있는 경우에는 더욱 그렇습니다.

예를 들어, ID 필드가 있는 개체가 있고 배열에서 개체를 제거하려는 경우:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});

보다 현대적인 ECMA스크립트 2015(이전 명칭: Harmony 또는 ES 6) 접근 방식입니다.주어진:

const items = [1, 2, 3, 4];
const index = 2;

그러면:

items.filter((x, i) => i !== index);

산출:

[1, 2, 4]

Babel 및 Polyfill 서비스를 사용하여 브라우저 간에 이 기능이 잘 지원되도록 할 수 있습니다.

요소의 인스턴스가 여러 개인 경우 인덱스가 손상되지 않도록 역방향 루프를 수행할 수 있습니다.

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);

언급URL : https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array-in-javascript

반응형