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

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

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

1、忘记字符串连接

使用模板字符串（文字）

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

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

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

2、isInteger

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

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

输出如下：

3、价值作为数字

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

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

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

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

4、AND的简写

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

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

那么，尝试通过AND（&&）运算符使用简写怎么样？是的，避免了if的完全陈述。很酷吧！

5、带有OR的默认值

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

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

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

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

6、随机项

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

从数组中获取随机项，

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

7、函数默认参数

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

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

8、必备的函数参数

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

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

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

9、逗号运算符

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

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

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

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

10、合并多个对象

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

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

使用spread运算符，将它们合并为：

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

输出：

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

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

11、解构

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

数组

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

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

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

输出：

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

输出：

对象

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

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

输出：

12、交换变量

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

13、isArray

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

14、未定义vs空

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

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

undefined与null并不严格相等

15、获取查询参数

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

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

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

输出：js

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