本文共 8276 字,大约阅读时间需要 27 分钟。
小程序 reduce
The multi-tool strikes again.
多功能工具再次触击。
In 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 for this one, so check that out!
总共我们将要看十个实用函数。 它们在您的项目上非常方便,而且最重要的是,它们使用reduce
来实现! 我从汲取了很多灵感,所以请检查一下!
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to test.
array
要测试的项目列表。
If predicate
returns true
for any item, some
returns true
. Otherwise it returns false
.
如果predicate
返回true
任何项目, some
返回true
。 否则返回false
。
const some = (predicate, array) => array.reduce((acc, value) => acc || predicate(value), false);
const equals3 = (x) => x === 3;some(equals3, [3]); // truesome(equals3, [3, 3, 3]); // truesome(equals3, [1, 2, 3]); // truesome(equals3, [2]); // false
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to test.
array
要测试的项目列表。
If predicate
returns true
for every item, all
returns true
. Otherwise it returns false
.
如果predicate
返回true
为每个项目, all
返回true
。 否则返回false
。
const all = (predicate, array) => array.reduce((acc, value) => acc && predicate(value), true);
const equals3 = (x) => x === 3;all(equals3, [3]); // trueall(equals3, [3, 3, 3]); // trueall(equals3, [1, 2, 3]); // falseall(equals3, [3, 2, 3]; // false
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to test.
array
要测试的项目列表。
If predicate
returns false
for every item, none
returns true
. Otherwise it returns false
.
如果predicate
对每个项目返回false
,则none
返回true
。 否则返回false
。
const none = (predicate, array) => array.reduce((acc, value) => !acc && !predicate(value), false);
const isEven = (x) => x % 2 === 0;none(isEven, [1, 3, 5]); // truenone(isEven, [1, 3, 4]); // falsenone(equals3, [1, 2, 4]); // truenone(equals3, [1, 2, 3]); // false
transformFunction
- Function to run on each element.
transformFunction
在每个元素上运行的函数。
array
- List of items to transform.
array
要转换的项目列表。
Returns a new array of items, each one transformed according to the given transformFunction
.
返回一个新的项目数组,每个数组均根据给定的transformFunction
。
const map = (transformFunction, array) => array.reduce((newArray, item) => { newArray.push(transformFunction(item)); return newArray; }, []);
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']
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to filter.
array
要过滤的项目列表。
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
,则该项目将添加到新数组中。 否则,该项目将从新数组中排除。
const filter = (predicate, array) => array.reduce((newArray, item) => { if (predicate(item) === true) { newArray.push(item); } return newArray; }, []);
const isEven = (x) => x % 2 === 0;filter(isEven, [1, 2, 3]);// [2]filter(equals3, [1, 2, 3, 4, 3]);// [3, 3]
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to filter.
array
要过滤的项目列表。
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
,则该项目将添加到新数组中。 否则,该项目将从新数组中排除。
const reject = (predicate, array) => array.reduce((newArray, item) => { if (predicate(item) === false) { newArray.push(item); } return newArray; }, []);
const isEven = (x) => x % 2 === 0;reject(isEven, [1, 2, 3]);// [1, 3]reject(equals3, [1, 2, 3, 4, 3]);// [1, 2, 4]
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items to search.
array
要搜索的项目列表。
Returns the first element that matches the given predicate
. If no element matches then undefined
is returned.
返回与给定predicate
匹配的第一个元素。 如果没有元素匹配,则返回undefined
。
const find = (predicate, array) => array.reduce((result, item) => { if (result !== undefined) { return result; } if (predicate(item) === true) { return item; } return undefined; }, undefined);
const isEven = (x) => x % 2 === 0;find(isEven, []); // undefinedfind(isEven, [1, 2, 3]); // 2find(isEven, [1, 3, 5]); // undefinedfind(equals3, [1, 2, 3, 4, 3]); // 3find(equals3, [1, 2, 4]); // undefined
predicate
- Function that returns true
or false
.
predicate
-返回true
或false
函数。
array
- List of items.
array
项目列表。
"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。
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; }, [[], []] );
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]]
key
- Key name to pluck from the object
key
-要从对象中选取的键名称
array
- List of items.
array
项目列表。
Plucks the given key
off of each item in the array. Returns a new array of these values.
将给定的key
从数组中的每个项目中拔出。 返回这些值的新数组。
const pluck = (key, array) => array.reduce((values, current) => { values.push(current[key]); return values; }, []);
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]
reducer
- Standard reducer function that receives two parameters - the accumulator and current element from the array.
reducer
标准的reducer函数,它接收两个参数-数组中的累加器和当前元素。
initialValue
- The initial value for the accumulator.
initialValue
累加器的初始值。
array
- List of items.
array
项目列表。
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
一样工作,但只是单个结果,它会返回通往单个结果的每个减少值的列表。
const scan = (reducer, initialValue, array) => { const reducedValues = []; array.reduce((acc, current) => { const newAcc = reducer(acc, current); reducedValues.push(newAcc); return newAcc; }, initialValue); return reducedValues;};
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
If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else .
如果您想安排免费电话讨论有关代码,面试,职业或其他方面的前端开发问题,请 。
After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!
之后,如果您喜欢我们的第一次会议,我们可以讨论一个持续的教练,以帮助您实现前端开发目标!
For more content like this, check out
有关更多内容,请访问
Until next time!
直到下一次!
翻译自:
小程序 reduce
转载地址:http://ajuzd.baihongyu.com/