服务器之家

服务器之家 > 正文

前端大神常用的15个JavaScript小技巧

时间:2020-11-11 23:02     来源/作者:今日头条

其实大多数编程语言都足够开放,允许程序员用多种方式进行编程,从而获得相似的结果。也是如此。在使用JavaScript的时候,通常我们也会找到许多方法来获得相似的结果,但有时会造成混淆状况的发生。

在这些方法中,其中一些用法比其他方法要好,因此这些是我的最爱,我也会在本文中把这些方法列出来。我相信,你在自己的列表中也会找到这些方法。

前端大神常用的15个JavaScript小技巧

1、忘记字符串连接

使用模板字符串(文字)

一般情况下,我们在构建一个有意义的字符串时,通常会使用+运算符将字符串连接在一起。然而,连接字符串和动态值(或表达式)时,可能会导致一些错误情况的发生。

前端大神常用的15个JavaScript小技巧

模板文字(或模板字符串)允许嵌入表达式。它具有独特的语法,也就是字符串必须用反引号(``)括起来。模板字符串可以包含动态值的占位符。这些可以通过美元符号和大括号(${expression})进行标记。

我们来用这种方法做一个演示:

前端大神常用的15个JavaScript小技巧

2、isInteger

想知道值是否为整数?这里有一种更清晰的方法。

JavaScript的NumberAPI提供了一种被称为isInteger()的方法,以此来了解值是否为整数。这是非常有用的,并且更加容易被注意到。

前端大神常用的15个JavaScript小技巧

输出如下:

前端大神常用的15个JavaScript小技巧

3、价值作为数字

以前你是否注意到,event.target.value即使输入数字类型,也总是返回字符串类型值?

是的,来看下面的示例。我们有一个简单的数字类型的文本框。这意味着它只接受数字的输入。它具有事件处理程序来处理按键事件。

前端大神常用的15个JavaScript小技巧

在事件处理程序方法中,我们取出值时会用到event.target.value。但是它返回的是一个字符串类型值。现在我还要将它解析为一个整数,这有些麻烦。如果输入框接受浮点数(如16.56)怎么办?parseFloat()然后呢?还会有额外的工作和各种各样令人困惑的事情发生!

前端大神常用的15个JavaScript小技巧

使用event.target.valueAsNumber代替。它会以数字形式返回值。

前端大神常用的15个JavaScript小技巧
前端大神常用的15个JavaScript小技巧

4、AND的简写

让我们考虑一个具有布尔值和函数的情况。

前端大神常用的15个JavaScript小技巧

这里的代码太多了,无法检查布尔条件并调用该函数,

前端大神常用的15个JavaScript小技巧

那么,尝试通过AND(&&)运算符使用简写怎么样?是的,避免了if的完全陈述。很酷吧!

前端大神常用的15个JavaScript小技巧

5、带有OR的默认值

你可以通过OR(||)运算符,轻松实现为变量设置默认值的操作。

前端大神常用的15个JavaScript小技巧

但是等等,这是有问题的。如果这个人的年龄是0怎么办(可能是刚出生的婴儿)。年龄将被计算为35(0|| 35 = 35),这属于意料之外的运算行为。

这个时候,可以输入nullishcoalescing operator(??)。它是一个逻辑运算符,当其左侧操作数为null或者undefined时,返回其右侧操作数,否则返回其左侧操作数。

要使用??运算符重写以上代码,

前端大神常用的15个JavaScript小技巧

6、随机项

生成随机数或从数组中获取随机项都是随手可得且非常有用的方法。这些方法已经在我的项目中出现过很多次了。

从数组中获取随机项,

前端大神常用的15个JavaScript小技巧

通过一个指定了最小值和最大值的范围来生成一个随机数:

前端大神常用的15个JavaScript小技巧

7、函数默认参数

在JavaScript中,函数参数(或参数)类似于这个函数的局部变量。在调用函数时,你既可以传递这些值,也可以选择不传递。如果你不传递参数的值,那么它将是undefined的状态,并且可能会导致一些其他不必要的状况出现。

有一种简单的方法,可以在定义参数时将默认值传递给函数参数。这里举的例子是,我们将默认值Hello传递给greetings函数的参数的message。

前端大神常用的15个JavaScript小技巧

8、必备的函数参数

