小程序 reduce_使用Reduce制作的10个JavaScript实用程序功能

小程序 reduce

The multi-tool strikes again.

多功能工具再次触击。

In my last article I offered you a challenge to recreate well-known functions using reduce. This article will show you how some of them can be implemented, along with some extras!

在上一篇文章中，我向您提出了使用reduce来重新创建知名函数的挑战。 本文将向您展示如何实现其中的一些功能以及一些其他功能！

In total we're going to look at ten utility functions. They're incredibly handy on your projects, and best of all, they're implemented using reduce! I drew lots of inspiration from the RamdaJS library for this one, so check that out!

总共我们将要看十个实用函数。 它们在您的项目上非常方便，而且最重要的是，它们使用reduce来实现！ 我从RamdaJS库中汲取了很多灵感，所以请检查一下！

1.一些 (1. some)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to test.

   array要测试的项目列表。

描述 (Description)

If predicate returns true for any item, some returns true. Otherwise it returns false.

如果predicate返回true 任何项目， some返回true 。 否则返回false 。

实作 (Implementation)

const some = (predicate, array) =>array.reduce((acc, value) => acc || predicate(value), false);

用法 (Usage)

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

2.全部 (2. all)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to test.

   array要测试的项目列表。

描述 (Description)

If predicate returns true for every item, all returns true. Otherwise it returns false.

如果predicate返回true为每个项目， all返回true 。 否则返回false 。

实作 (Implementation)

const all = (predicate, array) =>array.reduce((acc, value) => acc && predicate(value), true);

用法 (Usage)

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

3.无 (3. none)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to test.

   array要测试的项目列表。

描述 (Description)

If predicate returns false for every item, none returns true. Otherwise it returns false.

如果predicate对每个项目返回false ，则none返回true 。 否则返回false 。

实作 (Implementation)

const none = (predicate, array) =>array.reduce((acc, value) => !acc && !predicate(value), false);

用法 (Usage)

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

4.地图 (4. map)

参量 (Parameters)

1. transformFunction - Function to run on each element.

   transformFunction在每个元素上运行的函数。

2. array - List of items to transform.

   array要转换的项目列表。

描述 (Description)

Returns a new array of items, each one transformed according to the given transformFunction.

返回一个新的项目数组，每个数组均根据给定的transformFunction 。

实作 (Implementation)

const map = (transformFunction, array) =>array.reduce((newArray, item) => {newArray.push(transformFunction(item));return newArray;}, []);

用法 (Usage)

const double = (x) => x * 2;
const reverseString = (string) =>string.split('').reverse().join('');map(double, [100, 200, 300]);
// [200, 400, 600]map(reverseString, ['Hello World', 'I love map']);
// ['dlroW olleH', 'pam evol I']

5.过滤器 (5. filter)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to filter.

   array要过滤的项目列表。

描述 (Description)

Returns a new array. If predicate returns true, that item is added to the new array. Otherwise that item is excluded from the new array.

返回一个新数组。 如果predicate返回true ，则该项目将添加到新数组中。 否则，该项目将从新数组中排除。

实作 (Implementation)

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

用法 (Usage)

const isEven = (x) => x % 2 === 0;filter(isEven, [1, 2, 3]);
// [2]filter(equals3, [1, 2, 3, 4, 3]);
// [3, 3]

6.拒绝 (6. reject)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to filter.

   array要过滤的项目列表。

描述 (Description)

Just like filter, but with the opposite behavior.

就像filter一样，但是行为相反。

If predicate returns false, that item is added to the new array. Otherwise that item is excluded from the new array.

如果predicate返回false ，则该项目将添加到新数组中。 否则，该项目将从新数组中排除。

实作 (Implementation)

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

用法 (Usage)

const isEven = (x) => x % 2 === 0;reject(isEven, [1, 2, 3]);
// [1, 3]reject(equals3, [1, 2, 3, 4, 3]);
// [1, 2, 4]

7.找到 (7. find)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items to search.

   array要搜索的项目列表。

描述 (Description)

Returns the first element that matches the given predicate. If no element matches then undefined is returned.

返回与给定predicate匹配的第一个元素。 如果没有元素匹配，则返回undefined 。

实作 (Implementation)

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

用法 (Usage)

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

8.分区 (8. partition)

参量 (Parameters)

1. predicate - Function that returns true or false.

   predicate -返回true或false函数。

2. array - List of items.

   array项目列表。

描述 (Description)

"Partitions" or splits an array into two based on the predicate. If predicate returns true, the item goes into list 1. Otherwise the item goes into list 2.

根据predicate “分区”或将数组拆分为两个。 如果predicate返回true ，则该项目进入列表1。否则，该项目进入列表2。

实作 (Implementation)

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

用法 (Usage)

const isEven = (x) => x % 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]]

9.拔 (9. pluck)

参量 (Parameters)

1. key - Key name to pluck from the object

   key -要从对象中选取的键名称

2. array - List of items.

   array项目列表。

描述 (Description)

Plucks the given key off of each item in the array. Returns a new array of these values.

将给定的key从数组中的每个项目中拔出。 返回这些值的新数组。

实作 (Implementation)

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

用法 (Usage)

pluck('name', [{ name: 'Batman' }, { name: 'Robin' }, { name: 'Joker' }]);
// ['Batman', 'Robin', 'Joker']pluck(0, [[1, 2, 3], [4, 5, 6], [7, 8, 9]]);
// [1, 4, 7]

10.扫描 (10. scan)

参量 (Parameters)

1. reducer - Standard reducer function that receives two parameters - the accumulator and current element from the array.

   reducer标准的reducer函数，它接收两个参数-数组中的累加器和当前元素。

2. initialValue - The initial value for the accumulator.

   initialValue累加器的初始值。

3. array - List of items.

   array项目列表。

描述 (Description)

Works just like reduce but instead just the single result, it returns a list of every reduced value on the way to the single result.

就像reduce一样工作，但只是单个结果，它会返回通往单个结果的每个减少值的列表。

实作 (Implementation)

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

用法 (Usage)

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;scan(add, 0, [1, 2, 3, 4, 5, 6]);
// [1, 3, 6, 10, 15, 21] - Every number added from 1-6scan(multiply, 1, [1, 2, 3, 4, 5, 6]);
// [1, 2, 6, 24, 120, 720] - Every number multiplied from 1-6

需要免费辅导吗？ (Want Free Coaching?)

If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

如果您想安排免费电话讨论有关代码，面试，职业或其他方面的前端开发问题，请在Twitter和DM me上关注我 。

After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!

之后，如果您喜欢我们的第一次会议，我们可以讨论一个持续的教练，以帮助您实现前端开发目标！

谢谢阅读 (Thanks for reading)

For more content like this, check out https://yazeedb.com!

有关更多内容，请访问https://yazeedb.com！

Until next time!

直到下一次！

翻译自: https://www.freecodecamp.org/news/10-js-util-functions-in-reduce/

小程序 reduce