提高代码质量的11个JavaScript核心函数

　　它不在乎你是使用后端还是前端（甚至是宇宙飞船！），JavaScript可以在任何地方使用，因为它是一种非常灵活的语言。它具有核心的函数式编程模式以及类，它与其他类c语言的相似性使每个开发人员都可以轻松地过渡。
　　如果你想提升你的JavaScript技能，我建议你学习、练习和掌握这门语言中以下非常重要的核心函数。你不需要每个函数来解决大多数问题，但在某些情况下，它们可以帮助你避免繁重的工作，而在其他情况下，它们将减少你必须编写的代码量。1。map（）
　　map（）是JavaScript中最重要的函数之一！此外，它也是给学习JavaScript的人带来最大麻烦的一个函数。之所以会这样，是因为这个函数的工作方式来自于大多数开发人员不熟悉的函数式编程。在我们有偏见的大脑看来，这似乎很奇怪，甚至是错误的。
　　函数map（）非常简单。它将自己附加到一个数组，并将每个元素转换为其他元素，从而得到一个新数组。这种转换是通过map括号中提供的匿名函数完成的。
　　这就是地图所做的一切！
　　一开始，map（）的语法可能需要一些时间来适应，但掌握它之后，你将成为使用JavaScript的最好朋友。为什么要使用map（）？
　　例如，假设我们记录了上周每一天喷泉中的水量并将其存储在一个数组中。在周末，您被告知测量工具不够准确，水量比应有的少了3。2升。
　　使用map（）函数，您可以通过以下方式轻松解决此问题：constdailyReadings〔34。2，35。4，40。1，35。2，33。5，36。5，38。7〕；constcorrectedDailyReadingsdailyReadings。map（dayday3。2）；console。log（correctedDailyReadings）；gives〔37。4，38。6，43。3，38。4，36。7，39。7，41。9〕
　　当您从数组创建DOM元素列表时，您可以在React的世界中找到另一个非常实用的示例。这是React中的常见模式，将通过这段代码实现：exportdefault（｛articles｝）｛returnlinks。map（article｛return（｛article。name｝｛article。description｝）；｝）；｝；
　　现在你可以争辩说map（）只不过是for循环的另一种实现，你是对的，但请注意，也许这是你受过面向对象训练的头脑提出了这个论点。2。filter（）
　　filter（）是一个非常有用的JavaScript函数，您可以在许多情况下使用它，因为它根据给定的规则逻辑过滤数组。此规则逻辑将作为匿名函数提供。
　　为了展示filter（）是如何工作的，我们可以重用之前的喷泉示例。假设数组包含喷泉中存储的水量（这次测量工具按预期工作）。现在，我们想知道该量低于36升的频率。这可以使用filter（）函数来实现：constdailyReadings〔34。2，35。4，40。1，35。2，33。5，36。5，38。7〕；constdaysWithLowAmountdailyReadings。filter（day｛returnday36｝）；console。log（Dayswithlowamountofwater：daysWithLowAmount。length）；4console。log（daysWithLowAmount）；〔34。2，35。4，35。2，33。5〕
　　重要的是，您传递给filter（）的匿名函数必须返回一个布尔值：true或false。filter（）函数使用布尔表达式来确定是否应将值插入新生成的数组中。
　　在匿名函数中，您可以实现任意数量的复杂逻辑来过滤数据；您可以读取用户输入、进行任何API调用等，只要最后返回一个布尔值即可。
　　注意：请记住filter（）总是返回一个数组。如果过滤后的数据为空，也是如此。这通常会导致代码片段中出现细微的错误，因为filter（）是这样使用的：constdailyReadings〔34。2，35。4，40。1，35。2，33。5，36。5，38。7〕；constdaysWithCriticalAmountdailyReadings。filter（day｛returnday30｝）；if（daysWithCriticalAmount）｛console。log（Theamountofwaterwascritical）；｝else｛console。log（Theamountofwaterwasnormal）；｝
　　你注意到什么了吗？最后的if条件检查daysWithCriticalAmount这实际上是一个空数组，因为没有一天的水少于30。
　　令人惊讶的是，如果您正赶在截止日期之前并且只想快速实现一个过滤器方法，那么这种错误就经常发生。这段代码的问题在于，尤其是JavaScript（是的，JavaScript很奇怪）在很多方面都是一种不一致的语言。有时事物的真实性就是其中之一。
　　正如您可能知道在JavaScript〔〕true中返回false并且您可能认为上面的代码是正确的。
　　不幸的是，在if条件下，〔〕的计算结果为真！换句话说，永远不会执行else块。
　　解决这个问题非常简单，因为您只需检查结果数组的长度是否大于或等于1。3。reduce（）
　　与本文中的所有其他函数相比，reduce（）正在争夺令人困惑、怪异和复杂的JavaScript函数的第一名。尽管此功能非常重要并且在许多情况下会产生优雅的代码，但许多JavaScript开发人员都避免使用它。他们更喜欢在没有reduce（）帮助的情况下编写代码。
　　原因之一是reduce（）的复杂性。很难理解这个函数的概念和执行。此外，如果你阅读它的描述，你必须重新阅读它几次，而且，如果你读错了，你会怀疑自己（发生在我身上，直到我看到它在行动）。
　　reduce（）函数用于将给定数组减少（很明显不是吗？）为单个值。这可以是数字、字符串、函数、对象或其他任何东西。
　　如果你想使用reduce（）函数来减少数组，你需要通过提供一个函数来提供所需的逻辑。通常，此函数将称为将第一个参数转换为reduce（）的reducer函数。此外，它还包含第二个参数，它是一个起始值，可以是数字、字符串等。函数本身如下所示：array。reduce（reducerFunction，startValue）
　　startValue：传递给reduce（）函数的startValue是您要使用reducerFunction处理的计算的起始值（显而易见。。。）。例如，如果要执行加法，则可以从0开始；如果要执行乘法，则应使用值1。
　　reducerFunction：如前所述，reducer函数用于将数组转换为单个值。它有两个参数：一个累加器和一个存储当前值的变量。
　　累加器只是一个奇特的名称，描述了包含计算结果的变量（就像使用total来求和数组中的所有项）。在reducer函数中，累加器将被初始设置为起始值，然后计算将逐步遍历数组，同时每一步的结果保存在累加器中。
　　reducer函数的第二个参数是currentValue，它将包含数组中特定步骤中给定位置的值。例如，在步骤2中执行reducer函数时，变量currentValue将包含输入数组中的第二个值。
　　有了所有这些信息，我们应该看看下面的示例，它将在reducer函数中添加输入数组中的每个值：constinput〔1，2，3，4〕；constresultinput。reduce（（acc，currentValue）acccurrentValue，0）；console。log（result）；10
　　在第一行中，我们定义了包含我们要添加的所有数字的输入数组。下一行将包含input。reduce（）调用，它将acc的起始值定义为0，因为另外我们应该从0开始以不影响结果。reducer函数body（acc，currentValue）acccurrentValue对当前值和存储在累加器中的值进行简单相加。
　　如果你用for循环做这个加法，它看起来像这样：constinput〔1，2，3，4〕；letresult0；for（leti0；iinput。length；i）｛resultinput〔i〕｝console。log（total）
　　如您所见，简单的for循环示例要长得多，而且不如使用reduce优雅。4。some（）
　　假设您有一组对象，其中包含学生及其在考试中的分数。现在，您想知道班上是否有学生的分数高于90，而不关心是否有一名或多名学生以超过90的成绩通过了该考试。
　　如果您想在JavaScript中执行此操作，您可以使用循环和在找到得分大于90的第一个人后设置为true的变量来解决问题：conststudents〔｛name：Stud1，score：78，｝，｛name：Stud2，score：92｝，｛name：Stud3，score：90｝〕letover90false；for（leti0；istudents。length；i）｛if（students〔i〕。score90）｛over90true；break；｝｝if（over90）｛console。log（Therearestudentswithexceptionalscore！）｝else｛console。log（Unfortunately，nothingisexceptional）｝
　　对我来说，这段代码看起来非常丑陋、冗长或可怕！
　　可以使用前面描述的map（）函数对其进行优化，但解决方案仍然有点笨拙。
　　幸运的是，JavaScript有一个名为some（）的相当简洁的函数，它在核心语言中可用，可以处理数组，并返回一个布尔值。在提供匿名函数的同时，它将过滤输入数组以优雅地解决问题：conststudents〔｛name：Stud1，score：78，｝，｛name：Stud2，score：92｝，｛name：Stud3，score：90｝〕if（students。some（student｛returnstudent。score90｝））｛console。log（Therearestudentswithexceptionalscore！）｝else｛console。log（Unfortunately，nothingisexceptional）｝
　　您可以看到它获得相同的输入并以更优雅的方式产生相同的结果。此外，代码量减少了，可读性也比以前高了很多。5。every（）
　　JavaScript核心语言中已经存在的另一个函数是every（）。此函数将返回一个布尔值（如some（）），但将测试输入数组中的所有项目。为此，您必须（再次）提供一个匿名函数。例如，我们将通过考试成绩达到70分或以上来测试是否每个学生都通过了考试：conststudents〔｛name：Stud1，score：78，｝，｛name：Stud2，score：92｝，｛name：Stud3，score：90｝〕if（students。every（student｛returnstudent。score70｝））｛console。log（Allstudentspassedtheexam！）｝else｛console。log（Unfortunately，notallstudentsdidwell）｝
　　与some（）一样，此函数创建简洁的优雅、可读和可维护的代码。6。includes（）
　　通常，如果我想检查一个数组是否存在子字符串，我会使用indexOf（）。不幸的是，我必须查阅文档才能了解它们的返回值。
　　幸运的是，JavaScript中有一个很好的替代方法可以用来实现这一点：includes（）。用法非常简单，并且区分大小写（我猜你无论如何都希望如此）。有关示例，请参见以下代码片段：constnumbers〔6，5，13，26，48，1〕；console。log（numbers。includes（5））；trueconstnamePaulKnulst；console。log（name。includes（paul））；false，becausefirstletterisinsmallconsole。log（name。includes（Paul））；true，asexpected
　　但是，includes只能比较简单的值而不能比较对象：constuser｛a：6，b：5，c：26｝；console。log（user。includes（b））；doesnotworkbecauseobjectsdoesnothaveanincludesmethod7。shift（）
　　如果你想删除数组的第一个元素shift（）是你应该使用的方法，因为它易于记忆且直观。请注意，您也可以使用splice（稍后查看）来执行此操作，但shift（）更容易：constinput〔1，2，3，4〕；constfirstinput。shift（）；console。log（input）；gives：Array〔2，3，4〕console。log（first）；gives：1
　　正如您在此处看到的那样，shift改变了调用它的数组并返回删除的元素。
　　注意：shift效率极低，如果您正在使用大型数组，则应避免使用。在大型数组上过多调用shift（）可能会破坏您的应用程序！8。unshift（）
　　与删除一个元素的shift（）相比，此函数用于在数组的开头添加一个新元素：constinput〔1，2，3，4〕；input。unshift（0）；console。log（input）；expectedoutput：Array〔0，1，2，3，4〕
　　注意：与shift一样，unshift效率极低，如果您正在处理大型数组，则应避免使用。在大型数组上调用太多unshift（）可能会破坏您的应用程序！9。slice（）
　　在JavaScript中存在一个称为切片的概念，它是一种通过提供起始索引和结束索引来创建包含原始字符串的一部分的新字符串的函数。现在，借助indexOf函数，您可以对输入字符串进行切片以检索搜索到的子字符串：constinputThisisacoolarticleaboutmandatoryJavaScriptfunctionsthateverydevelopershoudknow；conststartinput。indexOf（cool）；constendinput。indexOf（that）；constheadlineinput。slice（start，end）；console。log（headline）；coolarticleaboutmandatoryJavaScriptfunctions
　　请注意，开始索引包含在结果数组中，但结束索引不包含。此外，您还可以看到functions和that之间的空格也没有被分割。
　　此外，切片也可以用于数组：constanimals〔ant，bison，camel，duck，elephant〕；console。log（animals。slice（2））；〔camel，duck，elephant〕console。log（animals。slice（2，4））；Array〔camel，duck〕10。splice（）
　　splice（）听起来像slice（）并且可以与它进行比较，因为这两个函数都从原始数组或字符串创建新的数组或字符串。主要的小但非常重要的区别是splice（）删除、更改或添加元素但修改原始数组。如果您不完全理解深拷贝和引用在JavaScript中的工作原理，原始数组的这种解构可能会导致巨大的问题！
　　以下示例将展示如何使用splice（）：constmonths〔Jan，March，April，June〕；constfebmonths。splice（1，0，Feb）；insertsatindex1console。log（months）；〔Jan，Feb，March，April，June〕console。log（feb）；〔〕constmaymonths。splice（4，1，May）；replaces1elementatindex4console。log（months）；〔Jan，Feb，March，April，May〕console。log（may）；〔June〕
　　你可以在这里看到splice（）操作原始数组。如果您删除一个项目，它也会返回删除的条目，但如果您添加一个条目，则返回数组将为空。11。fill（）
　　最后一个JavaScript函数是fill（），用于将多个项目更改为单个值，甚至将整个数组重置为其初始值。如果你需要这个fill（）可以帮助你避免循环来重置数组的值。此外，该函数可用于用给定值替换数组中的部分或全部条目。
　　您可以在以下示例中看到它是如何工作的：constinput〔1，2，3，4，5，6〕；console。log（input。fill（0，2，4））；〔1，2，0，0，0，0〕console。log（input。fill（5，1））；〔1，5，5，5，5，5〕console。log（input。fill（6））；〔6，6，6，6，6，6〕结论
　　此列表包含大多数JavaScript开发人员在其职业生涯中遇到和使用的函数。虽然很长，但绝不是完整的，因为JavaScript中还有许多次要但非常有用的函数：reverse（）、sort（）、find（）、flat（）、entries（）。我建议您阅读这些函数，因为您随时都会在JavaScript项目中使用它们。
　　此外，只要有可能，你都应该探索核心语言或著名的实用程序库，如lodash，以加深你的JavaScript知识。它将带来巨大的生产力，您将学会创建更清晰、紧凑、可读、可维护和可用的代码！