扩展默认参数技术,我们可以将参数标记为必需。首先定义一个函数,用错误消息抛出错误,

前端大神常用的15个JavaScript小技巧

然后将功能分配为所需参数的默认值。请记住,在调用时为参数传递值时,将忽略默认值。但是,如果参数值为,则考虑默认值undefined。

前端大神常用的15个JavaScript小技巧

在上面的代码中,name会是undefined状态,并且会试着为其设置默认值,即isRequired()函数。它将引发一个错误——

前端大神常用的15个JavaScript小技巧

9、逗号运算符

当我意识到逗号(,)是一个单独的运算符并且从未被人注意到时,我感到非常惊讶。我已经在代码中使用很多次了,但从未意识到它如此真实的存在。

在JavaScript中,comma(,)运算符用于从左到右计算其每个操作数,并返回最后一个操作数的值。

前端大神常用的15个JavaScript小技巧

在上面的示例中,变量的值为ret2。与实例类似,以下代码的输出将值32记录到控制台中。

前端大神常用的15个JavaScript小技巧

我们在哪里使用它?有什么想法吗?comma(,)运算符最常见的用法就是在for循环中提供多个参数。

前端大神常用的15个JavaScript小技巧

10、合并多个对象

你可能需要将两个对象合并在一起,并创建一个更好的信息对象进行使用。你也可以使用(...)点差运算符进行同样的操作。(是的,三个点!)

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

前端大神常用的15个JavaScript小技巧

使用spread运算符,将它们合并为:

前端大神常用的15个JavaScript小技巧

还有另一种执行此合并的方法。使用Object.assign()。你还可以这样做:

前端大神常用的15个JavaScript小技巧

输出:

前端大神常用的15个JavaScript小技巧

要注意,spread运算符和Object.assign都要执行浅合并。在浅表合并中,第一个对象的属性将被与第二个对象相同的属性值覆盖。

如果要进行深度合并,请使用lodash中_merge之类的方法。

11、解构

将数组元素和对象属性分解为变量的技术,被称为destructuring。让我们来看几个例子,

数组

在这里,我们有一系列的表情符号,

前端大神常用的15个JavaScript小技巧

为了进行解构,我们将使用以下语法,

前端大神常用的15个JavaScript小技巧

与执行相同,letfire = emojis[0];但具有更大的灵活性。你有没有注意到,我用一个空白的区域替换了原有的奖杯表情符号?那么,这将输出什么呢?

前端大神常用的15个JavaScript小技巧

输出:

前端大神常用的15个JavaScript小技巧

再介绍一下rest操作符。如果要对数组进行解构,以便要将一个或多个项目分配给变量,并将其余部分放在另一个数组中,就可以使用如下所示的...rest方法完成此操作。

前端大神常用的15个JavaScript小技巧

输出:

前端大神常用的15个JavaScript小技巧

对象

像数组一样,我们也可以解构对象。

前端大神常用的15个JavaScript小技巧

像这样进行解构,我们就获得了名称,在一组变量的两边,并且其余部分在另一个对象中。

前端大神常用的15个JavaScript小技巧

输出:

前端大神常用的15个JavaScript小技巧

12、交换变量

现在运用我们刚刚学过的destructuring概念,就变得非常简单了。

前端大神常用的15个JavaScript小技巧

13、isArray

确定输入的是否为数组,还有另一个有用的方法。

前端大神常用的15个JavaScript小技巧

14、未定义vs空

undefined是一个已经声明,但变量未被定义的值。

null本身是一个空的且不存在的值,必须明确地分配给变量。

undefined与null并不严格相等

前端大神常用的15个JavaScript小技巧

15、获取查询参数

window.location对象具有许多实用的方法和属性。使用这些属性和方法,我们可以从浏览器URL中获取有关协议,主机,端口,域等的信息。

我发现其中一个非常有用的特性是,

前端大神常用的15个JavaScript小技巧

Location.search属性从位置URL返回查询字符串。我们可以使用另一个有用的被称为URLSearchParams的接口,以及location.search获取查询参数的值。

前端大神常用的15个JavaScript小技巧

输出:js

今天知识分享就先到这里了,以后我们还会提供更多编程知识和编程技巧,希望大家继续关注并支持我们的文章

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
返回顶部