配列から特定のアイテムを削除するにはどうすればよいですか?

2011年04月24日に質問されました。  ·  閲覧回数 7.4M回  ·  ソース

Walker picture
2011年04月24日

数値の配列があり、 .push()メソッドを使用して要素を追加しています。

配列から特定の要素を削除する簡単な方法はありますか?

私は次のようなものに相当するものを探しています:

array.remove(number);

コアJavaScriptを使用する必要があります。 フレームワークは許可されていません。

回答

Tom Wadley picture
2011年04月24日
12777

検索indexあなたが使用して削除したい配列要素のindexOf 、その後でそのインデックス削除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の2番目のパラメーターは、削除する要素の数です。 spliceはその場で配列を変更し、削除された要素を含む新しい配列を返すことに注意してください。


完全を期すために、ここに関数があります。 最初の機能は、単一の発生(すなわち、最初の一致除去削除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))
Peter Olson picture
2011年04月24日
1392

array.remove(int)がどのように動作することを期待しているのかわかりません。 あなたが望むかもしれないと私が考えることができる3つの可能性があります。

インデックス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];
ujeenator picture
2013年12月20日
1384

2016年10月に編集

  • シンプルで直感的かつ明示的に行う(オッカムの剃刀
  • 不変ですか(元の配列は変更されません)
  • お使いのブラウザがそれらをサポートしていない場合は、標準のJavaScript関数でそれを行います-polyfillを使用します

このコード例では、 「array.filter(...)」関数を使用して、配列から不要なアイテムを削除します。 この関数は元の配列を変更せず、新しい配列を作成します。 お使いのブラウザがこの機能をサポートしていない場合(たとえば、バージョン9より前のInternet Explorer、またはバージョン1.5より前のFirefox)、 Mozillaのフィルタポリフィルの使用を検討し

アイテムの削除(ECMA-262 Edition 5コード別名オールドスタイル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 ]

重要ECMAScript6 "()=> {}"矢印関数の構文は、Internet Explorer、45バージョンより前のChrome、22バージョンより前のFirefox、および10バージョンより前のSafariではまったくサポートされていません。 古いブラウザでECMAScript6構文を使用するには、 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、47バージョンより前のChrome、43バージョンより前のFirefox、9バージョンより前のSafari、および14バージョンより前のEdgeではまったくサポートされていないため、Mozillaのポリフィルを次に示します。

複数のアイテムを削除する(将来的には)

「This-BindingSyntax」の提案が受け入れられた場合は、次のことが可能になります。

// 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で自分で試してみてください:)

参照

xavierm02 picture
2011年04月24日
501

空いた場所を残したいかどうかによります。

空のスロット必要な場合:

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()最後の1またはarray.shift()最初のもののために(両方のリターンだけでなく、項目の値を)。

アイテムのインデックスがわからない場合は、 array.indexOf(item)を使用してアイテムを取得できます( if() 1つのアイテムを取得するか、 while()すべてを取得します)それら)。 array.indexOf(item)は、インデックスを返すか、見つからない場合は-1返します。

Ben Lesh picture
2013年08月11日
296

友人がInternetExplorer 8で問題を抱えていて、彼が何をしたかを見せてくれました。 私は彼にそれが間違っていると言いました、そして彼は彼がここで答えを得たと私に言いました。 現在のトップアンサーはすべてのブラウザー(たとえばInternet Explorer 8)で機能するわけではなく、アイテムの最初の出現のみを削除します。

アレイからすべてのインスタンスを削除します

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

配列を逆方向にループし(アイテムが削除されるとインデックスと長さが変更されるため)、アイテムが見つかった場合は削除します。 すべてのブラウザで動作します。

Sasa picture
2012年12月21日
192

2つの主要なアプローチがあります。

  1. splice()anArray.splice(index, 1);

  2. 削除delete anArray[index];

配列にdeleteを使用する場合は注意してください。 オブジェクトの属性を削除するのには適していますが、配列にはあまり適していません。 配列にはspliceを使用することをお勧めします。

あなたが使用している場合ことに注意してくださいdelete配列するために、あなたが間違った結果を得る可能性がanArray.length 。 つまり、 deleteは要素を削除しますが、lengthプロパティの値は更新しません。

また、deleteを使用した後、インデックス番号に穴ができることも予想されます。たとえば、deleteを使用する前と同じように、インデックス1、3、4、8、9、および11と長さが発生する可能性があります。 その場合、インデックスはシーケンシャルではなくなるため、インデックス付きのすべてのforループがクラッシュします。

何らかの理由でdeleteを使用せざるを得ない場合は、配列をループする必要があるときにfor eachループを使用する必要があります。 実際のところ、可能であれば、インデックス付きのforループの使用は常に避けてください。 そうすれば、コードはより堅牢になり、インデックスに関する問題が発生しにくくなります。

Zirak picture
2011年04月24日
165
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 picture
2013年09月19日
119

indexOfまたはspliceを使用する必要はありません。 ただし、要素の1つのオカレンスのみを削除する場合は、パフォーマンスが向上します。

検索して移動(移動):

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

indexOfsplice (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回の実行の平均):

indexofmoveよりも約10倍遅いです。 スプライス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 picture
2014年05月02日
88

これにより、値の代わりに述語が提供されます。

注:指定された配列を更新し、影響を受けた行を返します。

##使用法

var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));

##定義

var helper = {
 // Remove and return the first occurrence

 removeOne: 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

 remove: 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 picture
2014年02月11日
82

フィルタメソッドを使用すると、簡単に実行できます。

function remove(arrOriginal, elementToRemove){
    return arrOriginal.filter(function(el){return el !== elementToRemove});
}
console.log(remove([1, 2, 1, 0, 3, 1, 4], 1));

これにより、配列からすべての要素が削除され、 sliceindexOf組み合わせよりも高速に動作します。