你可能不知道的 JavaScript 功能。第 1 部分

本文将分享一些JavaScript技巧，帮助你更好地理解这门语言的细微之处，并改进你的代码。文章主要面向初级和中级开发者，高级开发者可能会觉得有些枯燥，但欢迎所有人阅读！ ?

别忘了订阅我的Telegram频道，我会在那里分享关于前端开发的有趣文章！ ?

开始吧！

1. 数字分隔符

在数字中，你可以使用 _ 来提高代码的可读性。

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

2. 使用可选链操作符简化 && 和三元运算符

例如，我们想简化以下代码：

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

使用可选链操作符重写代码：

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

可选链操作符使代码更简洁易读。

3. 使用BigInt解决大整数计算问题

不幸的是，JS中超过 Number.MAX_SAFE_INTEGER (9007199254740991) 的数字计算的正确性无法保证，这令人沮丧。

例如：

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

为了计算大数，建议使用BigInt。这将有助于避免计算错误。

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

4. in 运算符的替代方案

为了检查对象中是否存在属性，我们通常使用 in 运算符，但你也可以使用 obj.hasOwnProperty()。

两者都有其缺点：

• in 运算符检查对象中是否存在属性，包括从原型继承的属性。如果你只想检查对象本身的属性，而不是其原型的属性，这可能会导致意外的结果。
• obj.hasOwnProperty() 方法只检查对象本身的属性，不包括从原型继承的属性。但是，如果对象重写了 hasOwnProperty 方法，此方法将无法正常工作。在这种情况下，调用 obj.hasOwnProperty() 可能会导致错误或不正确的结果。

这两种方法都没有考虑可以通过原型链访问的属性。如果你需要检查对象中的属性，包括其原型，你需要使用其他方法，例如 Object.getPrototypeOf() 或 Object.prototype.isPrototypeOf()。

在处理大型对象或嵌套数据结构时，使用 in 和 obj.hasOwnProperty() 可能不方便且效率低下。这可能需要多次检查和方法调用，从而减慢程序的执行速度。

简单的例子：

<code class="language-javascript">// `in` 运算符

const obj = { name: 'John', age: 25 };
console.log('name' in obj); // true
console.log('gender' in obj); // false

// 检查对象原型中的属性
console.log('toString' in obj); // true

// `obj.hasOwnProperty()` 方法
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('gender')); // false

// 检查对象原型中的属性
console.log(obj.hasOwnProperty('toString')); // false</code>

还有一个更方便、更安全的运算符 Object.hasOwn()。

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

5. 使用 # 声明私有属性

过去，为了表示一个字段是私有的，我们习惯在属性名前添加下划线（_）。但现在，我们可以使用 # 来声明真正的私有属性：

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

6. 使用 ?? 代替 ||

使用 ?? 运算符代替 || 来检查运算符左侧的值是否为 null 或 undefined，然后返回右侧的值。

示例：

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

在上面的示例中，如果左侧变量的值不是 null 或 undefined，则 ?? 运算符返回其左侧变量的值。

否则，如果左侧变量的值为 null 或 undefined，则运算符返回右侧变量的值。

7. 字符串转换为数字

许多开发者使用 parseInt() 函数将字符串转换为数字，但是你可以使用 运算符来实现相同的结果，它更简洁：

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

两种方法都有效，但 运算符更简单、更清晰。

8. 舍入数字的简写方法，替代 Math.floor()

与其使用 Math.floor() 函数向下舍入数字，不如使用按位非 ~~ 运算符作为简写：

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

我不建议你使用本文中描述的所有技巧。有些方法可能会损害你的代码，但了解它们很重要。

感谢您阅读本文！我希望您学到了一些有用的东西。敬请期待第二部分！?

以上是你可能不知道的 JavaScript 功能。第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章！