不変のjsでマップ内の配列要素を削除するには？

Question

私は不変で新しく、マップの中にある配列要素を削除する方法はかなり混乱しています。私はfromJsを使用したくありません。 Stack Overflowには多くのリソースがありますが、私にとってはうまくいきません。私はIDを削除したい

const test = Map({ 
    arr: [{ 
    id: 1 
    }, { 
    id: 2 
    }, { 
    id: 3 
    }] 
}); 


console.log(test.get('arr')) 

arr:[{id:1},{id:2},{id:3}] 

前：3

arr:[{id:1},{id:2}] 

Answer 1

ここでの基本的な問題は、あなたが地図を作成するときに、それだけ浅くにおけるオブジェクトキーを変換していることですキーをマップするオブジェクトを深く変換しません。これは問題ありませんが、このケースを正しく処理する必要があります。この状況を初めて処理する場合は、少し混乱する可能性があります。

まず、あなたがこの...

const test = Map({ 
    arr: [{ 
    id: 1 
    }, { 
    id: 2 
    }, { 
    id: 3 
    }] 
}) 

はこのことを理解すべきである...

arrに格納された値が配列していない不変のリストと値である

Map { 
    arr: [ 
    { id: 1 }, 
    { id: 2 }, 
    { id: 3 } 
    ] 
} 

その配列に格納されているオブジェクトはマップではありません。

変更可能な値を変更するには、マップを更新してアレイを同時に変更する必要があります。不変のマップに格納されている変更可能な値を変更しないように、これを不変的に行いたいことに注意してください。これを行う不変の方法は、次のようになります。

あなたはid: 3を持つオブジェクトが配置されている場所のインデックスを知っているならば、あなたは、インデックスがわからない場合、あなたは、配列をフィルタリングすることができ、インデックス...

const i = 2 
test = test // remember that any change to an immutable object creates a new object, so assignment is required 
    .update('arr', (arr) => {  
    return arr.slice(0, i).concat(arr.slice(i + 1)) 
    }) 

ことをスライスすることができます。 ..

test = test // remember that any change to an immutable object creates a new object, so assignment is required 
    .update('arr', (arr) => {  
    return arr.filter((obj) => obj.id !== 3) 
    }) 

この経験は、私が混在ネストされたデータ構造を扱う際に特に役立つようにmudashを書いた少し痛みを伴うことができます。あなたはこれと同じようにmudashでこれを達成することができます...

const _ = require('mudash') 

// delete, this correctly traverses mixed structures... 
test = _.delete(test, 'arr.2') 

//update/filter, these methods correctly handle both immutable and stadard js types... 
test = _.update(test, 'arr', (arr) => _.filter(arr, (obj) => obj.id !== 3)) 

Answer 2

Immutable.jsを使用して、あなたは一般的に平野JSデータ構造を使用することになっていません。ですから、のようなあなたのデータを作成することができます。

test = Map({ arr: List([ Map({ id: 1 }), Map({ id: 2 }), Map({ id: 3 }) ]) }) 

と、次のように第三のオブジェクトを削除することができます。

test.set('arr', test.get('arr').filter(x => x.get('id') != 3))