分享十五条 JavaScript 编程技巧

2023-05-29 0 634

分享十五条 JavaScript 编程技巧

绝大多数C语言都足够多对外开放,以容许开发人员以多种不同形式获得类似于的结论。JavaScript 也是这般,采用 JavaScript,他们一般来说能透过多种不同形式来达至相近的结论,尽管有时候能引致混为一谈。

当中许多用语比其它形式要好,而那些是我要撷取的。我将在责任编辑中细说,我并不认为,您在写作责任编辑时能辨认出,在许多地方性您和我的作法是完全相同的。

1.采用模版数组

采用+操作符堆叠数组来构筑有象征意义的数组,这是落伍的作法。除此之外,将数组与静态值(或函数)相连可能会引致排序或抒发严重错误。

1let name =Charlse;2let place =India;3let isPrime = bit =>{4return (bit ===P? Prime: Nom-Prime);5}678let messageConcat =Mr. + name + is from + place +. He is a+ + isPrime(P)+ member.9拷贝标识符

模版字面上量(或模版数组)容许内嵌函数。它具备独有的句法,该数组要用反标点记号()括出来。模版数组提供更多了能包涵静态值的转义符,以英镑记号和四元组记号(${expression})。

下列是两个模拟它的范例,

1let name =Charlse;2let place =India;3let isPrime = bit =>{ 4return (bit ===P? Prime: Nom-Prime);5}6 78let messageTemplateStr = Mr.${name} is from ${place}. He is a ${isPrime(P)} member.9console.log(messageTemplateStr);10拷贝标识符

2. isInteger

有一类更简约的形式能晓得值与否为有理数。JavaScript 的 Number API 提供更多了名叫 isInteger()的形式来同时实现此目地。这是十分管用的,最合适介绍呵呵。

1let mynum =123;2let mynumStr =”123″;34console.log(${mynum} is a number?, Number.isInteger(mynum));5console.log(${mynumStr} is a number?, Number.isInteger(mynumStr));6拷贝标识符

输出结论:

分享十五条 JavaScript 编程技巧

3.值为数字

您与否曾经注意到,即使输入框的类型为数字,event.target.value仍始终返回数组类型的值?

请参见下面的示例。他们有两个简单的数字类型的文本框。这意味着它仅接受数字作为输入,它具备事件处理程序来处理按键事件。

12拷贝标识符

在事件处理程序中,他们采用event.target.value取出值,但是它返回两个数组类型值。现在,我将不得不将其解析为有理数。如果输入框接受浮点数(例如16.56)怎么办?采用 parseFloat()然后呢?啊,我不得不面对各种各样的困惑和额外的工作!

1function trackChange(event){2letvalue = event.target.value;3 console.log(is ${value} a number?, Number.isInteger(value));4}5复制标识符

请改用event.target.valueAsNumber,它以数字形式返回值。

1let valueAsNumber = event.target.valueAsNumber;2console.log(is ${value} a number?, Number.isInteger(valueAsNumber));3拷贝标识符

分享十五条 JavaScript 编程技巧

4.采用&&操作符化简函数

让他们考虑两个具备布尔值和函数的情况。

1let isPrime = true;2const startWatching =()=>{3console.log(Started Watching!);4}5拷贝标识符

像下面这样,透过检查布尔值来确定与否调用函数,标识符太多了。

1if (isPrime){2 startWatching();3}4拷贝标识符

能否透过 AND(&&)操作符采用简写形式?是的,完全能避免采用 if 语句。酷吧!

1isPrime && startWatching();2拷贝标识符

5.采用操作符处理默认值

如果您想为变量设置默认值,能采用 OR()操作符轻松同时实现。

1let person ={name:Jack};2let age = person.age 35;3console.log(Age of ${person.name} is ${age});4拷贝标识符

便的形式。我已经在我的许多项目中多次看到它们了。

1let planets =[Mercury ,Mars,Venus,Earth,Neptune,Uranus,Saturn,Jupiter];2let randomPlanet = planets[Math.floor(Math.random()* planets.length)];3console.log(Random Planet, randomPlanet);4拷贝标识符

透过指定最小值和最大值,在两个范围内生成两个随机数,

1let getRandom =(min, max)=>{2return Math.round(Math.random()* (max – min)+ min);3}4console.log(Get random, getRandom(0,10));5拷贝标识符

7.函数默认参数

在JavaScript中,函数实参(或形参)就像该函数的局部变量一样。调用函数时,您能传递也能不传递值。如果您不为参数传递值,则该值将是undefined,并且可能会引致许多多余的副作用。

有一类在定义参数时将默认值传递给函数参数的简单形式。在下列示例中,他们将默认值Hello传递给greetings函数的参数message。

1let greetings =(name, message=Hello,)=>{2return${message}${name};3}45console.log(greetings(Jack));6console.log(greetings(Jack,Hola!));78拷贝标识符

8.必需的函数参数

基于默认参数的特性,他们能将参数作为必需参数。首先定义两个函数以采用严重错误消息抛出严重错误,

