详细解刨JavaScript Reduce真正用法

减少是一种很难理解的方法,尤其是在网上可以找到所有含糊的解释的情况下。理解reduce它有很多好处,因为它经常用于状态管理中(想想Redux)。

reduceJavaScript中的数组方法的签名为:

arr.reduce(callback, initialValue);

术语

Reduce带有减速器和累加器等术语。这accumulator是我们最终获得的价值,reducer也是我们为了获得一个价值而将要采取的行动。

您必须记住,reducer只返回一个值,而仅返回一个值,因此名称为reduce

以以下经典示例为例:

const value = 0; 

const numbers = [5, 10, 15];

for(let i = 0; i < numbers.length; i++) {
  value += numbers[i];
}

以上将给我们30(5 + 10 + 15)。这很好用,但是我们可以使用它reduce来代替,这可以避免value变量发生变化。

以下代码也将输出30,但不会更改我们的value变量(我们现在将其称为initialValue

/* this is our initial value i.e. the starting point*/
const initialValue = 0;

/* numbers array */
const numbers = [5, 10, 15];

/* reducer method that takes in the accumulator and next item */
const reducer = (accumulator, item) => {
  return accumulator + item;
};

/* we give the reduce method our reducer function
  and our initial value */
const total = numbers.reduce(reducer, initialValue)

上面的代码可能看起来有些混乱,但是在幕后并没有发生任何魔术。让我们console.logreducer方法中添加一个将输出accumulatoritem参数的方法。

以下屏幕快照显示了记录到控制台的内容:

减少产量

因此,我们注意到的第一件事是我们的方法称为“ 3时间”,因为3数组中存在值。我们累加器始于0这是我们的initialValue,我们传递给reduce。在每次调用该函数时,item都会将其添加到中accumulator。该方法的最后调用具有accumulator的价值15item1515 + 15为我们提供了30这是我们的最终值。请记住,该reducer方法返回accumulator加号item

因此,这是一个简单的示例reduce,现在让我们进入一个更复杂的示例。

使用reduce展平数组

假设我们有以下数组:

const numArray = [1, 2, [3, 10, [11, 12]], [1, 2, [3, 4]], 5, 6];

可以说,由于某种疯狂的原因,JavaScript删除了该.flat方法,因此我们必须自己弄平该数组。

因此,无论数组嵌套有多深,我们都会编写一个函数来展平任何数组:

function flattenArray(data) {
  // our initial value this time is a blank array
  const initialValue = [];

  // call reduce on our data
  return data.reduce((total, value) => {
    // if the value is an array then recursively call reduce
    // if the value is not an array then just concat our value
    return total.concat(Array.isArray(value) ? flattenArray(value) : value);
  }, initialValue);
}

如果我们将其传递numArray给此方法并记录结果,则会得到以下结果:

展平阵列输出

这是一个很好的例子,说明了如何使非常常见的操作变得非常简单。

让我们再看一个例子。

最后的示例-更改对象结构

因此,随着新的Pokemon游戏问世,我们假设我们有一个服务器向我们发送了一系列Pokemon对象,如下所示:

const pokemon = [
  { name: "charmander", type: "fire" },
  { name: "squirtle", type: "water" },
  { name: "bulbasaur", type: "grass" }
]

我们想要将此对象更改为如下形式:

const pokemonModified = {
  charmander: { type: "fire" },
  squirtle: { type: "water" },
  bulbasaur: { type: "grass" }
};

为了获得所需的输出,我们执行以下操作:

const getMapFromArray = data =>
  data.reduce((acc, item) => {
    // add object key to our object i.e. charmander: { type: 'water' }
    acc[item.name] = { type: item.type };
    return acc;
  }, {});

如果我们这样调用我们的方法:

getMapFromArray(pokemon)

我们得到所需的输出:

口袋妖怪输出

您可以在签出Codesandbox。

结论

就是这样!希望您现在已经了解了reduce方法的工作原理。

免责声明: 本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
侵删请致信站长

西楼网 » 详细解刨JavaScript Reduce真正用法