如何使用Reduce实现JavaScript实用程序功能?



当涉及到JavaScript代码时,开发人员发现reduce函数是最难破解的概念之一。 根据维基百科,Reduce有多个名称。 累积,折叠,压缩和聚合。 这些名称清楚地表明了reduce函数的含义和工作方式。 其背后的想法是将结构分解为单个值。 因此,Reduce可以定义为将列表转换为任何数据类型的函数。

例如,您可以通过将数组[5,4,3,2,1]简化为值15。

Reduce函数使开发人员不必使用循环即可将列表折叠为单个值。

在这个博客中,您将学习使用reduce来实现知名功能的方法,就像顶级软件开发公司的开发人员已经做过的那样。

我列出了使用reduce函数重新创建的10个JavaScript实用工具函数。 因此,请查看以下这些功能:-

  • 地图


使用参数


数组(用于变换项目列表),变换函数(用于在每个元素上运行的函数)

工作中


通过使用给定的transformFunction,给定数组中的每个元素都将被转换并返回新的项目数组。

如何实施?


const map = (transformFunction, array1) => array1.reduce((newArray1, xyz) => { newArray1.push(transformFunction(xyz)); return newArray1; }, [] ); 

用例:


 const double = (x) => x * 2; const reverseString = (string) => string .split('') .reverse() .join(''); map(double, [200, 300, 400]); Output: [400, 600, 800] map(reverseString, ['Hello Alka', 'I love cooking']); // ['alkA olleH', 'gnikooc evol I'] 

  • 拒绝


使用参数


数组(要过滤的项目/值列表),谓词(返回真值或假值的函数)

工作中

拒绝过滤具有相反的行为,但类似。 如果谓词返回假值,则只有项将被添加到新数组中。 否则,该项目将从新数组中排除。

如何实施?


 const reject = (predicate, arr3) => arr3.reduce((newArray, val3) => { if (predicate(val3) === false) { newArray.push(val3); } return newArray; }, [] ); 

用例:


 const isEven = (z) => z % 2 === 0; reject(isEven, [1, 6, 4, 3]); // [1, 3] reject(equals4, [4, 2, 4, 3]); // [2, 3] 

  • 扫瞄


使用参数


数组(项目列表),reduce(是从数组列表中接收两个参数(即累加器和当前元素)的函数)

工作中


它的工作类似于reduce,但是它没有返回结果单个值,而是返回对应于单个输出的每个减少值的列表。

如何实施?


 const scan = (reducer, initialVal, array) => { const reducedValues = []; array.reduce((acc, currentval) => { const newAcc = reducer(acc, currentval); reducedValues.push(newAcc); return newAcc; }, initialVal); return reducedValues; }; 

用例:


 const add = (y, z) => y + z; const multiply = (y, z) => y * z; scan(add, 0, [1, 2, 3, 4]); // [1, 3, 6, 10] scan(multiply, 1, [1, 2, 3, 4]); // [1, 2, 6, 24] 

  • 筛选条件


使用参数


数组(用于过滤项目列表),谓词(是返回false或true值的函数)

工作中


在这里,您将获得一个新的数组作为输出。 如果谓词函数返回true值,则该项目将添加到新数组中。 但是,如果返回false,则该项目将从新数组中排除。

如何实施?


 const filter = (predicate, arr1) => arr1.reduce((newArray, val) => { if (predicate(val) === true) { newArray.push(val); } return newArray; }, [ ] ); 

用例:


 const isEven = (y) => y % 2 === 0; filter(isEven, [3, 2, 5]); // [2] filter(equals3, [7, 1, 3, 6, 3]); // [3, 3] 


使用参数


数组(列出要测试的项目),谓词(返回值true或false的函数)

工作中


在这里,如果谓词为每个项目返回假值,则没有一个返回真值。 否则,它将为谓词的每个真值返回假值。

如何实施?


 const none = (predicate, array) => array.reduce((acc1, val1) => !acc1 && !predicate(val1), false); 

