小程序 reduce_如何使用Reduce实现JavaScript实用程序功能？

小程序 reduce

When it comes to code in JavaScript, developers found reduce function as one of the toughest concepts to crack. According to Wikipedia, Reduce has multiple names viz. Accumulate, Fold, Compress and Aggregate. These names clearly indicate the meaning & working of reduce function. The idea behind this is to break down a structure into a single value. Hence, Reduce can be defined as a function which converts a list into any data type.

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

例如，您可以通过仅将数组[5,4,3,2,1]减少为值15。 (For example, you can reduce an array [5,4,3,2,1] into the value 15 by just adding them. )

Reduce function keeps developers away from using loop in order to fold a list into a single value.

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

In this blog, you will learn ways to implement well-known functions using reduce as already done by developers in top software development company.

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

我列出了使用reduce函数重新创建的10个JavaScript实用工具函数。 因此，请查看以下这些功能：- (I have listed out 10 JavaScript utility functions recreated using reduce function. So, check out below these functions:-)

• 地图

(

• Map

)

使用参数 (Parameters used)

array (to transform list of items), transform Function (is a function used to run on each element)

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

加工 (Working)

By using the given transformFunction, each element in the given array get transformed and returns new array of items.

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

如何执行？ (How to implement?)

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

	return newArray1;
  }, 
[]
);

用例： (Use case: )

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']

• 拒绝

(

• Reject

)

使用参数 (Parameters used)

array (list of items/values to filter), predicate (function returning true or false value)

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

加工 (Working)

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

如何执行？ (How to implement?)

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

	return newArray;
  }, 
[]
);

用例： (Use case:)

const isEven = (z) => z % 2 === 0;

reject(isEven, [1, 6, 4, 3]);
// [1, 3]

reject(equals4, [4, 2, 4, 3]);
// [2, 3]

• 扫瞄

(

• Scan

)

使用参数 (Parameters used)

array (list of items), reducer (is a function which receives two parameters i.e. accumulator & current element from the list of array )

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

加工 (Working)

Its working is similar to reduce but instead of returning the single value as a result, it returns a list of every reduced value corresponding to the single output.

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

如何执行？ (How to implement?)

const scan = (reducer, initialVal, array) => {
  const reducedValues = [];

  array.reduce((acc, currentval) => {
	const newAcc = reducer(acc, currentval);

	reducedValues.push(newAcc);

	return newAcc;
  }, initialVal);

  return reducedValues;
};

用例： (Use case:)

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]

• 过滤

(

• Filter

)

使用参数 (Parameters used)

array (to filter list of items), predicate (is a function to return false or true value)

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

加工 (Working)

Here, you will get a new array as the output. If the predicate function returns true value then the item will be added to the new array. However, if it returns false then the item will be excluded from the new array.

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

如何执行？ (How to implement?)

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

	return newArray;
  }, 
[
]
);

用例： (Use case: )

const isEven = (y) => y % 2 === 0;

filter(isEven, [3, 2, 5]);
// [2]

filter(equals3, [7, 1, 3, 6, 3]);
// [3, 3]

• 没有

(

• None

)

使用参数 (Parameters used)

array (list items to test), predicate (function to return value true or false)

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

加工 (Working)

Here, none returns true value if predicate returns false value for every item. Else it will return false value for every true value of predicate.

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

如何执行？ (How to implement?)

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

用例： (Use case:)

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

• 划分

(

• Partition

)

使用参数 (Parameters used)

array (contains a list of items), predicate (function returning false or true value)

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

加工 (Working)

It defines the splitting of an array into two based upon the predicate value. If predicate returns a true value then the item will go to list1. Else, it will go to the list2. The method to split the array into various chunks has been used by the modern-day programmers that are associated with the top software development companies. Let’s take a look into the further steps:

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

如何执行？ (How to implement?)

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;
	},
	[
[], []
]
  );

用例： (Use case: )

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]]

• 所有

(

• All

)

使用参数 (Parameters used)

array (to test the list of the items), predicate (is a function to return value true or false)

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

加工 (Working)

On providing an input value, if predicate returns value true then all will return value true. Else, it will return a false value.

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

如何执行？ (How to implement?)

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

用例： (Use case:)

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

• 一些

(

• Some

)

使用参数 (Parameters used)

array (to test the list of items), predicate (is a function to return value true or false)

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

加工 (Working)

For any input value, if predicate returns true, then some will return true. Otherwise, it will return a false value.

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

如何执行？ (How to implement?)

让我们举个例子： (Let’s take an example for it:)

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

用例： (Use case:)

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

• 采摘

(

• Pluck

)

使用参数 (Parameters used)

array (to store value of the items), key (to pluck key name from the object)

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

加工 (Working)

It can pluck the given key off from each item in the array and further returns a new array of the respective values.

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

如何执行？ (How to implement?)

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

	return values3;
  }, 

[]
);

用例： (Use case:)

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]

• 找

(

• Find

)

使用参数 (Parameters used)

array (to search items in the list of array), predicate (function returning false or true value)

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

加工 (Working)

It will return the first element which matches the given predicate and in case if no match is found, then undefined is returned back.

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

如何执行？ (How to implement?)

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

	if (predicate(item) === true) {
  	return item;
	}

	return undefined;
  }, undefined);

用例： (Use case: )

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

最后说明： (Final Note:)

This is how can you implement JavaScript utility functions using reduce in less time. This will definitely aid software developers in saving time as well as their coding efforts. In case you need perfect support for your coding queries, you can contact to expert software development company for your project needs.

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

翻译自: https://habr.com/en/post/476830/

小程序 reduce