主持人 > 博客 > 網絡新聞 > 大多數教程都忽略的 12 個 JavaScript 技巧

大多數教程都忽略的 12 個 JavaScript 技巧

大多數教程都忽略的 12 個 JavaScript 技巧

當我開始學習 JavaScript 時，我做的第一件事就是列出了一些可以幫助我節省時間的技巧。 我從其他程式設計師、不同的網站和手冊中發現了它們。

在本文中，我將向您展示 12 種改進和加速 JavaScript 程式碼的好方法。 在大多數情況下，它們是通用的。

提醒： 對於“Habr”的所有讀者 - 使用“Habr”促銷代碼註冊任何 Skillbox 課程可享受 10 盧布的折扣。

技能箱推薦： 實踐課程 “移動開發者專業版”.

過濾唯一值

陣列

ES6 中引入了 Set 物件類型，以及..., 擴充運算符，我們可以使用它來建立一個僅包含唯一值的新陣列。

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

在正常情況下，需要更多程式碼來執行相同的操作。

此技術適用於包含基本類型的陣列：未定義、null、布林值、字串和數字。 如果您正在使用包含物件、函數或其他數組的數組，則需要不同的方法。

緩存數組的長度（以周期為單位）

循環

當您學習 for 迴圈時，您將遵循標準流程：

for (let i = 0; i < array.length; i++){
  console.log(i);
}

但是，使用此語法時，for 迴圈每次迭代都會重複檢查陣列的長度。

有時這可能很有用，但在大多數情況下，快取數組的長度會更有效，這需要對其進行一次存取。 我們可以透過定義一個長度變數來做到這一點，我們在其中定義變數 i，如下所示：

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

原則上，幾乎與上面相同，但是透過增加循環大小，我們將節省大量時間。

短路額定值（麥卡錫額定值）

條件運算符

三元運算子是編寫簡單（有時不那麼簡單）條件語句的快速有效的方法：

x > 100？ 「100以上」：「100以下」；
x > 100？ (x>200? "200以上": "100-200之間"): "100以下";

但有時即使是三元運算子也比所需的更複雜。 我們可以使用“and”&&和“or”來代替|| 布林運算子以更簡潔的方式計算某些表達式。 它通常被稱為“短路”或“短路額定值”。

Какэтоработает

假設我們只想傳回兩個或多個條件之一。

使用 && 將傳回第一個假值。 如果每個操作數的計算結果均為 true，則將傳回最後計算的表達式。

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

使用|| 將會傳回第一個真值。 如果每個操作數的計算結果為 false，則會傳回最後計算的值。

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

例如1

假設我們想要返回變數的長度，但我們不知道它的類型。

在這種情況下，您可以使用 if/else 來檢查 foo 是否是正確的類型，但此方法可能太長。 所以，還是採取我們的「短路」比較好。

return (foo || []).length;

如果變數 foo 具有合適的長度，則將傳回該長度。 否則我們會得到 0。

例如2

您在存取嵌套物件時遇到問題嗎？ 您可能不知道某個物件或其子屬性之一是否存在，這可能會導致問題。

例如，我們想要存取 this.state 中的 data 屬性，但直到我們的程式返回取得請求後資料才被定義。

根據我們使用它的位置，呼叫 this.state.data 可能會阻止應用程式啟動。 為了解決這個問題，我們可以將其包裝在條件表達式中：

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

更好的選擇是使用“或”運算符。

return (this.state.data || 'Fetching Data');

我們無法更改上面的程式碼以使用&&。 'Fetching Data' && this.state.data 運算子將傳回 this.state.data，無論它是否未定義。

可選鏈條

當嘗試返回樹結構深處的屬性時，人們可能會建議使用可選連結。 那麼，問號符號呢？ 僅當屬性不為 null 時才可用於檢索該屬性。

例如，我們可以重構上面的範例來取得 this.state.data?..()。 也就是說，只有當值不為空時才回傳資料。

或者，如果狀態是否定義很重要，我們可以回傳 this.state?.data。

轉換為布林值

類型轉換

除了普通的布林函數 true 和 false 之外，JavaScript 還將所有其他值視為 true 或 falsy。

除非另有說明，JavaScript 中的所有值都是 true，除了 0、""、null、undefined、NaN，當然還有 false。 後者是虛假的。

我們可以使用 ! 運算子輕鬆地在兩者之間切換，該運算子還將類型轉換為布林值。

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

轉換為字串

類型轉換

從整數到字串的快速轉換可以如下完成。

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

轉換為整數

類型轉換

我們像這樣執行逆變換。

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

此方法也可用於將布林資料型別轉換為常規數值，如下所示：

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

在某些情況下，+ 可能會被解釋為串聯運算子而不是加法運算子。 為了避免這種情況，您應該使用波浪號：~~。 該運算符相當於-n-1。 例如，~15 等於 -16。

連續使用兩個波形符號會否定該操作，因為 - (- - n - 1) - 1 = n + 1 - 1 = n。 換句話說，~-16 等於 15。

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

營運

從 ES7 開始，您可以使用冪運算子 ** 作為冪的簡寫。 這比使用 Math.pow(2, 3) 快得多。 這看起來很簡單，但是這一點包含在技術清單中，因為它並沒有到處提到。

console.log(2 ** 3); // Result: 8

請勿將其與 ^ 符號混淆，後者通常用於求冪。 但在 JavaScript 中，這是 XOR 運算子。

在 ES7 之前，** 捷徑只能用於使用位元左移運算子 << 的以 2 為底的冪：

Math.pow(2, n);
2 << (n - 1);
2**n;

例如，2 << 3 = 16 相當於 2 ** 4 = 16。

浮點數轉整數

操作/型別轉換

如果需要將浮點數轉換為整數，可以使用 Math.floor()、Math.ceil() 或 Math.round()。 但還有一種更快的方法，為此我們使用 |，即 OR 運算子。

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

行為 | 很大程度上取決於您處理的是正數還是負數，因此只有當您對自己所做的事情充滿信心時，此方法才適用。

n | 0 刪除小數點分隔符號之後的所有內容，將浮點數截斷為整數。

您可以使用 ~~ 獲得相同的捨入效果。 強制轉換為整數後，該值保持不變。

刪除尾隨數字

OR 運算子可用於從數字中刪除任意數量的數字。 這意味著我們不需要像這樣轉換類型：

let str = "1553";
Number(str.substring(0, str.length - 1));

相反，我們簡單地寫：

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

自動連結

課程

ES6 箭頭表示法可以在類別方法中使用，並且隱含綁定。 這意味著您可以告別像 this.myMethod = this.myMethod.bind(this) 這樣的重複表達式！

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

陣列修剪

陣列

如果需要從陣列中刪除值，有比 splice() 更快的方法。

例如，如果您知道原始陣列的大小，則可以覆寫其 length 屬性，如下所示：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

但還有另一種方法，而且更快。 如果速度對您來說很重要，那麼我們的選擇如下：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

列印數組的最後一個值

陣列
該技術需要使用 slice() 方法。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

格式化 JSON 程式碼

JSON

您可能已經使用過 JSON.stringify。 您知道它有助於格式化您的 JSON 嗎？

stringify() 方法採用兩個可選參數：一個替換函數（可用於過濾顯示的 JSON）和一個空格值。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

僅此而已，我希望所有這些技術都是有用的。 你還知道哪些技巧呢？ 將它們寫在評論中。

技能箱推薦：

來源： www.habr.com

添加評論