При решении задач в массиве в JavaScript. Мы можем столкнуться с ошибками в методе push для добавления элемента. Здесь проблема возникает, когда мы создаем/разрабатываем что-то на JavaScript или React.
Давайте проанализируем побочные эффекты метода Push на двух примерах:
Я покажу код небольшими фрагментами. Чтоб все поняли.
Пример — 1
function push(a) {
b = a;
b.push(4);
console.log("Duplicate- ", b);
}
const a = [1,2,3];
push(a); //Output:- Duplicate- [1, 2, 3, 4]
//What if I console.log(a) after a function call?
console.log("original", a); //Output:- original- [1, 2, 3, 4]
Как мы видим, используя метод push. Исходный массив изменяется. Если мы не хотим изменять исходный массив, каковы возможные способы решения этого побочного эффекта? ?
Решение для примера — 1
Мы будем использовать оператор распространения, чтобы устранить этот побочный эффект.
function push(a) {
const b = [...a, 4] //Using [spread operator, 4] to append an element.
console.log(b)
}
const a = [1,2,3]
push(a) //Output:- Duplicate- [1, 2, 3, 4]
//What if I console.log(a) after a function call?
console.log("original", a) //Output:- original- [1, 2, 3]
Подумайте об этом, вы создаете сайт электронной коммерции. Где вам нужно добавить товар в корзину. В то время, почему вам следует избегать использования метода push?
Я объясню это на примере. Так что это будет иметь больше смысла.
Пример ниже взят с сайта educative.io, но комментарии написаны мной.
Пример — 2
//Array of objects
//3 items inside the original array.
const cart = [
{
name: 'The Foundation Trilogy',
price: 19.99,
discount: false,
},
{
name: 'Godel, Escher, Bach',
price: 15.99,
discount: false,
},
{
name: 'Red Mars',
price: 5.99,
discount: true,
}, ];
const reward = {
name: 'Guide to Science Fiction',
discount: true,
price: 0,
};
function addFreeGift(cart) {
if (cart.length > 2) {
cart.push(reward)
return cart
}
return cart;
}
function summarizeCart(cart) {
const cartWithReward = addFreeGift(cart);
// return output of addFreeGit(cart) get stored in the CartWithReward
console.log(cartWithReward)
const discountable = cart.filter(item=>item.discount);
// discountable = [ {discount: true }, {discount: true} ]
if (discountable.length > 1) {
return {
error: 'Can only have one discount',
};
}
return {
discounts: discountable.length,
items: cartWithReward.length,
cart: cartWithReward,
};
}
console.log("Add free gift:");
console.log(addFreeGift(cart));
console.log("\n");
console.log("Summarize cart:");
console.log(summarizeCart(cart));
console.log("\n");
console.log("Cart:");
console.log(cart);
Вывод для приведенного выше кода —
//Output
Add free gift:
0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
3: {name: 'Guide to Science Fiction', discount: true, price: 0}
4: {name: 'Guide to Science Fiction', discount: true, price: 0}
//Output
Summarize cart:
0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
3: {name: 'Guide to Science Fiction', discount: true, price: 0}
4: {name: 'Guide to Science Fiction', discount: true, price: 0}
{error: 'Can only have one discount'}
//Output
Cart:
0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
3: {name: 'Guide to Science Fiction', discount: true, price: 0}
4: {name: 'Guide to Science Fiction', discount: true, price: 0}
Из приведенного выше наблюдения мы можем сделать вывод, что результаты операций Добавить бесплатный подарок, Обобщить корзину и Корзина побочные эффекты. Когда одни и те же товары добавляются дважды, а товары в исходной корзине также изменяются.
Мы можем избежать этих побочных эффектов, используя sоператор pread внутри этой функции addFreeGift в корзине. .
function addFreeGift(cart) {
if (cart.length > 2) {
//Earlier it was cart.push(reward)
cart = [...cart, reward]
return cart
}
return cart;
}
Теперь вывод будет выглядеть так:
//Output
Add free gift:
0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
3: {name: 'Guide to Science Fiction', discount: true, price: 0}
//Output
Summarize cart:
0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
3: {name: 'Guide to Science Fiction', discount: true, price: 0}
{error: 'Can only have one discount'}
//Output
Cart:
0: {name: 'The Foundation Trilogy', price: 19.99, discount: false}
1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}
2: {name: 'Red Mars', price: 5.99, discount: true}
Надеюсь, это поможет вам понять :)
Пожалуйста, следуйте за мной на среду для большего количества такого контента.
