这些是什么？
- 这些是JavaScript的
higher order functions。 - 高阶函数可以定义为其他功能内部的功能。
- 这些功能用于转换
Array并返回新的Array作为结果。
我们将用于所有示例的数组
const arr = [10, 40, 20, 50, 80, 30];
地图（ ）
-
遍历数组的每个值并执行指定的任务。
-
它采用回调功能并返回结果
让我们将+10添加到数组中的每个元素
function addTEN(element) {
return element + 10;
}
console.log(arr.map(addTEN)); // [20,50,30,60,90,40]
这可能是您第一次看到有人这样使用map。
好吧，这种方法称为使用anonymous arrow functions的写作图。
const res = arr.map((val) => val + 10);
console.log(res); // [20,50,30,60,90,40]
筛选（ ）
顾名思义，
过滤器什么？
它过滤了给定的谓词或条件（函数）的数组的元素并返回相同的元素。
它也采用callback函数
让我们过滤所有大于或等于50
的元素
const result = arr.filter((val) => val >= 50);
console.log(result); // [50,80]
，或者我们可以像这样写
const result = arr.filter(function isGreaterThanHalf(val) {
return val >= 50;
});
console.log(result); // [50,80]
减少（ ）
它实际上没有减少任何东西！
名称本身非常令人困惑。
那是什么减少？
在我们必须采用whole array并从该数组中获得single element的结果。
喜欢
- 在数组中找到每个元素的总和
- 找到最大或最小的元素 所有这些都导致一个值。
在我们跳入代码之前，我们将在不使用
reduce或非功能方式的情况下实现上述示例之一。
function findSum(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) sum += arr[i];
return sum;
}
/* Two things to learn from above code
1. Single Statement does not require any curly braces {}
2. That += is same as sum = sum + arr[i];``
GREAT RIGHT?
*/
console.log(findSum(arr)); // 230
现在，我们如何转换上述逻辑并编写
reduce函数？ （更容易的方式）。
reduce()功能采用两个参数。
-
callback(collector,currentValue)1.1collector-这是将存储最终值的变量。 1.2currentValue-迭代的当前值。 - 收集器的初始价值
const output = arr.reduce(function (collector, current) {
collector = collector + current;
return collector;
}, 0); // this zero(0) is the initial value for our sum to be stored in.
当您Google Google一些解决方案时，您可能会在stackoverflow上看到此类示例，大多数人都没有理解，只是复制了代码。
const output = arr.reduce((col, cur) => (col += cur), 0);
让我们使用redain（）在数组中找到最大值
const output = arr.reduce(function (maximum, current) {
if (current > maximum) maximum = current;
return maximum;
}, 0);
console.log(output); // 80
注意：我们将第二个参数或
。maximum的初始值作为0，因为我们假设array没有任何negative整数，否则我们将将first元素作为maximum。
最复杂的aesthetic编写同一示例的方法将为
const output = arr.reduce((max, cur) => (cur > max ? (max = cur) : max), 0);
console.log(output); // 80
现实生活中的示例使用地图，过滤和减少
对于more complex示例，我们正在使用此array，看起来像是来自API的数据。
const apiData = [
{ name: "Gautam Anand", age: 51, education: "Graduate", isActive: true },
{
name: "Ram Kumar Sharma",
age: 23,
education: "Never Went to School",
isActive: false,
},
{
name: "Harshal Jain",
age: 51,
education: "Graduate",
isActive: true,
},
{
name: "Siddhart Singh",
age: 40,
education: "Post Graduate",
isActive: false,
},
];
找到一个列表以获取Apidata的所有名字
地图（）棘手的问题
const list = apiData.map((user) => user.name.split(" ")[0]);
console.log(list); // [ 'Gautam', 'Ram', 'Harshal', 'Siddhart' ]
split(" ")方法将列表分为各个部分或数组找到一个空间
因此，该名称成为像This ['Gautam','Anand']一样的数组，为了访问其第一个元素，我们添加了[0]。
降低（）棘手的问题
写减少功能，以使我们应该获得所有年龄和事件的发生。
// Output:
{ 23: 1, 51: 2, 40: 1 }
这是一个非常好的问题
const output = apiData.reduce((collector, current) => {
// checking if the key already exists
if (collector[current.age]) {
// incrementing the value
collector[current.age]++;
} else {
// creating the key first time
collector[current.age] = 1;
}
// returning the collector
return collector;
}, {}); // taking the initial value as {} to add key values into it.
console.log(output);
我认为这些评论是非常自我解释的。如果您在这里遇到困难，请尝试在IDE中运行相同的操作。
链式过滤器（）和map（）
让我们看一个最后一个示例，我们必须找到活跃的人的所有名称。
让我们创建一个过滤器（）
const result = apiData.filter((user) => user.isActive === true); // or just user.isActive
console.log(results);
这将为我们提供Objects的Array，其中包含所有活跃用户而不是Names
// OUTPUT:
[
{
name: "Gautam Anand",
age: 51,
education: "Graduate",
isActive: true,
},
{
name: "Harshal Jain",
age: 51,
education: "Graduate",
isActive: true,
},
];
要获取名称，我们将使用map()链接filter()。
const result = apiData.filter((user) => user.isActive).map((user) => user.name);
console.log(result); // [ 'Gautam Anand', 'Harshal Jain' ]
就是这样阅读的，如果您喜欢阅读直到这里，请给它一个。
。