Практическое руководство по Array.prototype.reduce

привет~Уважаемые наблюдатели и господа, Привет всем~ В последнее время, из-за работы (лан) работы (ай) занят (фа) занят (цзо), большинство статей в основном являются переводами, и я переводил их раньше.«Как лучше использовать массивы в JavaScript»В этой статье я обнаружил, что многие студентыArray.prototype.reduceЯ не очень знаком с этим, и у меня есть небольшой опыт в этой области, поэтому я поделюсь им с вами здесь.

Array.prototype.reduceЭто относительно сложный, но очень мощный метод в массивах JavaScript.Эта статья в основном практическая и показывает, как использовать этот метод на примерах, но не вникает в суть этого метода (подробные слова включают много функционального программирования -связанные знания) ~Следующий текст.

Array.prototype.reduceКраткое введение в

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

ВышеупомянутоеMDNОписание метода, синтаксис метода:arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]).callbackПринимает четыре параметра, а именно:accumulator, аккумулятор накапливает возвращаемое значение обратного вызова;currentValue, обрабатываемый элемент в массиве;currentIndex（可选）, индекс текущего обрабатываемого элемента в массиве;array（可选）,передачаreduce()массив .initialValueнеобязательный параметр, так как первый вызовcallbackЗначение первого параметра функции. Возвращаемое значение метода является результатом совокупной обработки функции.

По оценкам, после введения многие студенты находятся в замешательстве. На самом деле этот метод несложно понять, как следует из его названия, уловить его суть:полимеризация. В общем, если вам нужно преобразовать массив в другие элементы, такие как строки, числа, объекты или даже новый массив, вы можете рассмотреть, не подходят ли другие методы массива.reduceМетод, незнакомый одноклассникам, хотя приведенная выше грамматика брошена, ядром запоминания метода является агрегация.

Все следующие примеры используют следующие массивы, предполагая, что следующие тела данных получены через интерфейс:

[{
  id: 1,
  type: 'A',
  total: 3
}, {
  id: 2,
  type: 'B',
  total: 5
}, {
  id: 3,
  type: 'E',
  total: 7
},...]

Тело данных согласноidотсортированы в порядке возрастания,totalа такжеtypeНеуверенно~

Объединить в числа

Согласно тому данных, мы делаем вместе первый небольшой спрос, статистикуtotalСумма. если неreduce, на самом деле это не так сложно:

function sum(arr) {
  let sum = 0;
  for (let i = 0, len = arr.length; i < len; i++) {
    const { total } = arr[i];
    sum += total;
  }
  return sum;
}

Эта функция может выполнить вышеуказанные требования, но мы точно поддерживаем индекс массива, а затем точно обрабатываем весь процесс работы, что является типичным императивным программированием. Как упоминалось выше, если это связано с преобразованием массива в другое тело данных, вы можете использоватьreduce, можно записать так:

arr.reduce((sum, { total }) => {
  return sum + total;
}, 0)

Вот и все~sumявляется результатом предыдущего накопления, и его начальное значение равно 0. Каждый раз, когда предыдущее совокупное значение добавляется к текущему элементуtotalЭто возвращаемое значение этой функции обратного вызова при следующем выполнении.sumИспользуется фактический параметр. Вроде бы накрутил, можно обратиться к следующей таблице:

Раунды	sum	total	возвращаемое значение
1	0 (начальное значение)	3	3
2	3	5	8
3	8	7	15
...	...	...	...

Это намного понятнее? Возвращаемое значение предыдущего раза - это следующий разsumЗначение и т. д., и, наконец, накапливается сумма, которая объединяет массив в число.

агрегировать в строку

Следующим требованием является преобразование каждого элемента массива в строку фиксированного формата (например, первый элемент преобразуется вid:1,type:A;), каждый элемент непосредственно отделяется точкой с запятой. Как правило, массивы преобразуются в строки.joinМетод является хорошим выбором, но он не подходит для случаев, когда требуется точный контроль или элементы массива сложны. В этом примереjoinМетод не способен достичь желаемого эффекта.

использоватьforЦикл, конечно, помогает, ноreduceМожет быть, лучший вариант, код выглядит следующим образом:

arr.reduce((str, { id, type }) => {
  return str + `id:${id},type:${type};`;
}, '')

На примере агрегирования в числа, можете ли вы на этот раз мысленно смоделировать выполнение? Ниже также представлен процесс реализации первых трех пунктов:

Раунды	str	id	type	возвращаемое значение
1	'' (Первоначальный значение)	1	'A'	'id:1,type:A;'
2	'id:1,type:A;'	2	'B'	'id:1,type:A;id:2,type:B;'
3	'id:1,type:A;id:2,type:B;'	3	'E'	'id:1,type:A;id:2,type:B;id:3,type:E;'
...	...	...	...	...

Агрегат как объект

С предыдущей основой вы можете выполнять более сложные агрегаты. Вышеупомянутое тело данных является типичным результатом, возвращаемым внутренним интерфейсом, но для внешнего интерфейса оно преобразуется вkey valueФорма объекта более удобна для последующих операций. Затем мы конвертируем вkeyдаid,valueЭто объект других свойств, как цель!

function changeToObj(arr) {
  const res = {};
  arr.forEach(({ id, type, total }) => {
    res[id] = {
      type,
      total
    };
  })
  return res;
}

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

arr.reduce((res, { id, type, total }) => {
  res[id] = {
    type,
    total
  };
  return res;
}, {})

resЭто объект, который наконец возвращается.Обходя массив, добавляя к нему новые свойства и значения и, наконец, достигая цели объединения в объекты, код становится довольно кратким и мощным.

Наконец, для студентов, которые не знакомы с этим методом, вы можете попрактиковаться, преобразовать тело данных в массив строк, и каждый элемент массива является исходным массивом.typeценность .

резюме

Выше приведено все содержание этой статьи, вот небольшое резюмеreduceПреимущества и недостатки ~ В принципе, это может быть реализовано, пока массив агрегирован в уникальные элементы. В то же время он имеет место в функциональном программировании и является классическим примером декларативного программирования. Это также означает, что его нелегко понять, если он знаком сreduceметод, написанный код очень читабелен и элегантен. Но в глазах незнакомых студентов это бесподобная книга с небес. Как лучше использоватьreduce, чтобы не писать сложный в сопровождении код, о котором стоит подумать каждому студенту.

Спасибо всем судьям за то, что увидели это, легче сказать, чем сделать, надеюсь, эта статья будет вам полезна~ Спасибо!