JavaScript数组方法.map()、. filter()和.reduce()入门

当我弄清楚如何使用JS数组方法.map() .filter().filter() .reduce() ,我阅读,查看和收听的所有内容似乎都非常复杂。 这些概念被认为是一些独立的机制,与其他任何事物均无关。 我很难掌握它们的本质并理解它们。



我听说这些是基本的东西,对它们的理解就像是“发起者”与“未发起者”之间的边界。 那我想被告知他们的真相。 它包含以下事实:这三种方法象征着以下事实:整理出一些可迭代对象的原因通常属于三种功能类别之一。

通过查看我之前编写的代码,我意识到在95%的情况下,当我遍历字符串或数组的元素时,我执行以下操作之一:

  • 对每个值应用特定的指令序列(类似于.map()方法)。
  • 匹配给定条件的过滤值(与.filter()相同)。
  • 将数据集.reduce()为单个汇总值(类似.reduce() )。

这是一个关键时刻。 那时,我了解了这些方法的本质,并看到了它们与我早已知道的联系。

为了练习,我采用了旧代码,并使用这些方法对其进行了重构。 事实证明这非常有用。

现在,不用多说,让我们讨论一下这些方法,尤其是看看如何使用它们,而不是广泛使用循环的方案。

.Map()方法


如果需要执行以下操作,则使用.map()方法:

  1. 有必要对可迭代对象的每个元素执行一定顺序的操作。
  2. 有必要返回可能已更改的值。

考虑一个简单的示例,其中对于包含价格的数组的每个元素,您需要查找包括原始价格和营业税的新金额:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) {   new_prices.push(prices[i] * 1.06); } 

这是使用.map()进行相同操作的方法:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06); 

它使用了非常简洁的语法结构。 因此,让我们来看这个例子。 .map()方法接受回调。 这是将应用于数组元素的函数。 在这种情况下,它是一个箭头函数,直接在方法声明后的括号中声明。

price参数的名称是使用数组元素时将使用的名称。 由于箭头函数只有一个参数,因此在声明它时可以不加括号。

箭头( => )之后的表达式是回调的主体。 由于函数主体中只有一个表达式,因此我们可以不用花括号,也不需要return关键字。

如果您无法理解此条目,则此示例为以下扩展版本:

 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => {   return price * 1.06 }); 

.Filter()方法


.filter()方法用于需要从可迭代对象中选择一些元素的情况。 使用此方法时,您需要记住,与过滤器相对应的值包含在最终结果中,而不是排除在最终结果之外。 那就是-传递给函数.filter()将返回true都将保留。

考虑一个示例,其中仅应从整数数组中选择奇数元素。 在这里,我们使用运算符进行除法运算的余数,并通过将数组的每个元素除以2来找出是否存在余数。如果余数为1,这表明相应的数字为奇数。 首先,让我们看一下使用常规循环解决此问题的方法:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) {   if(numbers[i] % 2 == 1) {      odds.push(numbers[i]);   } } 

.filter()方法与.map() ,接受一个回调,迭代对象的元素将依次传递到该回调:

 const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2); 

在这里,工作的组织方式与示例中使用.map()方式相同。 传递给.filter()的arrow函数仅使用一个参数,因此我们没有括号。 她的身体仅包含一个表达式,因此可以将其从大括号中省略,并且不return就可以接受。

.reduce()方法


现在,我们终于开始使用.reduce()方法了。 我认为,他是当今考虑的三种方法中最不可理解的。 此方法的名称暗示它用于将多个值减少为一个。 但是,在我看来,将其视为允许您从零件中收集某些值的方法而不是允许您“折叠”或“减少”某些东西的方法更容易。

在构造调用此方法的代码时,将首先设置某个初始值。 当该方法迭代数组的值时,此初始值将被修改,并以修改后的形式传递到下一个迭代。

这是一个经典的问题,要解决该问题,您需要计算数组元素的总和。 在我们的案例中,它在于查找某个慈善项目的捐款金额:

 const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) {   total += donations[i]; } 

.map().filter()方法不同, .filter()方法需要一个带有两个参数的回调。 这是电池和当前值。 电池是第一个参数。 每次迭代都会修改并传递给以下内容的是他:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }); 

.reduce()还可以将第二个参数传递给.reduce() 。 这将起到电池初始值的作用。 假设我们想知道两天的捐款总额,假设昨天的捐款额为450美元,并且有关今天捐款​​的信息存储在一个数组中:

 const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => {   return total + donation; }, 450); 

总结


希望现在您已经找到了.filter()数组方法.map() .filter().filter() .reduce() 。 将它们视为提高代码可读性的机制。 与使用常规循环获得的程序相比,它们可使您编写更紧凑的程序。 但是它们的主要优点是它们使您可以清楚地表达出构成代码基础的意图。

由于有了这些方法,已经编写了一段时间的代码将更易于阅读。 这样做只是为了了解它们的最终目标,而不必深入研究for循环中的结构,而是仅看到这些方法之一的名称就已经可以形成特定代码存在原因的一般概念。

亲爱的读者们! 您是否使用.map()、. filter()和.reduce()JS数组方法?


Source: https://habr.com/ru/post/zh-CN480354/


All Articles