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

编写JavaScript代码的8个技巧

时间:2023-03-20 17:36:58 科技观察

编码时需要保持代码整洁,注意编码中使用技巧的积累,注意JavaScript的新特性。1.生成指定范围内的数字有时候需要创建一个一定范围内的数字的数组。例如,在选择生日时。这是最简单的方法。letstart=1900,end=2000;[...newArray(end+1).keys()].slice(start);//[1900,1901,...,2000]//这样也可以,但是大小范围结果不稳定Array.from({length:end-start+1},(_,i)=>start+i);2.使用值数组中的值作为函数的参数有时我们需要先将值放入一个数组中,然后作为参数传递给函数。可以使用ES6语法仅使用扩展运算符(...)从数组中提取值:[arg1,arg2]=>(arg1,arg2)。constparts={first:[0,2],second:[1,3],};["Hello","World","JS","Tricks"].slice(...parts.second);//["World","JS","Tricks"]这个技巧适用于任何函数,请继续看第3条。3.使用值数组中的值作为Math方法的参数。当需要查找数组中某个数的最大值或最小值时,可以这样做://查找元素中y位置最大的值constelementsHeight=[...document.body.children].map(el=>el.getBoundingClientRect().y);Math.max(...elementsHeight);//输出最大值constnumbers=[100,100,-1000,2000,-3000,40000];Math.min(...数字);//-30004。展平嵌套数组Array有一个名为Array.flat的方法,它采用一个参数来指示展平嵌套数组的深度(默认值为1)。但是如果你不知道深度怎么办,你只需要使用Infinity作为参数。还有一个很好的flatMap方法。constarrays=[[10],50,[100,[2000,3000,[40000]]]];arrays.flat(Infinity);//[10,50,100,2000,3000,40000]5.防止代码崩溃,如果代码中有不可预知的行为,后果不可预知,所以需要处理。例如,当你想要获取的属性是undefined或者null时,你会得到一个TypeError错误。如果您的项目代码不支持可选链接,您可以这样做:constfound=[{name:"Alex"}].find(i=>i.name==='Jim');console。log(found.name);//TypeError:Cannotreadproperty'name'ofundefined这样可以避免constfound=[{name:"Alex"}].find(i=>i.name==='Jim')||{};console.log(found.name);//undefined不过要视情况而定,处理小规模的代码是没有问题的。处理它不需要太多代码。6.传递参数的好方法在ES6中,模板字面量可以作为函数的参数,不需要括号。这在格式化或转换文本时非常有用。constmakeList=(raw)=>raw.join().trim().split("\n").map((s,i)=>`${i+1}.${s}`).join("\n");makeList`Hello,WorldHello,World`;//1.Hello//2.World7.像魔术一样交换变量值使用解构赋值语法可以很容易地交换变量。leta="hello";letb="world";//错误的?a=bb=a//{a:'world',b:'world'}//正确的?[a,b]=[b,a];//{a:'world',b:'hello'}8.屏蔽字符串有时我们需要屏蔽部分字符串,当然不仅仅是为了密码。在下面的代码中,通过substr(-3)得到一部分字符串,即从字符串末尾开始3个字符,然后在剩下的位置填上自己喜欢的字符(比如用*)constpassword=“黑客”;password.substr(-3).padStart(password.length,"*");//***kme