web-dev-qa-db-ja.com

JSの不変の配列から要素を削除する最もクリーンな方法は何ですか？

Reactコンポーネントの状態である配列から要素を削除する必要があります。つまり、不変オブジェクトです。

要素の追加は、spread構文を使用すると簡単です。

    return {
        ...state,
        locations: [...state.locations, {}]
    };

削除はもう少しトリッキーです。中間オブジェクトを使用する必要があります。

        var l = [...state.locations]
        l.splice(index, 1)
        return {
            ...state,
            locations: l
        }

それはコードをより汚くして理解しにくくします。

そこから要素を削除する新しい配列を作成する方が簡単または難しいことはありますか？

javascriptarraysreactjsimmutabilityspread-syntax
13
Daniel Santos

スプレッドと Array＃slice の組み合わせを使用できます。

const arr = ['a', 'b', 'c', 'd', 'e'];

const indexToRemove = 2; // the 'c'

const result = [...arr.slice(0, indexToRemove), ...arr.slice(indexToRemove + 1)];

console.log(result);

別のオプションは、Array＃filterです。

const arr = ['a', 'b', 'c', 'd', 'e'];

const indexToRemove = 2; // the 'c'

const result = arr.filter((_, i) => i !== indexToRemove);

console.log(result);
22
Ori Drori