1let isRequired =()=>{2thrownewError(This is a mandatory parameter.);3}4拷贝标识符

然后将函数作为必需参数的默认值。请记住,在调用函数时如果为参数传递值,那么默认值会被忽略。但是,如果参数值为“undefined”,则默认值会被采用。

1let greetings =(name=isRequired(), message=Hello,)=>{2return${message}${name};3}4console.log(greetings());5拷贝标识符

在上面的标识符中,name将是未定义的,因此将会尝试采用默认值,即 isRequired()函数。它将引发如下所示的严重错误:

分享十五条 JavaScript 编程技巧

9.逗号操作符

当我意识到逗号(,)是两个单独的操作符,并且我此前从未注意到时,我感到很惊讶。我已经在标识符中采用了大量逗号,但是从未意识到它的其它用途。

操作符用于从左到右排序其每个操作数,并返回最后两个操作数的值。

1let count =1;2let ret =(count++, count);3console.log(ret);4拷贝标识符

在上面的示例中,变量ret的值将为2。同理,下面的标识符将在控制台中输出值32记录到控制台中。

1let val =(12,32);2console.log(val);3拷贝标识符

他们在哪里采用它?有什么想法吗?逗号(,)操作符最常见的用语是在 for 循环中提供更多多个参数。

1for (var i =0, j =50; i <=50; i++, j–)2拷贝标识符

10.合并多个对象

您可能需要将两个对象合并在一起,并创建两个更好的、内容更丰富的对象来采用。为此,您能采用扩展操作符…(对的,是三个点!)。

分别考虑 emp 和 job 这两个对象,

1let emp ={ 2id:E01,3name:Jack,4age:32,5addr:India6};7 8let job ={ 9title:Software Dev,10location:Paris11};12拷贝标识符

采用扩展操作符将它们合并为

1let merged ={…emp,…job};2console.log(Spread merged, merged);3拷贝标识符

还有另一类同时实现合并的形式。你能像下面这样采用 Object.assign():

1console.log(Object assign, Object.assign({}, emp, job));2拷贝标识符

输出结论:

分享十五条 JavaScript 编程技巧

注意,扩展操作符和 Object.assign 都执行浅合并。在浅合并中,第两个对象的属性将被第二个对象的完全相同属性值覆盖。

要进行深度合并,能考虑采用 lodash 中的 merge。

11.解构

将数组元素和对象属性分解为变量的技术称为“解构”。让他们看几个范例,

数组

在这里,他们有一系列的表情记号,

1let emojis =[,,,];2拷贝标识符

为介绍构,他们将采用下列句法,

1let [fire, clock,, watermelon]= emojis;2拷贝标识符

这与let fire = emojis [0];完全相同,但具备更大的灵活性。您与否注意到,我只是在奖杯表情记号的位置上采用了空格而忽略了它?那么,这将输出什么呢?

1console.log(fire, clock, watermelon);2拷贝标识符

输出结论:

分享十五条 JavaScript 编程技巧

让我在这里再介绍两个叫做“rest”操作符的东西。如果您想对数组进行解构,从而将两个或多个项目分配给变量并将其余部分暂放在另两个数组中,就能采用…rest来完成,如下所示。

1let [fruit,…rest]= emojis;2console.log(rest);3拷贝标识符

输出结论:

分享十五条 JavaScript 编程技巧

对象

像数组一样,他们也能解构对象。

1let shape ={2 name:rect,3 sides:4,4 height:300,5 width:5006};7拷贝标识符

像下面这样进行解构,他们能把对象的 name 属性和 sides 属性赋值给两个变量,而其余的属性则存放在另两个对象中。

1let {name, sides,…restObj}= shape;2console.log(name, sides);3console.log(restObj);4拷贝标识符

输出结论:

分享十五条 JavaScript 编程技巧

写作有关此主题的更多信息 from here.

12.交换变量

现在,使用他们刚刚学习的解构,变量交换将会变得十分容易。

1let fire =;2let fruit =;34[fruit, fire]= [fire, fruit];5console.log(fire, fruit);6拷贝标识符

13. isArray

确定输入与否为数组的另一类管用形式。

1let emojis =[,,,];2console.log(Array.isArray(emojis));34let obj ={};5console.log(Array.isArray(obj));6拷贝标识符

14. undefined 和 null

undefined指的是还没有给变量定义值,但已经声明了该变量。

null本身是两个空且不存在的值,要将其显式赋值给变量。

undefined和null并不严格相等,

1undefined === null2拷贝标识符

window.location对象具

下面是我辨认出的两个十分管用的属性:

1window.location.search2拷贝标识符

search属性从位置 url 返回查询数组。以这个 url 为例:https://tapasadhiary.com?project = js。location.search将返回?project = js

1let project = new URLSearchParams(location.search).get(project);2拷贝标识符

输出结论:js

JavaScript 的程式设计基本功远远不止那些,我也计划在学到许多新的基本功时,将它们作为示例更新到 GitHub 项目 github.com/atapas/js-t…

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务