您可能不知道的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中文網其他相關文章！