Итак, почему этот пост будет вам полезен? Прежде чем погрузиться в блог, моргните здесь на секунду!
позвольте мне ответить, Предположим, у вас есть свой массив, что-то вроде этого: #1
const array = [
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "size", properties: "3xl" },
{ name: "size", properties: "3xl" },
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "color", properties: "blue" },
{ name: "color", properties: "black" },
{ name: "size", properties: "3xl" },
];
и вы хотите, чтобы ваш массив выглядел примерно так:
[
{ name: "ram", properties: [ "4gb", "3gb" ]},
{ name: "size", properties: [ "2xl", "3xl" ]},
{ name: "color", properties: [ "red", "blue", "black" ]},
]
Можете ли вы подумать о секунде и построить свою собственную логику без помощи каких-либо ресурсов? изучить : прокрутить !
оу 😢 прокрутка вернулась ;
Давайте рассмотрим еще один практический пример использования Reduce : # 2
const peoples = [
{ name: "Nischal", heightInFeet: 5.8, age: 16 },
{ name: "Sudip", heightInFeet: 5.7, age: 16 },
{ name: "Nuri", heightInFeet: 6.1, age: 20 },
{ name: "Ankita", heightInFeet: 4.6, age: 19 },
];
и вы хотите создать новый массив, в котором пользователи хранятся в индексе возраста:
Здесь вы увидите 16, 19 и 21 как ключ объекта, который имеет значение массива пользователей, так как же вы можете выполнить это с помощью сокращения?
Наконец!
Бонус для вас! forEach ~ данные первого массива
const count = {};
array.forEach(function (i) {
if (!count[i.name]) {
count[i.name] = 0;
}
count[i.name]++;
});
console.log(count);
Выход :
Давайте использовать другой случай для сокращения, и я обещаю, что это последний 😢😆
#3
const users = [
{ name: "Nischal", heightInFeet: "5.8", age: 16 },
{ name: "Sudip", heightInFeet: "5.4", age: 21 },
{ name: "Nuri", heightInFeet: "6.1", age: 19 },
{ name: "Ankita", heightInFeet: "4.4", age: 19 },
];
Здесь выше у нас есть массив пользователей, и у каждого есть значение имени, heightInFeet, которое представляет их рост в футах, наконец, у нас есть возраст каждого пользователя, хранящийся в массиве,
и тут мы столкнулись с тем, что нам нужно фильтровать пользователей по высоте, ок, запутанно? если затем я уточню, мне нужен объект высотой 5, 6 и т. д., который должен содержать пользователей, высота которых находится в этом диапазоне, поэтому, не глядя на мой код, вы можете попытаться декодировать с помощью простого кода, во-первых, вы определенно можете попробуйте без использования функции уменьшения массива, и после этого вы можете использовать функцию уменьшения массива для выполнения этой работы!
Здесь у меня есть код массива лучших пользователей раздела,
const res = users.reduce((usersHeight, curr) => {
const { heightInFeet } = curr;
const height = Math.floor(heightInFeet).toString() + "ft";
if (usersHeight[height] == null) usersHeight[height] = [];
usersHeight[height].push(curr);
return usersHeight;
}, {});
Вывод приведенного выше console.log(res):
хорошо, давайте РАСШИФРОВАЕМ, как работает эта функция сокращения после множества примеров и кода, который мы практиковали и пробовали сейчас, притворитесь, что вы полностью знаете о функции сокращения в javascript, я попытаюсь объяснить, используя диаграмму.
Уменьшить само название говорит о том, что он уменьшает массив в соответствии с вашими потребностями, в простом это просто означает, что он уменьшает массив до меньшего и необходимого!
Что говорит документация MDN?
Метод reduce() выполняет предоставленную пользователем функцию обратного вызова 'reducer' для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления предыдущего элемента. Конечным результатом выполнения редуктора для всех элементов массива является одно значение.
Упростить уменьшить
Метод reduce принимает два разных параметра, первый — это функция здесь, если у нас есть функция стрелки, а второй параметр будет вашим начальным значением!
аккумулятор: накапливает и уменьшает возвращаемое значение!
currentValue : это каждый отдельный элемент, который мы просматриваем.
currentIndex : это третий последний параметр индекса внутри массива.
массив: это последний параметр метода и принимает массив
reduce((accumulator, currentValue, currentIndex, array) =>
{ /* … */ }, initialValue)
но это сложнее, давайте разберемся с основами,
вот код первого примера ~ #1
const array = [
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "size", properties: "3xl" },
{ name: "size", properties: "3xl" },
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "color", properties: "blue" },
{ name: "color", properties: "black" },
{ name: "size", properties: "3xl" },
];
const result = array.reduce((acc, curr) => {
const { name, properties } = curr;
if (!acc.some((item) => item.name === name)) {
acc.push({ name, properties: [properties] });
} else {
const index = acc.findIndex((item) => item.name === name);
if (!acc[index].properties.includes(properties)) {
acc[index].properties.push(properties);
}
}
return acc;
}, []);
вот как вы можете сделать это, не используя метод уменьшения массива,
const temp = [];
const filteredValues = [];
array.forEach((val) => {
// -1 represents not match found, it checks true if not the match found
if (temp.indexOf(val.name) === -1) {
temp.push(val.name);
filteredValues.push({ name: val.name, properties: [] });
}
});
array.forEach((v) => {
filteredValues.forEach((item) => {
if (v.name === item.name) {
if (item.properties.indexOf(v.properties) === -1) {
item.properties.push(v.properties);
temp.push(item.name);
}
}
});
});
console.log(filteredValues);
вот код для второго примера ~ #2
let result = users.reduce((groupedPeoplesViaAge, person) => {
const { age } = person;
if (groupedPeoplesViaAge[age] == null) groupedPeoplesViaAge[age] = [];
groupedPeoplesViaAge[age].push(person);
return groupedPeoplesViaAge;
}, {});
Практикуйтесь больше и учитесь больше! Исследуй, учись, зарабатывай 🚀
Бонусный пример использования и понимание сокращения в Javascript!
const arr1 = [
{ name: 'Nischal Dahal', goals: 0, assists: 0, points: 0 },
{ name: 'Sudip Mahato', goals: 2, assists: 1, points: 3 },
{ name: 'Ankita ', goals: 1, assists: 1, points: 2 },
{ name: 'Santosh Dahal', goals: 5, assists: 7, points: 12 },
{ name: 'neeswebservices', goals: 5, assists: 7, points: 12 },
{ name: 'Cat', bones: 100000, goals: 5, assists: 7, points: 12 },
];
const arr2 = [
{ name: 'Noob player', goals: 3, assists: 3, points: 6, ppg: 0, ppa: 0, pims: 0, },
{ name: 'Achuta Ghimire', goals: 1, assists: 4, points: 5, ppg: 0, ppa: 1, pims: 0 },
{ name: 'Bidhan Acharya', goals: 0, assists: 0, points: 0, ppg: 0, ppa: 0, pims: 0, },
{ name: 'Pandey Sudip', goals: 0, assists: 0, points: 0, ppg: 0, ppa: 0, pims: 0, },
];
function addItUp(...arraysOfData) {
const data = arraysOfData.flat();
const tally = data.reduce(function(tallyArray, item) {
// first check if this person is new
const { name, ...points } = item;
console.log(`Working on ${name}`);
console.log(points);
tallyArray[name] = tallyArray[name] || {};
// Loop over each of their properties and add them up
Object.entries(points).forEach(([key, val]) => {
if(tallyArray[name][key]) {
// Already exists, so we increment the value by the next line
tallyArray[name][key] = tallyArray[name][key] + val;
} else {
// brand new, set it to that value!
tallyArray[name][key] = val;
}
})
return tallyArray;
}, {});
return tally;
}
const result = addItUp(arr1, arr2);
console.table(result)
Если вы не поняли, пожалуйста, дайте мне знать через соединение.
Спасибо, что долистали до сюда 🤣 ! проверьте мой Github и почту для связи!
№ 1, № 2 и № 3 означают соединение, которое вы можете найти и перейти в определенный раздел!
Дайте ХЛОП 👏, если вам помог контент!
- связаться : [email protected]
- Инстаграм: https://instagram.com/neeswebservices
- Гитхаб: https://github.com/neeswebservices
- фейсбук: https://facebook.com/102.nees.418
Это мой первый блог, отзывы принимаются, если они у вас есть 💗.
больше ссылок:
