Рубрики
Без рубрики

Окончательное руководство по методам массива JavaScript – уменьшить

Способ уменьшения () снижает массив значений до одного значения. Одно значение, которое возвращается, может иметь любой тип. Уменьшить () похоже на швейцарский армейский нож методов массива. В то время как другие, как карта () и фильтр (), предоставляют конкретные функциональные возможности, уменьшить () можно использовать для преобразования

Автор оригинала: FreeCodeCamp Community Member.

Уменьшить () Способ уменьшает массив значений вниз до одного значения. Одно значение, которое возвращается, может иметь любой тип.

Уменьшить () как швейцарский армейский нож массива методов. В то время как другие, как карта () и Фильтр () Обеспечить конкретную функциональность, Уменьшить () Может использоваться для преобразования входного массива на любой желаемый вами вывод, все при сохранении исходного массива.

Синтаксис

const newValue = arr.reduce(function(accumulator, currentValue, index, array) {
  // Do stuff with accumulator and currentValue (index, array, and initialValue are optional)
}, initialValue);
  • newvalue – новый номер, массив, строка или объект, который возвращается
  • arr – массив работает на
  • Аккумулятор – возвращенное значение предыдущей итерации
  • CurrentValue – текущий элемент в массиве
  • индекс – индекс текущего элемента
  • массив – Оригинальный массив, на котором Уменьшить () назывался
  • InitiveValue – номер, массив, строка или объект, который служит начальным значением для возможного вывода

Примеры

Es5.

var numbers = [1, 2, 3]; 

var sum = numbers.reduce(function(total, current) {
  return total + current;
}, 0);

console.log(numbers); // [1, 2, 3]
console.log(sum); // 6

ES6

const numbers = [1, 2, 3];

const sum = numbers.reduce((total, current) => {
  return total + current;
}, 0);

const sumOneLiner = numbers.reduce((total, current) => total + current, 0);

console.log(numbers); // [1, 2, 3]
console.log(sum); // 6
console.log(sumOneLiner); // 6

О пользователе InitiveValue.

InitiveValue предоставляется

InitiveValue аргумент не является обязательным. Если предоставлено, он будет использоваться в качестве начального значения аккумулятора ( Total ) в первом вызове функции обратного вызова:

const numbers = [2, 3, 4];
const product = numbers.reduce((total, current) => {
  return total * current;
}, 1);

console.log(product); // 24

Так как InitiveValue из 1 предоставляется после функции обратного вызова, Уменьшить () Запускается в начале массива и устанавливает первый элемент (2) в качестве текущего значения ( Текущий ). Затем он вертет через остальную часть массива, обновляя значение аккумулятора и текущее значение по пути.

initialValue опущена

Если InitiveValue Не предусмотрено, итерация начнется во втором элементе в массиве (при индексе 1), с помощью Аккумулятор равный первому элементу в массиве и CurrentValue равный второму элементу:

const numbers = [2, 3, 4];
const product = numbers.reduce((total, current) => {
  return total * current;
});

console.log(product);

В этом примере нет InitiveValue предоставляется, так Уменьшить () Устанавливает первый элемент массива в качестве значения аккумулятора ( Total равен 2), и устанавливает второй элемент массива в качестве текущего значения ( CurrentValue равен 3). Затем это итерации через остальную часть массива.

При умерении массива строк:

const strings = ['one', 'two', 'three'];
const numberString = strings.reduce((acc, curr) => {
  return acc + ', ' + curr;
});

console.log(numberString); // "one, two, three"

Пока легко опустить InitiveValue аргумент, если ваш Уменьшить () Метод вернет номер или простую строку, вы должны включать в себя один, если она вернет массив или объект.

Возвращая объект

Преобразование массива струн в один объект, который показывает, сколько раз каждая строка появляется в массиве проста. Просто пропустите пустой объект ( {} ) как InitiveValue :

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"];

const petCounts = pets.reduce(function(obj, pet) {
  if (!obj[pet]) {
    // if the pet doesn't yet exist as a property of the accumulator object,
    //   add it as a property and set its count to 1
    obj[pet] = 1;
  } else {
    // pet exists, so increment its count
    obj[pet]++;
  }
  
  return obj; // return the modified object to be used as accumulator in the next iteration
}, {}); // initialize the accumulator as an empty object

console.log(petCounts);
/*
{
  dog: 2, 
  chicken: 3, 
  cat: 1, 
  rabbit: 1 
}
*/

Возвращение и массив

Как правило, если вы планируете вернуть массив, карта () часто бывает лучшим вариантом. Он говорит компилятору (и другим читать ваш код), что каждый элемент в исходном массиве будет преобразован и возвращен в виде нового массива одинаковой длины.

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

Скажем, у вас есть список покупок в качестве массива строк, но вы хотите удалить все продукты, которые вам не нравятся из списка. Вы могли бы использовать Фильтр () Чтобы отфильтровать все, что вам не нравится и карта () Чтобы вернуть новый массив строк, или вы могли бы просто использовать Уменьшить () :

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants'];
const foodsIDontLike = ['onions', 'eggplants'];
const newShoppingList = shoppingList.reduce((arr, curr) => {
  if (!foodsIDontLike.includes(curr)) {
    arr.push(curr);
  }
  
  return arr;
}, []);

console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

Это все, что вам нужно знать о Уменьшить () метод. Как швейцарский армейский нож, это не всегда лучший инструмент для работы. Но вы будете рады иметь его в спине, когда вам действительно нужно.

Читайте ещё по теме: