学习如何使用最强大的 JavaScript 函数

​今天你将学习如何使用**最强大的**JavaScript函数。数组归约“Array.reduce是最强大的

JavaScriptFunction.

时期。

”reduce有什么作用？为何如此强大？这是reduce的技术定义......Atotype.reduce()reduce()方法对数组的每个元素执行（您提供的）reducer函数，从而产生单个输出值。如果你问我的话，这没什么帮助，所以让我们边做边学1.求所有数字的总和（使用reduce）[3,2.1,5,8].reduce((total,number)=>total+number,0)//loop1:0+3//loop2:3+2.1//loop3:5.1+5//loop4:10.1+8//returns18.12.求所有相乘数的总和[3,2.1,5,8].reduce((total,number)=>total*number,1)如图所示，将数组中的所有数字相加或相乘非常容易。但是，

-我说过，reduce是所有JS中最强大的函数。假设我们有3、4、10和60。假设我们想要获得一些值。或者，更具体地说，我们想要filter这些值，并且只返回小于10的值。通常，我们可以简单地使用该filter函数，只返回小于10的数字。3.使用reduce进行Array.Filter[3,4,10,60].filter(number=>number<10)好吧，使用reduce——我们可以做同样的事情。[3,4,10,60].reduce((list,number)=>

number<10

?[...list,number]

:list,[])拉拉，我们用reduce替换了过滤器-很酷，但说实话。这仍然不能证明reduce它是所有JavaScript中最强大的功能。如果我告诉你，我们可以继续沿着这条路走，并使用reduce替换JavaScript中的几乎所有数组函数，会怎么样？4.

重新创建Array.some使用Array.reduce[3,4,10,50].some(number=>number<50)//returnstrue(Wehavesomenumbersinthearrayarelessthan50)使用reduce，我们只需将初始值设置为false。如果条件已经为真，那么我们返回该条件。如果条件尚不成立，那么我们检查当前数字是否满足我们的条件。[3,4,10,50].reduce((condition,number)=>

condition===true

?condition

:number<50,false)请注意，这次我们以bool(false)作为初始值，而不是使用数字或数组。我们现在已经求和、相乘、过滤并重新创建了一些（也称为使用reduce有条件地检查数组上的某些内容）。我们还可以继续Array.every使用using替换该函数，但由于这与替换usingArray.reduce类似，因此我们也可以轻松地做到这一点。Array.someArray.reduce5.Array.join4.使用

怎么样Array.reduce？替换Array.join为Array.reduce['truck','car','people'].join('-')//"truck-car-people"使用Array.reduce我们可以编写以下代码['truck','car','people'].reduce((text,word)=>`${text}-${word}`,'')//"-truck-car-people"请注意，输出的前面有一个破折号。作为函数的第一个参数接受的回调函数Array.reduce接受更多参数。我们可以使用第三个接受的参数来跟踪我们index的reduce函数['truck','car','people'].reduce((text,word,index)=>

index===0

?word

:`${text}-${word}`,'')//"truck-car-people"设置第三个参数后，这个reduce函数现在将按照原始Array.join函数的方式运行至此，我们已经使用reduce进行替换了。Array.map数组过滤器数组.every，数组.some数组连接6.使用Reduce进行Array.concat那么连接呢？在哪里可以将“1”、“2”和“3”的数组与另一个数组连接起来？[1,2,3].concat(['hey','world','mars'])//[1,2,3,'hey','world','mars']您将如何连接或组合数组reduce？[[1,2,3],['hey','world','mars']].reduce(

(list,array)=>[...list,...array],[])//[1,2,3,'hey,'world','mars']使用组合数组的好处Array.reduce是我们可以“连接”任意数量的数组。简单地说，通过传入更多数组，我们将使用reduce自动组合（也称为连接）它们。这样，我们就复制了Array.concat使用Array.reduce让我们再看几个例子。首先，让我们创建一些人。letsarah={name:'sarah',email:'sarah@',id:1}lettim={name:'tim',email:'tim@',id:2}letlen={name:'len',email:'len@',id:3}7.使用按姓名对人员进行分组Array.reduce当我们按名字对人进行分组时我们想要的示例people.len//GetsLen//{name:'len',email:'len@',id:3}people.sarah//Getssarah//{name:'sarah',email:'sarah@',id:1}使用reduce按姓名对人员进行分组将reduce函数的初始值设置为一个对象构建一个对象，其中关键是人的名字（[]）该值为person对象（[]:person）示例（这不起作用）letpeople=[sarah,tim,len].reduce((people,person)=>{

[]:person,

...people},{})在上面的例子中我们会得到一个错误未捕获的语法错误：意外的标记“：”每当我们使用简写函数返回一个对象时，我们需要将其括在括号中将返回对象的方括号括在圆括号中以修复错误letpeople=[sarah,tim,len].reduce((people,person)=>({

[]:person,

...people}),{})啦啦，我们现在有一个人员对象，其中人员按姓名分组如果我们去，people.len我们会得到lenpeople.len//{name:'len',email:'len@',id:3}如果我们去的话people.sarah我们会得到莎拉people.sarah//{name:'sarah',email:'sarah@',id:1}如果我们去的话people.tim我们会得到蒂姆people.tim//{name:'tim',email:'tim@',id:2}如果我们想要我们所有的people？//people{

sarah:{name:'sarah',email:'sarah@',id:1},

tim:{name:'tim',email:'tim@',id:2},

len:{name:'len',email:'len@',id:3},}8.使用Reduce按给定键提取值数组更重要的是，如果我们只想获取人员的姓名怎么办？letnames=[sarah,tim,len].reduce((names,person)=>[

...names,

],[])//['sarah','tim','len']如果我们只想获取人们的电子邮件怎么办？letemails=[sarah,tim,len].reduce((emails,person)=>[