用例:


 const isEven2 = (x) => x % 2 === 0; none(isEven2, [1, 3, 5]); // true none(isEven2, [1, 3, 4]); // false none(sequl3, [1, 2, 4]); // true none(sequl3, [1, 2, 3]); // false 

  • 分割区


使用参数


数组(包含项列表),谓词(函数返回false或true值)

工作中


它基于谓词值定义将数组拆分为两个。 如果谓词返回的是真值,则该项目将进入list1。 否则,它将转到列表2。 与顶级软件开发公司相关联的现代程序员已经使用了将阵列拆分为各种块的方法。 让我们看一下进一步的步骤:

如何实施?


 const partition = (predicate, array) => array.reduce( (result3, item) => { const [list1, list2] = result; if (predicate(item) === true) { list1.push(item); } else { list2.push(item); } return result3; }, [ [], [] ] ); 

用例:


 const isEven = (z) => z % 2 === 0; partition(isEven, [1, 2, 3]); // [[2], [1, 3]] partition(isEven, [1, 3, 5]); // [[], [1, 3, 5]] partition(equals3, [1, 2, 3, 4, 3]); // [[3, 3], [1, 2, 4]] partition(equals3, [1, 2, 4]); // [[], [1, 2, 4]] 

  • 全部


使用参数


数组(测试项目列表),谓词(返回值true或false的函数)

工作中


提供输入值时,如果谓词返回值true,那么所有谓词都将返回值true。 否则,它将返回一个假值。

如何实施?


 const all = (predicate, array) => array.reduce((arr, val) => arr && predicate(val), true); 

用例:


 const sequl3 = (x) => x === 3; all(sequl3, [3]); // true all(sequl3, [3, 3, 3]); // true all(sequl3, [1, 2, 3]); // false all(sequl3, [3, 2, 3]; // false 

  • 一些


使用参数


数组(测试项目列表),谓词(返回值true或false的函数)

工作中


对于任何输入值,如果谓词返回true,则某些谓词将返回true。 否则,它将返回一个假值。

如何实施?


让我们举个例子:

 const some = (predicate, array) => array.reduce((arc, val) => arc || predicate(val), false); 

用例:


 const aqua3 = (x) => x === 3; some(aqua3, [3]); // it is true some(aqua3, [3, 3, 3]); // it is true some(aqua3, [1, 2, 3]); // it is true some(aqua3, [2]); // it is false 

  • l


使用参数


数组(用于存储项目的值),键(用于从对象中获取键名称)

工作中


它可以从数组中的每个项目中拔出给定的键,然后进一步返回各自值的新数组。

如何实施?


 const pluck = (key3, array) => array.reduce((values3, current) => { values.push(current[key3]); return values3; }, [] ); 

用例:


 pluck('name', [{ name: 'Soman' }, { name: 'Rovin' }, { name: 'Jojo' }]); // ['Soman', 'Rovin', 'Jojo'] pluck(0, [[1, 2, 3], [4, 5, 6], [7, 8, 9]]); // [1, 4, 7] 


使用参数


数组(用于搜索数组列表中的项目),谓词(函数返回false或true值)

工作中


它将返回与给定谓词匹配的第一个元素,如果找不到匹配项,则返回undefined。

如何实施?


 const find = (predicate, array) => array.reduce((output, item) => { if (output !== undefined) { return output; } if (predicate(item) === true) { return item; } return undefined; }, undefined); 

用例:


 const isEven = (a) => a % 2 === 0; find(isEven, []); // undefined find(isEven, [1, 2, 5]); // 2 find(isEven, [5, 3, 7]); // undefined find(equals3, [5, 2, 3, 4, 3]); // 3 find(equals3, [7, 2, 4]); // undefined 

最后说明:


这样可以在更少的时间内使用减少实现JavaScript实用程序功能。 这无疑将帮助软件开发人员节省时间和编码工作。 如果您需要完美的编码查询支持,可以联系专家软件开发公司来满足您的项目需求。

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


All Articles