Javascript 对数组、对象、映射使用不变性帮助器

如何使用简单的创建、更新/修改、替换、删除

如果我有一个简单值数组

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

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

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

如果我有一张物体的地图？（散列，有序）

---

作为一个初学者，我发现这个问题有点令人困惑。

你可以在单独的问题中找到每个操作的答案，但不是全部列出

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]

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

2。简单对象数组

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]

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

您可以使用内置项根据其属性查找项的索引

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。对象的对象（散列，无序）

对象映射（散列，有序）