...emails,

person.email],[])//['sarah@','tim@','len@']9.使用Reduce展平多层嵌套数组更重要的是，如果我们有一个嵌套数组的数组怎么办？letlist_of_arrays=[

['sub_one','sub_two','sub_three'],

[

['nested_sub_one','nested_sub_two'],

['nested_sub_three','nested_sub_four']

],

'one',

'two',

'three']让我们使用数组列表，当然还可以使用reducelist_of_arrays.reduce((flattened,item)=>{

if(Array.isArray(item)===false){

return[...flattened,item]

}

if(Array.isArray(item)&&Array.isArray(item[0])){

return[

...flattened,

....item.reduced((flatten,nested_list)=>[...flatten,...nested_list,[])

]

]

}

return[...flattened,...item]},[])啦啦，我们已经扁平化了多层嵌套数组的列表。输出["sub_one","sub_two","sub_three","nested_sub_one","nested_sub_two","nested_sub_three","nested_sub_four","one","two","three"]笔记：我们只处理最多3层深度的嵌套子数组，但是您当然可以在该函数上花费更多时间，并使用递归来非常简单地使用reduce来展平无限嵌套层深的数组。更强大的Reduce用例好吧，现在让我们深入研究一些更强大但不常用的用例Array.reduce。10.在字符串上应用格式化程序我将从一系列字符串开始。letstrings=['cool-link','helloworldofjavascript','goodbye,itsbeenswell']接下来让我们创建一个formatters.

通常，我将这些称为过滤器-但它们并不是真正的过滤器。他们只是格式化字符串。这些格式化程序实际上是回调函数。首先，我们将创建一个破折号到空格格式化程序（用空格替换破折号）。将使用正则表达式来实现此格式化程序。letdashesToSpaces=str=>str.replace(/-/g,'')接下来，我们将创建一个大写字符串格式化程序。letcapitalize=str=>`${str[0].toUpperCase()}${str.slice(1)}`然后，我们将创建一个字符串限制器格式化程序。如果字符串大于给定长度，则用三个点替换该长度限制之后的字符。letlimiter=str=>str.length>10?`${str.slice(0,10)}...`:strformatters最后，我们将使用所有字符串格式化程序创建一个数组。letformatters=[dashesToSpaces,capitalize,limiter]请记住，我们有字符串数组。letstrings=['cool-link','helloworldofjavascript','goodbye,itsbeenswell']我们的目标：我们的目标是将格式化程序数组中的每个格式化程序应用到字符串数组中的每个字符串上。使用reduce，我们可以简单地这样做！strings.reduce((list,str)=>[

formatters.reduce((string,format)=>format(string),str),

...list

],[])_就像这样，我们使用reduce在字符串数组上应用格式化程序数组。_原始字符串数组['cool-link','helloworldofjavascript','goodbye,itsbeenswell']输出（使用reduce应用字符串格式化程序后）["Goodbye,i...","Helloworl...","Coollink"]11.按房间对学生进行分组（使用reduce）首先我们创建一些学生letstudents=[

{name:'Sally',room:'A'},

{name:'tim',room:'A'},

{name:'nick',room:'B'},

{name:'rick',room:'C'},

{name:'sarah',room:'B'},

{name:'pam',room:'C'}]我们想按学生的房间对他们进行分组所以我们要做的就是使用students.reduce.students.reduce((class_rooms,student)=>({}),{})请注意，我们在再次隐式返回的对象周围使用了括号。当我们使用简写函数返回一个对象时，我们必须使用({})语法-如果我们尝试直接返回一个对象而不进行包装，()我们将收到错误。接下来，我们要使用学生房间作为钥匙：students.reduce((rooms,student)=>({

...rooms,

[student.room]:rooms[student.room]

?[...rooms[student.room],student]

:[student]}),{})现在，我们的学生按房间/班级分组。{

A:[{name:'sally',room:'A'},{name:'tim',room:'A'}],

B:[{name:'nick',room:'B'},{name:'sarah',room:'B'}],

C:[{name:'rick',room:'C'},{name:'pam',room:'C'}],}我们已经成功地按学生的房间对学生进行了分组-这就是我们按归约进行分组的方式。这就是我对reduce的了解。我想最大的收获是，reduce是一种超级方法-确实是如此！使用reduce可以做任何其他数组方法可以做的事情。Array.filter.map.filter.forEach您可以使用单个reduce函数来完成相同的目标。如果您需要按键对一大堆对象进行分组，请使用reduce。如果您需要提取与给定键相关的值？使用reduce。如果您需要应用多个过滤器，但又不想通过多次迭代同一数组来提高时间复杂度-请使用reduce。如果您想展平嵌套数组的数组，其中每个嵌套数组可能有更多嵌套数组，而每个嵌套数组也可能没有任何嵌套数组？使用reduce。如果你需要对一些数字进行求和、乘以一些数字、减去总和或进行任何类型的算术——reduce会再次起作用。如果需要组合一些数组怎么办？使用reduce。如果您需要组合一些对象怎么办？使用reduce。如果您想拥有一种方法，您知道它可以完成所有工作，并且让您感觉作为软件工程师更加强大和高效，该怎么办？使用reduce！在我看来，forEach是JavaScript生态系统中最被高估的方法，reduce是JS生态系统中最被低估的方法。作为最后一个例子，让我们以这个最后的例子来说明reduce有多牛。[{name:'CleanCodeStudio'},{belief:'Simplify!'},{should_follow:'Si,senor!'}].reduce((last