TypeScriptで配列項目を削除するにはどうすればよいですか?


406

TypeScriptで作成した配列があり、キーとして使用するプロパティがあります。そのキーを持っている場合、それからアイテムを削除するにはどうすればよいですか?

回答:


640

JavaScriptの場合と同じです。

delete myArray[key];

これにより要素がに設定されることに注意してくださいundefined

Array.prototype.splice関数を使用する方が良い:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}

8
それにタイプを追加できます!var index: number = myArray.indexOf(key, 0);
CorayTany

17
確かにそれは暗黙的として入力されるだろう@CorayThan indexOfリターンnumber
クリス

5
@Chrisこの単純なケースでは明らかですが、すべての変数の型を明示的に定義すると、バグをより迅速に診断するのに役立ちます。index既に複数の場所で使用しており、それらの場所(splice)の1つが番号を表示しようとしている場合、エラーが発生します。現在、コンパイラーはそこでミスを防ぐことができません。
Jochem Kuijpers、

33
@blorkfishオブジェクトのリストがある場合は、を使用できることを言及しておくのは良いことvar index = myArray.findIndex(x => x.prop==key.prop);です。
フランシスコカブラル2017

6
@ Cirelli94-あなたは古いスレッドに応答していますが、あなたの質問に対する答えは、配列要素を削除してもその長さは変更されず、配列のインデックスが再作成されないということです。配列はJavaScriptのオブジェクトであるため、delete myArr[2]文字通りのプロパティ 2を削除しますmyArrこれもとは異なりmyArr[2] = undefinedます。この話の教訓spliceは、副作用を混乱させることなく目的の効果を得るための安全な方法であるため、このタスクに使用することです。
winglerw28

200

配列がオブジェクトのタイプの場合、最も簡単な方法は

let foo_object // Item to remove
this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object);

20
これは、単にフィルタリングするものは何も削除しません。リストを実際に変更する必要がある場合、これは方法ではありません。
user573434

6
@ user573434はい、そうです、名前が示すとおりです。しかし、これはあなたが成功し、削除のAPIコールなどでオブジェクトを削除したい場合は、単純なアプローチがある
マリクShahzad

3
これは、一意のキープロパティを持たないオブジェクトの配列で完全に機能しました。@ user573434 filterメソッドはフィルターされたオブジェクトなしで新しい配列を返すため、結果の配列にはオブジェクトが削除されます。
ジェイソン

6
オブジェクトとして返すには、これを行う必要があると思いますthis.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
Roel

1
これは機能します。2行目を注意深く読んでください。彼はobj!= foo_objectでフィルターをかけます。そして、それを元の変数に割り当てて、元の配列を1からフィルター処理されたfoo_objectを差し引いたものに置き換えます。idのオブジェクトの配列で使用しました deleteById(id: string) { this.data = this.data.filter(d => d.id !== id); }。1ワードの警告、IDが一意でない場合は、同じものをすべて削除しますid
Markus

74

ES6では、次のコードを使用できます。

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}

1
配列リファレンスを変更せずに、特定の平等algorythmを実施する可能性を持つ削除するために最善の解決策
シド

1
ベストアンサーが見つかりました
Gvs Akhil

1
ES6を使用する場合のベストアンサー
Nathan Beck、

2
次も使用できます:this.documents.forEach((item、index、array)=> {if(item === doc)array.splice(index、1);}); これは、特にネストされた配列を操作する場合に、よりクリーンになります。
CGundlach

20

それは私の解決策です:

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}

このソリューションの良い点は、オブジェクトの等価性が2つのオブジェクトを等しいものとして識別できない場合でも機能することです。
ブラッドジョンソン

18

splice配列に対してこのメソッドを使用して、要素を削除できます。

たとえば、名前の配列があるarr場合は、次のように使用します。

arr.splice(2, 1);

したがって、ここではインデックス2の要素が開始点になり、引数2は削除する要素の数を決定します。

という名前の配列の最後の要素を削除したい場合は、arr次のようにします。

arr.splice(arr.length-1, 1);

これにより、最後の要素が削除されたarrが返されます。

例:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]

1
ちなみに、spliceメソッドは配列を変更し(この場合、最後の項目を削除します)、配列自体ではなく、削除された項目を返します。
CGundlach

2
最後の要素を削除するには、実際にはarr.splice(arr.length-1,1)である必要があります。
Steve In CO

15

部門を配列にします。この配列からアイテムを削除したい。

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

8

オブジェクトの配列からプロパティによってオブジェクトを削除するための簡単な1つのライナーを次に示します。

delete this.items[this.items.findIndex(item => item.item_id == item_id)];

または

this.items = this.items.filter(item => item.item_id !== item.item_id);

1
最初のソリューションの問題は、削除によって要素が削除されることですが、配列サイズはdetelする前と同じままです。2番目のソリューションでは、新しいオブジェクトが作成されるため、spme依存関係がある場合、それは失われます。スプライス(上位の回答にあります)にはこの効果はありません。
クリスティアン

ご指摘いただきありがとうございます。私のユースケースでは、まだそれを発見していなかったと思います。よく観察されます:)
ジェイミーアーマー

5

TypeScriptスプレッド演算子を使用して回答(...)

// Your key
const key = 'two';

// Your array
const arr = [
    'one',
    'two',
    'three'
];

// Get either the index or -1
const index = arr.indexOf(key); // returns 0


// Despite a real index, or -1, use spread operator and Array.prototype.slice()    
const newArray = (index > -1) ? [
    ...arr.slice(0, index),
    ...arr.slice(index + 1)
] : arr;

5

Typescriptを使用したもう1つのソリューション:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;

これで問題は解決しますが、新しい配列を作成して元の配列をループするため、実行にコストがかかります。巨大な配列にこの種の操作を行うことは望ましくない副作用等のモバイルバッテリー、長い待ち時間、jank、上難しく、好き作り出すことができる
ジェシー

1

特定のオブジェクトを配列から削除する必要があり、次のことを確認したい場合は、これを使用します。

  • リストは再初期化されません
  • 配列の長さが適切に更新されます
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }

0

配列の拡張メソッドを追加したかっただけです。

interface Array<T> {
      remove(element: T): Array<T>;
    }

    Array.prototype.remove = function (element) {
      const index = this.indexOf(element, 0);
      if (index > -1) {
        return this.splice(index, 1);
      }
      return this;
    };
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.