使用 immutability-helper 处理数组、对象、映射表

Question

如何使用immutability-helper进行简单的创建、更新/修改、替换和删除操作？

1. 如果我有一个简单值数组？

2. 如果我有一个简单对象数组？

3. 如果我的数组在另一个对象中？

4. 如果我有一个对象的对象？（哈希，无序）

5. 如果我有一个对象的Map？（哈希，有序）

作为初学者，我发现官方文档有点令人困惑。

- Finlay Beaton

Answer 1

你可以在单独的问题中找到每个操作的答案，但并不是全部都一起呈现。

1. 简单值的数组

import update from 'immutability-helper';

const oldArray = [1, 2, 3];

// add an item
const newArray = update(oldArray, {$push: [6, 7]}); 
// => [1, 2, 3, 6, 7]

// modify an item
const itemIndex = 1; // modify `2` value at index `1`
const newValue = 8;
const newArray = update(oldArray, { [itemIndex]: {$set: newValue} }); 
// => [1, 8, 3]

// remove an item
const itemIndex = 2; // delete `3` value at index `2`
const newArray = update(oldArray, {$splice: [[itemIndex, 1]] }); 
// => [1, 2]

2. 简单对象的数组

import update from 'immutability-helper';

const oldArray = [
    {name: 'Stacey', age: 55},
    {name: 'John', age: 77},
    {name: 'Kim', age: 62},
];

// add an item
const newArray = update(oldArray, {$push: [
    {name: 'Trevor', age: 45},
]});

// replace an item
const itemIndex = 1; // replace *John* at index `1`
const newValue = {name: 'Kevin', age: 25};
const newArray = update(oldArray, { [itemIndex]: {$set: newValue} });

// modify an item
const itemIndex = 1; // modify *John* at index `1`
const newArray = update(oldArray, {
    [itemIndex]: {$merge, {
        age: 85, // change John's age to 85
    }}
});         

// remove an item
const itemIndex = 0; // delete *Stacey* at index `0`
const newArray = update(oldArray, {$splice: [[itemIndex, 1]] } });

你可以使用内置的findIndex()根据属性查找项目的索引。 3. 数组在另一个对象中

import update from 'immutability-helper';

const oldData = {
    city: {       
        people: [
            {name: 'Stacey', age: 55},
            {name: 'John', age: 77},
            {name: 'Kim', age: 62},
        ]
    }
};

// add an item
const newArray = update(oldArray, {
    city: {
        people: {$push: [
            {name: 'Trevor', age: 45},
        ]}
    }
});

// replace an item
const itemIndex = 1; // replace *John* at index `1`
const newValue = {name: 'Kevin', age: 25};
const newArray = update(oldArray, {
    city: {
        people: { 
            [itemIndex]: {$set: newValue} }}
        }
    }
);

// modify an item
const itemIndex = 1; // modify *John* at index `1`
const newArray = update(oldArray, { 
    city: {
        people: {
            [itemIndex]: {$merge, {
                age: 85, // change John's age to 85
            }}
        }
    }
});         

// remove an item
const itemIndex = 0; // delete *Stacey* at index `0`
const newArray = update(oldArray, {
    city: {
        people: {$splice: [[itemIndex, 1]] } 
    }
});

4. 对象中的对象（哈希，无序）

import update from 'immutability-helper';

const oldData = {
    'hash-stacey': {name: 'Stacey', age: 55},
    'hash-john': {name: 'John', age: 77},
    'hash-kim': {name: 'Kim', age: 62},
};

// add an item
const newData = update(oldData, {
    ['hash-trevor']: {$set: {name: 'Trevor', age: 45} }
});

// replace an item at a specific hash
const itemHash = 'hash-john';
const newValue = {name: 'Kevin', age: 25};
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// modify an item
const itemHash = 'hash-john';
const newData = update(oldData, {
    [itemHash]: {$merge: {
        age: 85, // change John's age to 85
    }}
});         

// remove an item
const itemHash = 'hash-stacey';
const newData = update(oldData, {$unset: [itemHash] });

对象映射表（哈希表，有序）

import update from 'immutability-helper';

const oldData = new Map([
    ['hash-stacey', {name: 'Stacey', age: 55}],
    ['hash-john', {name: 'John', age: 77}],
    ['hash-kim', {name: 'Kim', age: 62}],
]);

// add an item
const newData = update(oldData, {$add: [
    ['hash-trevor', {name: 'Trevor', age: 45}],
]});

// replace an item at a specific hash
const itemHash = 'hash-john';
const newValue = {name: 'Kevin', age: 25};
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// modify an item
const itemHash = 'hash-john';
/* please edit with better single update $merge or $apply */
const newValue = update(oldData.get(itemHash), {$merge: {
    age: 85, // change John's age to 85
}});
/* typescript needs to do `oldData as any` cast here */
const newData = update(oldData, { [itemHash]: {$set: newValue} });

// remove an item
const itemHash = 'hash-stacey';
const newData = update(oldData, {$remove: [itemHash] });

- Finlay Beaton