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

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

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

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

[[351588]]

1、忘记字符串连接

使用模板字符串(文字)

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

2、isInteger

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出如下:

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

3、价值作为数字

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」
译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

4、AND的简写

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

5、带有OR的默认值

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

6、随机项

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

从数组中获取随机项,

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

7、函数默认参数

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

8、必备的函数参数

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

9、逗号运算符

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

10、合并多个对象

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出:

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

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

11、解构

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

数组

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出:

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出:

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

对象

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出:

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

12、交换变量

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

13、isArray

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

14、未定义vs空

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

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

undefined与null并不严格相等

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

15、获取查询参数

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

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

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

译文:前端大神常用的15个JS小技巧,建议收藏!「渡一教育」

输出:js

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

 

责任编辑:张燕妮 来源: 今日头条
相关推荐

2023-11-26 17:54:07

JavaScript开发

2022-12-22 14:44:06

JavaScript技巧

2022-12-25 16:03:31

JavaScript技巧

2015-11-19 09:36:13

前端程序员jQuery

2021-11-10 18:52:42

SQL技巧优化

2022-04-02 09:56:44

pipPython

2015-01-14 10:26:30

JavaScript编程技巧

2019-12-20 14:32:55

JavaScript函数开发

2021-03-15 08:13:19

JavaScript开发代码

2022-09-05 14:17:48

Javascript技巧

2020-12-14 08:30:02

JavaScript开发代码

2021-01-31 23:56:49

JavaScript开发代码

2024-01-15 17:26:26

JavaScriptWeb开发

2020-06-28 09:42:03

开发者技能工具

2020-09-26 21:50:26

JavaScript代码开发

2020-05-17 16:19:59

JavaScript代码开发

2017-10-30 17:25:11

javascript

2016-05-10 10:16:13

JavaScript技巧

2023-09-04 15:52:07

2023-07-19 15:16:33

远程办公技巧
点赞
收藏

51CTO技术栈公众号