JavaScript有很多单行代码的实用示例，可??以做很多强大的事情，无论您是JavaScript新手还是经验丰富的开发人员，学习新东西总是好的。在今天的文章中，我们将分享一些JavaScript单线，希望能帮助大家解决一些日常开发中遇到的JavaScript问题。我希望这个列表中有一些你还不知道的单行，我希望你能学到一两个技能！1.生成一个范围内的随机数在JavaScript中使用Math.random()函数可以轻松获取随机值。但是一定范围内的随机数呢？没有标准的JavaScript函数。下面的函数可以用来解决这个问题。请注意，最大值包含在范围内，如果要从范围中排除最大值，可以从函数中删除+1。constrandomNumberInRange=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;2.切换布尔值切换布尔值是所有编程书籍中最古老的技巧之一。一个非常基本的编程问题，可以通过许多不同的方式解决。不要使用if语句来确定将布尔值设置为什么，而是使用下面的函数——在我看来，这是最简洁的方法。consttoggle=(value)=>value=!value3。对数组元素进行随机排序您可以使用Math.random()函数以随机顺序对数组元素进行排序。这是一个常见问题。但是，不应使用这种排序来实现完全随机性，也不应为此使用sort()函数。constsortRandom=(arr)=>arr.sort(()=>Math.random()-0.5)4.字符串大写不同于其他流行的编程语言如Python、C#和PHP，JavaScript不允许字符串大写功能。但是，这是一个非常基本的功能，经常使用。只要是字符串，我们就可以在这个函数中输入一个单词或者一个完整的句子。constcapitalize=(str)=>str.charAt(0).toUpperCase()+str.slice(1)5.检查一个变量是否是一个数组有几种方法可以检查一个变量是否是一个数组，但这是我的首选方法-干净且易于理解。constisArray=(arr)=>Array.isArray(arr)6.从URL中提取主机名虽然这在技术上不是单行的，但它仍然是一个非常有用的功能。这对于检查链接是外部链接还是内部链接很有用。基于此，我们可以为某些链接添加不同的行为或样式。此函数还适用于包含端口号或查询字符串的URL。constextractHostname=(url)=>{让主机名=(url.indexOf("//")>-1)?网址。拆分（'/'）[2]：网址。split('/')[0]//移除端口号.hostname=hostname.split(':')[0]//移除querystring.hostname=hostname.split('?')[0]returnhostname}7.获取数组中的唯一值一个非常简单但非常巧妙的技巧，用于从数组中删除所有重复值。这个技巧将我们用作第一个参数的数组转换为Set，然后再转换回数组。constuniqueValues=(arr)=>[...newSet(arr)]8.检查数组中的所有项是否满足某个条件。every方法检查数组中的所有项目是否满足特定条件。此方法将回调作为其唯一参数并返回一个布尔值。提示：如果只需要数组中的一个元素满足某个条件，可以使用some()方法。constisOldEnough=(age)=>age>=18constages=[7,19,12,33,15,49]ages.every(isOldEnough)//结果为假constolderPeople=[39,51,33,65,49]olderPeople.every(isOldEnough)//Resultsintrue9.根据区域设置格式化浮点数格式化浮点数可以通过多种方式完成。但是，如果您正在开发支持多个语言环境的应用程序，格式可能会有所不同，以下一行代码支持为不同语言环境格式化浮点数。提示：如果我们需要支持多个语言环境，我们可以为该语言环境添加第三个参数。constformatFloat=(floatValue,decimals)=>parseFloat(floatValue.toFixed(decimals)).toLocaleString("en-US")10.更新查询字符串例如，当使用过滤器时，更新查询字符串非常有用，这是一个如何使用JavaScript的URLSearchParams接口更新查询字符串的示例。constsearchParams=newURLSearchParams(window.location.search)searchParams.set('key','value')history.replaceState(null,null,'?'+searchParams.toString())请注意传递给URLSearchParams的窗口。location.search将保持当前查询字符串不变。这意味着，在这种情况下，key=value将被添加到当前查询字符串中。如果您想从头开始构建查询字符串，请省略window.location.search参数。11.只允许正数有时，我们希望一个变量只包含正数。除了使用if语句检查数字是否为负数，还可以使用以下一行代码：constgetPositiveNumber=(number)=>Math.max(number,0)可以使用这一行代码代替代码下面显示的片段：Math.max()解决方案更简洁，对吧？12.显示打印对话框下面的代码行将显示打印对话框，如果您想为用户提供一种用户友好的方式来打印您网站上的某个页面，这将很有帮助。constshowPrintDialog=()=>window.print()13.将文本复制到剪贴板将文本复制到剪贴板是一个可以通过多种方式解决的问题。如果你只关心支持现代浏览器，下面的例子应该足够了：constcopyTextToClipboard=async(text)=>{awaitnavigator.clipboard.writeText(text)}这是一个非常干净的解决方案，不依赖于任何DOM元素.请注意，此函数是异步的，因为writeText函数返回一个Promise。然而，如果你想支持像InternetExplorer这样的旧浏览器，你必须走下面的路：这个解决方案依赖于输入字段，而不是以前基于Promise的解决方案。//HTMLCopythetext//JavaScriptconstcopy=()=>{constcopyText=document.querySelector('#input')copyText.select()document.execCommand('copy')}document.querySelector('#copy').addEventListener('click',复制)14.添加将所有值转换为数组我们可以在数组上使用map函数将其所有项转换为某种类型。在示例中，您会看到我们首先将字符串数组转换为数字数组。之后，我们将数字数组转换为布尔值。constarrayToNumbers=(arr)=>arr。map(Number)constnumbers=arrayToNumbers(['0','1','2','3'])constarrayToBooleans=(arr)=>arr。map(Boolean)constbooleans=arrayToBooleans(numbers)15.计算两个日期之间的天数计算两个日期之间的天数。这是开发中经常遇到的事情之一。如果您经常使用JavaScript编程，请使用Math.abs()，日期参数的顺序无关紧要。constdaysBetweenDates=(dateA,dateB)=>{consttimeDifference=Math.abs(dateA.getTime()-dateB.getTime())//秒*小时*毫秒returnMath.floor(timeDifference/(3600*24*1000))}daysBetweenDates(newDate('2020/10/21'),newDate('2020/10/29'))//结果：8daysBetweenDates(newDate('2020/10/21'),newDate('2021/10/29'))//结果：37316。对对象数组进行排序当以特定顺序呈现数据时，了解如何根据特定属性对对象数组进行排序可能很有用，假设我们要按字母表对对象数组进行排序，结果按顺序呈现在页面上。这可以在JavaScript中轻松完成，尽管我们可以编写代码以多种方式对数组进行排序。在所有示例中，我们都使用了JavaScript的排序方法。第一个示例使用箭头函数。constpeople=[{firstName:'Laura',lastName:'Smith'},{firstName:'John',lastName:'Wilson'},{firstName:'Ted',lastName:'Jonhson'}]people.sort((firstEl,secondEl)=>{constproperty='lastName'if(firstEl[property]secondEl[property]){return1}return0})//[{firstName:'Ted',lastName:'Jonhson'},//{firstName:'Laura',lastName:'Smith'},//{firstName:'John',lastName:'Wilson'}]如果你愿意，你也可以重构这个，你可能必须在多个地方使用比较功能。在这种情况下，我建议您使用以下实现，以便您可以重用compareNames函数。constpeople=[{firstName:'Laura',lastName:'Smith'},{firstName:'John',lastName:'Wilson'},{firstName:'Ted',lastName:'Jonhson'}]常量比较名称=(firstEl,secondEl)=>{constproperty='lastName'if(firstEl[property]secondEl[property]){return1}return0}people.sort(compareNames)//[{firstName:'Ted',lastName:'Jonhson'},//{firstName:'Laura',lastName:'Smith'},//{firstName:'John',lastName:'Wilson'}]当然，如标题所示，您甚至可以在一行中完成此操作。尽管如果你有一个包含很多逻辑的比较函数，这很快就会变得混乱。如果比较功能相当简单，我只会选择此实现。constpeople=[{firstName:'Laura',lastName:'Smith'},{firstName:'John',lastName:'Wilson'},{firstName:'Ted',lastName:'Jonhson'}]people.sort((firstEl,secondEl)=>(firstEl['lastName']secondEl['lastName'])?1:0)//[{firstName:'Ted',lastName:'Jonhson'},//{firstName:'Laura',lastName:'Smith'},//{firstName:'John',lastName:'Wilson'}]17.获取数组Intersection获取数组的交集可能是我们经常遇到的开发问题之一，它会让你很头疼。但是没有必要，因为这一切都可以用这个单线来完成——这真的是一件让人头疼的事。constintersection=(a,...arr)=>[...newSet(a)].filter((v)=>arr.every((b)=>b.includes(v)))intersection([1,2,3],[2,3,4,7,8])//[2,3]交点([1,2,3],[2,3,4,7,8],[1,3,9])//[3]请注意，该函数一次可以获取两个以上数组的交集。18.获取一个月中的第几天在没有任何外部库帮助的情况下在JavaScript中处理日期有时会很痛苦。但是您知道吗，有一种干净简单的单行代码可以帮助您获取一个月中的天数？constdaysInMonth=(month,year)=>newDate(year,month,0).getDate()daysInMonth(2,2024)//29daysInMonth(12,2022)//3119，以一种很好的方式交换值交换两个变量的值是你以前可能做过很多次的事情，老式的做法是使用一个临时的第三个变量，如下所示：letpersonA="Laura"letpersonB="John"lettemp=personApersonA=personBpersonB=tempconsole.log(personA)//"John"console.log(personB)//"Laura"但是我们知道在JavaScript中交换两个变量的值的更简单的解决方案吗？查看下面的代码行，实际的交换只发生在一行中。letpersonA="Laura"letpersonB="John"[personA,personB]=[personB,personA]console.log(personA)//'John'console.log(personB)//'Laura'这个解决方案看起来干净多了，不？20.FlatteningArrays有了这个整洁的一行，扁平化数组可能是一个真正挑战的日子已经过去了。constflatten=(arr)=>arr.reduce((a,b)=>(Array.isArray(b)?[...a,...flatten(b)]:[...a,b]),[])flatten([[1,2],[3,4],[5,6]])//[1,2,3,4,5,6]flatten([["一些","text"],"and",["some","more"]])//['some','text','and','some','more']但是有一个更短的方法做到这一点。我们可以在数组上调用flat方法并获得相同的结果。但是，此功能尚未得到完全支持。特别是在一些旧版本的浏览器中，缺乏对这个特性的支持。[[1,2],[3,4],[5,6]].flat()//[1,2,3,4,5,6][["some","text"],"and",["some","more"]].flat()//['some','text','and','some','more']21.用一个空格替换多个空格Whitespace可以很烦人，空白最常见的问题之一是必须处理多个空格。幸运的是，我们可以用一个空格替换它们。constreplaceSpaces=(str)=>str.replace(/\s\s+/g,'')replaceSpaces('Toomanyspaces')//'Toomanyspaces'有时候，我们可能还想替换其他空白字符，例如制表符和换行符。我们也可以用一行中的单个空格替换它们。constreplaceSpaces=(str)=>str.replace(/\s\s+/g,'')replaceSpaces('too\nmany\twhitespaces\rinhere')//'toomanywhitespacesinhere'22,随机对数组的元素进行排序有时需要打乱数组的元素。例如，洗牌时。没有用于执行此操作的标准JavaScript函数。但它可以用非常短但功能强大的代码行来完成。请注意，数组的项目不必是同一类型。constsortRandom=(arr)=>arr.sort(()=>Math.random()-0.5)sortRandom([1,2,3,4,5])//[4,3,2,5,1]sortRandom(["Sometext",2,true,4,94.12])//['Sometext',94.12,2,true,4]23.检查两个对象是否相等比较对象并检查它们是否相等，在大多数情况下，比较对象比仅仅做objectA===objectB要复杂一点。但是，它可以在一行代码中完成。这个函数的美妙之处在于这个函数还可以检查两个以上的对象。constisEqual=(...objects)=>objects.every(obj=>JSON.stringify(obj)===JSON.stringify(objects[0]))isEqual({name:'Frank',age:32},{name:'Frank',age:32})//trueEqual({name:'Frank',age:41},{name:'Frank',age:32})//falseEqual({name:'Frank''',age:32},{name:'Frank',age:32},{name:'Frank',age:32})//trueEqual({name:'Frank',age:32},{name:'Frank',age:32},{name:'Lisa',age:32})//false24.从数组中获取随机项从数组中获取随机项是另一种强大的单行代码，有时可以派上用场的代码。无论您是否试图从充满数字的数组中获取随机值，对象都是两者的组合。constgetRandomItem=arr=>arr[Math.floor(Math.random()*arr.length)]getRandomItem([1,7,9,3,6])//6getRandomItem([{name:"Ted"},{name:"Philip"},{name:"Jack"}])//{name:"Philip"}getRandomItem([{name:"Ted"},1,"Sometext",4,{name:"Jack"}])//'Sometext'25.对字符串进行Slugify如果要生成人类可读的URL，可以使用slugify。slug是代表字符串的规范化版本。大多数时候，标题用于slug。https://mywebsite.com/my-first-blog-post这就是鼻涕虫的样子。my-first-blog-post源自博客标题“我的第一篇博客文章”。constslugify=(str)=>str.toLowerCase().replace(/\s+/g,'-').replace(/[^\w-]+/g,'')slugify('第一篇文章：发生了什么事？')//'the-first-post-what-is-going-on'您可能会一直看到这些URL，因为这是创建人类可读URL的最常见方式。但是你知道你可以用JavaScript中的一行代码对字符串进行slugify吗？
