Привет, В этом блоге я собираюсь показать, как предотвратить мутацию массива.
Здесь у нас есть массив объектов 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/, чтобы узнать об удивительных материалах.
Удачного кодирования :)