Привет, В этом блоге я собираюсь показать, как предотвратить мутацию массива.

Здесь у нас есть массив объектов countries.

let countries = [
    {id: 1, name: "India", image: "thumb10.jpg"},
    {id: 2, name: "Africa", image: "thumb11.jpg"},
    {id: 3, name: "South Africa", image: "thumb12.jpg"},
    {id: 4, name: "Bolivia", image: "thumb13.jpg"}
];

Вернуть определенные поля из массива

Из массива countries нам нужны только два поля id и name. Поэтому мы используем функцию сопоставления массивов, чтобы получить желаемый результат.

let output = countries.map(s => ({ id: s.id, name: s.name}));
console.log(countries); // there will be no change in array
console.log(output); // it returns only two feilds in array

Что, если у нас есть несколько полей в объекте массива, и нам нужны их динамические поля. т.е.

let fieldsOfArray = ["id", "name", "image"];
let requiredFields = ["id", "name"];
let output = countries; // assigning the countries array to output.
for(const i in output) {
    for (const x in fieldsOfArray) {
        if(!fieldsOfArray.includes(requiredFields[x])) {
            // deleting column/field from output
            delete output[i][fieldsOfArray[x]];
        }
    }
}
console.log(countries); // [{id: 1, name: "India"}, {id: 2 ....}];
console.log(outpput); // [{id: 1, name: "India"}, {id: 2 ....}];

удаление полей из присвоенной переменной удалит те же поля из исходного массива. Итак, нам нужно сделать копию исходного массива, а затем назначить ее другой переменной, чтобы предотвратить эту мутацию массива.
Есть несколько способов сделать копию массива, например, используя метод slice() или используя spread notation (...), т.е.

let output = countries.slice(); // or
let output = [...countries];

Использование slice() или spread notation (...) сделает мелкую копию массива. Слово «мелкий» говорит само за себя, и оно не будет работать во всех случаях, как в примере выше.

Это была проблема в реальном времени, с которой я столкнулся однажды в своем проекте, и я пробовал много методов для копирования массива, но он изменял исходный массив.
Итак, здесь я придумал решение, из которого мы можем сделать копию массива, чтобы предотвратить изменение исходного массива.

// make a copy of original array
function copy(obj) {
    var output, v, key;
    output = Array.isArray(obj) ? [] : {};
    for (key in obj) {
        v = obj[key];
        output[key] = (typeof v === "object") ? copy(v) : v;
    }
    return output;
}
let countries = [
    {id: 1, name: "India", image: "thumb10.jpg"},
    {id: 2, name: "Africa", image: "thumb11.jpg"},
    {id: 3, name: "South Africa", image: "thumb12.jpg"},
    {id: 4, name: "Bolivia", image: "thumb13.jpg"}
];
let fieldsOfArray = ["id", "name", "image"];
let requiredFields = ["id", "name"];
console.log('countries before delete', countries);
// let output = countries;
// let output = countries.slice();
let output = [...countries];
// let output = copy(countries);
for(const i in output) {
    for (const x in fieldsOfArray) {
        if(!fieldsOfArray.includes(requiredFields[x])) {
            // deleting column/field from output
            delete output[i][fieldsOfArray[x]];
        }
    }
}
console.log('countries data after delete process', countries);

Вы можете раскомментировать различные методы копирования массива в приведенном выше примере и запустить код, чтобы проверить разницу между всеми методами копирования массива.

Посетите https://coderman-401.web.app/, чтобы узнать об удивительных материалах.

Удачного кодирования :)