当前位置: 首页 > 科技观察

编写更简洁的JavaScript代码的八个技巧

时间:2023-03-18 23:14:02 科技观察

在本文中,我们将介绍八种不同的技术来帮助您编写更简洁的JavaScript代码。现在让我们讨论每一种技术,一次一个。纯函数纯函数是在给定相同输入的情况下始终返回相同输出的函数。除了提供的输入之外,它不依赖于也不影响/改变任何外部变量。拥有纯函数使测试更容易,因为它们使测试变得超级容易,因为您始终可以存根/模拟输入并测试您的期望值。我们看下面的例子//outputs['Yu','DongSu']虽然上面的代码看起来不错。不开玩笑。这是因为splitName函数依赖于一个名为name的外部变量,如果其他人开始更改此变量,函数splitName将开始提供不同的输出。使它成为一个不纯的函数,因为我们仍然会对其调用splitName(),但输出会有所不同。让我们把它改成一个纯函数,看看它长什么样子:控制台日志(名称);//outputs['Yu','DongSu']经过以上改动,splitName现在是一个纯函数,因为:它只依赖于输入(nameString输入)。它不会更改/重新分配任何外部变量。更少的或命名的参数在使用函数时,我们经常使用位置参数,必须在函数声明中声明时提供。例如,在call中,我们不能在不提供andarithmeticOp(num1,num2,operator)的情况下提供运算符参数。虽然这适用于此示例,但对于许多功能而言,这会成为一个问题。考虑以下示例:constcreateButton=(title,color,disabled,padding,margin,border,shadow)=>{console.log(title,color,disabled,padding,margin,border,shadow)}查看上面的代码,你已经可以看出,如果我们在调用createButton+的时候想让任何一个参数可选(带默认值),那将是一场灾难,它可能看起来像这样:createButton('苏冬雨儿',undefined/*optionalcolor*/,true,'2px....',undefined/*可选边距*/);可以看到上面的语句看起来一点都不干净。另外,很难从函数调用语句中看出哪个参数对应于函数的哪个参数。所以这是我们可以遵循的做法:如果我们有2个或更少的参数,我们可以将它们保留为位置参数,否则,我们提供一个具有键值对的对象让我们在上面的示例中使用这种技术,看看它是什么样的:constcreateButton=({title,color,disabled,padding,margin,border,shadow})=>{console.log(title,color,disabled,padding,margin,border,shadow)}createButton({title:'苏冬雨儿',禁用:true,阴影:'2px....'});请注意,调用createButton函数的语句现在更加简洁。我们可以很容易地看出键值对中的哪个值对应于函数的参数。耶!对象/数组解构考虑以下javascript示例,我们从对象中获取一些属性并将其分配给它们的各个变量:constuser={name:'Sudongyu',email:'hi@xxx',designation:'SoftwareArchitect',loves:'代码'}constname=user.name;constemail=user.email;constloves=user.loves;在上面的例子中,多次使用这个user.*符号是非常恶心的。这就是对象解构的用武之地。我们可以使用对象解构来改变上面的例子:constuser={name:'Sudongyu',email:'hi@xxx',designation:'SoftwareArchitect',loves:'The代码'}const{name,email,loves}=user;看!好多了。正确的?让我们考虑另一个例子:constgetDetails=()=>{return['xxx','sudonghu','SomeStreet','SomeCity','SomeZip','SomeCountry'];}constdetails=getDetails();constuName=details[0];constuEmail=details[1];constuAddress=`${details[2]},${details[3]},${details[4]},${details[5]}`;constuFirstName=uName.split('')[0];constuLastName=uName.split('')[1];啊。我什至讨厌为上面的例子编写代码。虽然必须要做。你可以看到代码看起来很奇怪而且难以阅读。我们可以使用数组解构来更简洁地写成这样:;}const[uName,uEmail,...uAddressArr]=getDetails();constuAddress=uAddressArr.join(',');const[uFirstName,uLastName]=uName.split('');控制台.log({uFirstName,uLastName,uEmail,uAddress});你可以看到这有多干净!避免硬编码值/***abaaba******/setInterval(()=>{//dosomething},86400000);//这是什么86400000???