javascript - 将 immutability-helper 与 Array、Object、Map 一起使用

Question

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

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

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

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

4. 如果我有一个对象？（散列，无序）

5. 如果我有对象地图？（散列，有序）

作为一个初学者，我发现官方文档有点混乱。

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. Object of objects（散列，无序）

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