уменьшить — очень мощный метод массива в JavaScript, его можно использовать для накопления элементов в массиве, чтобы получить одно значение. Основное использование сокращения состоит в том, чтобы принять функцию обратного вызова и начальное значение в качестве параметров, затем пройтись по массиву, передать каждый элемент и накопленное значение в функцию обратного вызова и, наконец, вернуть окончательное накопленное значение. У reduce есть много супер практических навыков использования, и в этой статье мы познакомим вас с 10 из них.
1. Вычислить сумму элементов в массиве
Это одно из наиболее распространенных применений сокращения, которое можно использовать для вычисления суммы всех элементов в массиве. Например, если у нас есть массив чисел, мы можем использовать сокращение до суммы:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
Здесь мы передаем стрелочную функцию в качестве функции обратного вызова, которая принимает два параметра: acc представляет накопленное значение, а cur представляет текущий элемент. Мы суммируем их и возвращаем новое накопленное значение. Мы также передаем начальное значение 0 в качестве второго параметра сокращения, указывающего начальное значение накопленного значения. Если вы не передадите начальное значение, reduce по умолчанию будет использовать первый элемент массива в качестве начального значения, но это может привести к неожиданным результатам, поэтому лучше всегда указывать начальное значение.
2. Вычислить среднее значение элементов в массиве
Подобно суммированию, мы также можем использовать сокращение для вычисления среднего значения элементов в массиве. Нам просто нужно разделить накопленное значение на длину массива в функции обратного вызова:
const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((acc, cur) => acc + cur, 0) / numbers.length;
console.log(average); // 3
3. Вычислить максимальное или минимальное значение элементов в массиве
Помимо суммирования и усреднения, мы также можем использовать сокращение, чтобы найти максимальное или минимальное значение элементов в массиве. Нам просто нужно использовать метод Math.max или Math.min в функции обратного вызова, чтобы сравнить накопленное значение с текущим элементом и вернуть большее или меньшее значение:
const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
console.log(max); // 5
const min = numbers.reduce((acc, cur) => Math.min(acc, cur), Infinity);
console.log(min); // 1
Здесь мы использовали -Infinity и Infinity в качестве начальных значений, представляющих минимальное и максимальное возможные значения соответственно. Это гарантирует, что любой элемент массива можно сравнить для получения результата.
4. Преобразовать массив в объект
reduce можно использовать не только для выполнения математических операций над массивами, но и для преобразования массивов в другие типы структур данных, например объекты. Например, если у нас есть двумерный массив, содержащий пары ключ-значение, мы можем использовать сокращение, чтобы преобразовать его в объект:
const entries = [['name', 'Alice'], ['age', 18], ['gender', 'female']];
const obj = entries.reduce((acc, cur) => {
acc[cur[0]] = cur[1];
return acc;
}, {
});
console.log(obj); // {name: "Alice", age: 18, gender: "female"}
Здесь мы передаем пустой объект в качестве начального значения, а в функции обратного вызова первый элемент каждого подмассива используется как ключ объекта, а второй элемент используется как значение объекта, а новый объект возвращается.
5. Преобразование объекта в массив
И наоборот, мы также можем использовать сокращение для преобразования объекта в массив, например:
const obj = {
name: 'Alice',
age: 25,
gender: 'female'
};
Мы можем использовать функцию сокращения для достижения этой функции, код выглядит следующим образом:
const arr = Object.keys(obj).reduce((acc, key) => {
acc.push([key, obj[key]]);
return acc;
}, []);
console.log(arr); // [['name', 'Alice'], ['age', 25], ['gender', 'female']]
Таким образом, мы получаем массив, содержащий пары ключ-значение объекта, которые можно легко обходить или выполнять другие операции.
6. Подсчитайте количество вхождений каждого элемента в массиве
Если мы хотим подсчитать количество вхождений каждого элемента в массиве, мы можем использовать для этого метод сокращения. Например:
let arr = ['a', 'b', 'c', 'a', 'b'];
let count = arr.reduce((obj, item) => {
// 如果对象中已经有了这个键，就让它的值加一
if (obj[item]) {
obj[item]++;
} else {
// 如果对象中没有这个键，就初始化为一
obj[item] = 1;
}
// 返回对象作为下一次的累计值
return obj;
}, {
}); // 初始值为空对象
console.log(count); // {a: 2, b: 2, c: 1}
7. Группировка по состоянию
Предположим, у нас есть массив, содержащий информацию об учениках, каждый объект имеет атрибуты имени и оценки, и мы хотим сгруппировать по тому, больше или равно 60 баллов, то есть сдано или не выполнено. Мы можем сделать это, используя сокращение:
// 定义一个学生数组
const students = [
{
name: 'Alice', score: 75},
{
name: 'Bob', score: 59},
{
name: 'Charlie', score: 82},
{
name: 'David', score: 48},
{
name: 'Eve', score: 66}
];
// 使用reduce按条件分组
const groups = students.reduce((acc, cur) => {
// 判断当前对象的score是否大于等于60
const key = cur.score >= 60 ? 'pass' : 'fail';
// 如果累积对象中还没有这个key，就创建一个空数组
if (!acc[key]) {
acc[key] = [];
}
// 将当前对象推入对应的数组
acc[key].push(cur);
// 返回累积对象
return acc;
}, {
}); // 初始值为一个空对象
// 打印结果
console.log(groups);
/*
{
pass: [
{ name: 'Alice', score: 75 },
{ name: 'Charlie', score: 82 },
{ name: 'Eve', score: 66 }
],
fail: [
{ name: 'Bob', score: 59 },
{ name: 'David', score: 48 }
]
}
*/
8. Объедините несколько групп в один объект
Объедините несколько массивов в один объект, например, объедините массив, содержащий информацию о пользователях, и массив, содержащий заказы пользователей, в объект, содержащий информацию о пользователях и заказы. Таким образом, данные могут быть удобно проанализированы и обработаны.
Чтобы получить эту функцию, мы можем использовать второй параметр метода сокращения, который является начальным значением. Начальное значение может быть любым типом значения, включая пустой объект. Затем в функции обратного вызова метода сокращения мы можем судить о том, существует ли уже соответствующий атрибут объекта в соответствии с определенным атрибутом элемента массива (например, идентификатором пользователя). Если оно не существует, создайте новое свойство и назначьте ему элементы массива. Если он присутствует, элемент массива добавляется к существующему свойству. Наконец, накопленный объект возвращается в качестве начального значения для следующей итерации.
Вот пример кода:
// 用户信息数组
const users = [
{
id: 1, name: "Alice", age: 25 },
{
id: 2, name: "Bob", age: 30 },
{
id: 3, name: "Charlie", age: 35 },
];
// 用户订单数组
const orders = [
{
id: 1, userId: 2, product: "Book", price: 10 },
{
id: 2, userId: 1, product: "Pen", price: 5 },
{
id: 3, userId: 3, product: "Shirt", price: 20 },
{
id: 4, userId: 2, product: "Shoes", price: 15 },
];
// 使用reduce方法将两个数组合并为一个对象
const result = users.reduce((acc, user) => {
// 判断是否已经存在对应用户ID的属性
if (!acc[user.id]) {
// 如果不存在，创建一个新的属性，并将用户信息赋值给它
acc[user.id] = user;
// 同时，创建一个空数组用来存储用户订单
acc[user.id].orders = [];
}
// 遍历订单数组，找到属于当前用户的订单
for (let order of orders) {
if (order.userId === user.id) {
// 将订单追加到用户订单数组中
acc[user.id].orders.push(order);
}
}
// 返回累积的对象
return acc;
}, {
}); // 初始值为空对象
// 打印结果
console.log(result);
/*
{
"1": {
"id": 1,
"name": "Alice",
"age": 25,
"orders": [
{
"id": 2,
"userId": 1,
"product": "Pen",
"price": 5
}
]
},
"2": {
"id": 2,
"name": "Bob",
"age": 30,
"orders": [
{
"id": 1,
"userId": 2,
"product": "Book",
"price": 10
},
{
"id": 4,
"userId": 2,
"product": "Shoes",
"price": 15
}
]
},
"3": {
"id": 3,
"name": "Charlie",
"age": 35,
"orders": [
{
"id": 3,
"userId": 3,
"product": "Shirt",
"price": 20
}
]
}
}
*/
9. Преобразование строки в объект
Мы часто сталкиваемся с получением значения по URL-адресу, конечно, есть много способов, для достижения которых мы используем метод сокращения.
// 将URL参数转化为对象
let url = "https://www.example.com?name=Tom&age=20&gender=male";
let params = url.split("?")[1]; // 获取参数部分
let obj = params.split("&").reduce((acc, cur) => {
let [key, value] = cur.split("="); // 分割键和值
acc[key] = value; // 将键和值添加到对象中
return acc;
}, {
}); // 初始值为空对象
console.log(obj); // {name: "Tom", age: "20", gender: "male"}
10. Проверьте, является ли строка палиндромом
Если мы хотим проверить, является ли строка палиндромом, т. е. читается ли она одинаково вперед и назад, например, «гоночная машина», мы можем использовать для этого метод сокращения.
Сначала мы преобразуем строку в массив, затем используем метод сокращения для перебора массива справа налево, соединяя каждый элемент с аккумулятором, чтобы получить перевернутую строку. Затем мы сравниваем перевернутую строку с исходной строкой, если они равны, это палиндром, иначе нет.
Например, имея строку «гоночный автомобиль», мы могли бы написать:
const isPalindrome = str => {
// 将字符串转换为数组
const arr = str.split('');
// 使用reduce方法从右到左遍历数组，将每个元素拼接到累积器上
const reversedStr = arr.reduce((accumulator, currentValue) => currentValue + accumulator, '');
// 将反转后的字符串和原始字符串进行比较
return reversedStr === str;
};
console.log(isPalindrome('racecar')); // true
console.log(isPalindrome('hello')); // false
Конечно, есть и другие способы записи.
const fun = str => {
let result = str.split('').reverse().toString().replaceAll(',','')
return result === str
}
console.log(fun('abcd')) // false
console.log(fun('abba')) // true
На этом в статье все, спасибо за прочтение! Я все еще учусь, пожалуйста, поправьте меня, если я ошибаюсь. Если вы считаете, что статья имеет смысл и может принести вам пользу или вдохновение, пожалуйста, поставьте лайк и соберите ее, чтобы поддержать ее. Пожалуйста, также подписывайтесь на меня, и я поделюсь более полезными вещами. -Конечное содержание и навыки. Я жизненный круг хождения по волнам , и я надеюсь расти вместе с вами~