15 优雅的 JavaScript 个技巧

1. 有条件地向对象添加属性我们可以使用展开运算符号( ... )来有条件地向 JS 对象快速添加属性。

2.检查属性是否存在对象中

可以使用 in 关键字来检查 JavaScript 对象中是否存在某个属性。

3.对象中的动态属性名称

使用动态键设置对象属性很简单。只需使用 ['key name'] 来添加属性:

同样的技巧也可用于使用动态键引用对象属性：

4. 使用动态键进行对象解构

我们知道在对象解构时，可以使用 : 来对解构的属性进行重命名。但，你是否知道键名是动态的时，也可以解构对象的属性？

现在，我们用动态键来解构属性：

5. 空值合并 ?? 操作符

当我们想检查一个变量是否为 null 或 undefined 时， ?? 操作符很有用。当它的左侧操作数为 null 或 undefined 时，它返回右侧的操作数，否则返回其左侧的操作数。

6.可选链 ?.

还可以使用如下函数可选链：

7. 使用 !! 操作符

!! 运算符可用于将表达式的结果快速转换为布尔值( true 或 false ):

8. 字符串和整数转换

使用 + 操作符将字符串快速转换为数字:

要将数字快速转换为字符串，也可以使用 + 操作符，后面跟着一个空字符串:

这些类型转换非常方便，但它们的清晰度和代码可读性较差。所以实际开发，需要慎重的选择使用。

9. 检查数组中的假值

大家应该都用过数组方法： filter 、 some 、 every ，这些方法可以配合 Boolean 方法来测试真假值。

等价于：

10. 扁平化数组

在原型 Array 上有一个方法 flat ，可以从一个数组的数组中制作一个单一的数组。

你也可以定义一个深度级别，指定一个嵌套的数组结构应该被扁平化的深度。例如：

11.Object.entries

大多数开发人员使用 Object.keys 方法来迭代对象。此方法仅返回对象键的数组，而不返回值。我们可以使用 Object.entries 来获取键和值。

为了迭代一个对象，我们可以执行以下操作：

上述两种方法都返回相同的结果，但 Object.entries 获取键值对更容易。

12.replaceAll 方法

在 JS 中，要将所有出现的字符串替换为另一个字符串，我们需要使用如下所示的正则表达式：

但是在 ES12 中，一个名为 replaceAll 的新方法被添加到 String.prototype 中，它用另一个字符串值替换所有出现的字符串。

13.数字分隔符

可以使用下划线作为数字分隔符，这样可以方便地计算数字中0的个数。

下划线分隔符也可以用于BigInt数字，如下例所示

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符 && 、 || 、 ?? 和赋值运算符 = 组合而成。

检查 a 的值是否为真，如果为真，那么更新 a 的值。使用逻辑或 || 操作符也可以做同样的事情。

使用空值合并操作符 ?? :

注意： ?? 操作符只检查 null 或 undefined 的值。