本文转载自微信公众号“TianTianUp”，作者TianTianUp。转载本文请联系天天向上公众号。前言大多数编程语言都足够开放，允许程序员以多种方式实现类似的结果。JavaScript也不例外。使用JavaScript，我们经常发现有多种方法可以为类似的结果做事，这有时会让人感到困惑。有些用法比其他替代方法更好。您如何更改JS代码以使其更简单易读？如果您在团队中工作，编写简单的代码很重要。因为您不是在真空中工作，所以您的程序必须易于您的团队成员遵循。每个人都喜欢干净的代码！学习如何尽可能轻松地使用JavaScript是一项宝贵的技能，它肯定会让你成为办公室的宠儿。JS-Tips控制台提示代码执行时间使用console.time和console.timeEnd来确定您的代码有多快（或慢）？这是一个示例：console.time('TEST')//somerandomcodetobetestedconsole.timeEnd('TEST')样式登录以获得自定义输出，我们将像下面这样添加%c，然后将实际的CSS作为第二个参数传递。console.log('%cAWESOME','color:indigo;font-size:100px')Tablesconsole.table当你想记录一组对象时会派上用场。//x,y,zareobjectsconsole.table([x,y,z])stacktracelog如果你想得到被调用函数的stacktrace，你可以使用console.trace。console.time('TEST')//somerandomcodetobetestedconsole.timeEnd('TEST')动态键名超级有用的提示！constkey='dynamic'constobj={dynamic:'hey',[key]:'howdy'}obj.dynamic//heyobj[key]//howdyobj['dynamic']//heyobj.key//howdy的基于回调的API->promise为了让事情更简洁高效，你可以将回调（ourCallbackFn）转化为一个promise是一个功能。//westartwiththisasyncfunctionfoo(){constx=awaitsomething1()consty=awaitsomething2()ourCallbackFn(){//...}}//转换asyncfunctionfoo(){constx=awaitsomething1()consty=awaitsomething2()awaitpromiseCallbackFn()//👀}functionpromiseCallbackFn(){returnnewPromise((resolve,reject)=>{ourCallbackFn((err,data)=>{//👀if(err){reject(err)}else{resolve(data)}})})}忘掉字符串连接，使用模板将字符串连接在一起，使用+运算符来构建有意义的字符串是老式的。此外，将字符串与动态值（或表达式）连接起来可能会导致失败和错误。letname='Charlse';letplace='India';letisPrime=bit=>{return(bit==='P'?'Prime':'Nom-Prime');}//字符串拼接使用+operatorletmessageConcat='Mr.'+name+'isfrom'+place+'.Heisa'+''+isPrime('P')+'member.'模板文字（或模板字符串）允许嵌入表达式。它有独特的语法，字符串必须用回车符包围。模板字符串可以包含动态值的占位符。这些值由美元符号和大括号(${expression})标记。这是一个例子：letname='Charlse';letplace='India';letisPrime=bit=>{return(bit==='P'?'Prime':'Nom-Prime');}//usingtemplatestringletmessageTemplateStr=`${name}先生来自${place}.Heisa${isPrime('P')}member.`console.log(messageTemplateStr);isInteger有一种更简单的方法可以知道一个值是否为整数。JavaScript的NumberAPI为此提供了一个名为isInteger()的方法。这是非常有用的，很高兴知道。letmynum=123;letmynumStr="123";console.log(`${mynum}isanumber?`,Number.isInteger(mynum));console.log(`${mynumStr}isanumber?`,Number.isInteger(mynumStr));Output:123isanumber?true123isanumber?falseValueasNumber你有没有注意到event.target.value总是返回一个字符串类型的值，即使输入框的类型是数字？是的，请看下面的例子。我们有一个简单的数字类型的文本框。这意味着它只接受数字作为输入。它有一个事件处理程序来处理键控事件。在事件处理方法中，我们使用event.target.value来获取值。但是它返回一个字符串类型的值。现在，我将更加头疼如何将其解析为整数。如果输入字段接受浮点数（比如16.56），那么parseFloat()呢？啊，各种混乱和额外的工作！functiontrackChange(event){letvalue=event.target.value;console.log(`is${value}anumber?`,Number.isInteger(value));}改为使用event.target.valueAsNumber。它将值作为数字返回。letvalueAsNumber=event.target.valueAsNumber;console.log(`is${value}anumber?`,Number.isInteger(valueAsNumber));value-as-number&&operator让我们考虑一下我们有一个布尔值和一个函数的情况。letisPrime=true;conststartWatching=()=>{console.log('StartedWatching!');}这段代码太多了，需要检查布尔条件和调用函数。使用(&&)运算符的if(isPrime){startWatching();}简写怎么样？是的，完全避免if语句。凉爽的？isPrime&&startWatching();使用默认值||如果要为变量设置默认值，可以使用||letperson={name:'Jack'};letage=person.age||35;//setsthevalue35ifageisundefinedconsole.log(`Ageof${person.name}是${age}`);但是等等，它有一个问题。如果此人的年龄为0（可能是刚出生的婴儿）。年龄将被计算为35，这是意外行为。输入空值合并运算符(??)。它是一个逻辑运算符，当其左侧操作数为null或未定义时返回其右侧操作数，否则返回其左侧操作数。用??重写上面的代码操作员。letperson={name:'Jack'};letage=person.age??35;//setsthevalue0ifage0,35incaseofundefinedandnullconsole.log(`Ageof${person.name}is${age}`);Randoms生成随机数或从数组中获取随机项是一种非常有用的携带方式。在我的许多项目中，我看到它们多次出现。从数组中获取随机项。letplanets=['水星','火星','金星','地球','海王星','天王星','土星','木星'];letrandomPlanet=行星[Math.floor(Math.random()*行星.length)];console.log('RandomPlanet',randomPlanet);通过指定最小值和最大值从范围中生成随机数。letgetRandom=(min,max)=>{returnMath.round(Math.random()*(max-min)+min);}console.log('Getrandom',getRandom(0,10));函数的默认参数是在JavaScript中，函数参数(params)就像是该函数的局部变量。您可以在调用函数时为这些参数传递值，也可以不传递值。如果您不为param传递值，它将是未定义的，并且可能会导致一些不需要的副作用。在定义函数参数时，有一种简单的方法可以将默认值传递给函数参数。下面是一个示例，我们将默认值Hello传递给问候功能的参数信息。letgreetings=(name,message='Hello,')=>{return`${message}${name}`;}console.log(greetings('Jack'));console.log(greetings('Jack','你好！'））;必需的函数参数扩展默认参数技术，我们可以将参数标记为必需的。首先，定义一个函数来抛出带有错误消息的错误。letisRequired=()=>{thrownewError('Thisisamandatoryparameter.');}然后将函数的默认值分配给所需的参数。请记住，在调用时，当一个值作为参数传递时，默认值将被忽略。但是，如果参数值未定义，将考虑默认值。letgreetings=(name=isRequired(),message='Hello,')=>{return`${message}${name}`;}console.log(greetings());在上面的代码中，name将是未定义的，并将尝试为其设置一个默认值，即isRequired()函数。它会抛出一个错误。错误的逗号运算符当我意识到逗号(,)是一个独立的运算符时，我感到很惊讶，而且从来没有注意到它的存在。我一直在我的代码中使用它，但从未意识到它确实存在。在JavaScript中，逗号(,)运算符用于从左到右计算每个操作数并返回最后一个操作数的值。letcount=1;letret=(count++,count);控制台日志（ret）；在上面的示例中，变量ret的值将为2。类似地，以下代码的输出会将值32记录到控制台。让瓦尔=（12,32）；控制台日志（val）；我们在哪里使用它？有什么猜测吗？逗号(,)运算符最常见的用途是在for循环中提供多个参数。for(vari=0,j=50;i<=50;i++,j--)合并多个对象您可能需要将两个对象合并在一起并创建一个更好的信息对象以供使用。您可以使用扩展运算符...（是的，三个点！）。考虑两个对象，emp和job。lettemp={'id':'E_01','name':'Jack','age':32,'addr':'India'};letjob={'title':'SoftwareDev','location':'巴黎'};使用传播运算符将它们合并为//spreadoperatorletmerged={...emp,...job};console.log('Spreadmerged',merged);还有另一种方法可以执行此合并。使用对象。分配（）。你可以这样做。console.log('Objectassign',Object.assign({},emp,job));结果：合并对象请注意，扩展运算符和Object.assign都执行浅合并。在浅合并中，第一个对象的属性被覆盖以具有与第二个对象相同的属性值。对于深度合并，使用类似的东西：_mergeoflodash。解构将数组元素和对象属性分解为变量的技术称为反结构化。让我们看几个例子。数组在这里，我们有一个表情符号数组，letemojis=['🔥','??','🏆','🍉'];为了解构，我们将使用以下语法。让[火，时钟，，西瓜]=表情符号；这与do,letfire=emojis[0];相同。但具有更大的灵活性。你有没有注意到我只是忽略了中间有空格的奖杯表情符号？那么这会产生什么结果呢？console.log（火，时钟，西瓜）；结果：这里也介绍一下叫restherecharacters的操作。如果你想重组一个数组，将一个或多个项目分配给一个变量，然后将其余项目存储到另一个数组中，你可以使用...rest运算符来实现，如下图所示。让[水果，...休息]=表情符号；控制台日志（休息）；结果：对象和数组一样，我们也可以重构对象。letshape={name:'rect',sides:4,height:300,width:500};打破结构，我们得到一个名字，一些变量，其余的在另一个对象中。let{name,sides,...restObj}=shape;console.log(name,sides);console.log(restObj);结果：获取查询参数window.location对象有一堆有用的方法和属性，我们可以pass这些属性和方法用于获取浏览器URL的协议、主机、端口、域名等信息。我们可以通过这些属性和方法从浏览器的URL中获取协议、主机、端口、域名等信息。我发现非常有用的属性之一是window.location.search搜索属性，它从位置URL返回查询字符串。这是一个示例URL：https:/tapasadhiary.com?project=js。location.search将返回，?project=js。letproject=newURLSearchParams(location.search).get('project');结果：js最后我真的希望你能学到一些新技巧。看看您可以使代码变得多么小和清晰，这很有趣。原文链接：https://mp.weixin.qq.com/s/h6gwuaCQbPUdEonjH5Gjbw
