首頁 > web前端 > js教程 > 你可能不知道:JavaScript 中重要且鮮為人知的功能

你可能不知道:JavaScript 中重要且鮮為人知的功能

Linda Hamilton
發布: 2024-10-02 18:17:29
原創
430 人瀏覽過

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript 是 Web 開發世界的基石之一。即使您已經使用這種語言多年,您可能還沒有發現一些高級功能。在本文中,我們將介紹 JavaScript 的 5 個最重要且鮮為人知的功能。

1. 透過可選鏈實現安全存取 (?.)

在 JavaScript 中取得物件嵌套結構中的值有時會帶來錯誤的風險。如果深度值未定義或為 null,則可能會導致錯誤。可選連結 (?.) 運算子消除了這個問題。

範例:

1

2

3

4

5

6

7

8

9

const user = {

  name: 'John',

  address: {

    city: 'New York'

  }

};

 

console.log(user.address?.city); // 'New York'

console.log(user.address?.zipcode); // undefined, hata vermez

登入後複製

2. 空值合併 (??)

JavaScript 中的 空值合併 (??) 運算子用於在值為 null 或未定義 時傳回替代值。如果變數沒有值或未定義,此運算子對於提供預設值特別有用。

範例:

1

2

3

let x = 0;

let y = x ?? 42; // 0 döner, çünkü 0 null veya undefined değildir

console.log(y);

登入後複製

1

2

3

4

5

6

7

function getConfig(config) {

    return config ?? { timeout: 1000, retries: 3 };

}

 

let userConfig = null;

let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 }

console.log(finalConfig);

登入後複製

3. 通過去抖動提高性能

去抖動是一種確保函數在給定時間段內僅運行一次的技術。 這對於用戶互動中頻繁觸發的事件(例如打字、滾動)特別有用。 去抖動,通常用於在使用者完成某些操作後啟動一個操作(例如 API 呼叫)

當使用者在搜尋輸入欄位中鍵入時,去抖功能不會在每次按鍵時都進行API 調用,而是確保僅在使用者停止鍵入時才進行API 呼叫:

  • 防止伺服器過載:不會發送大量請求,使伺服器工作更有效率。

  • 減少延遲:使用者獲得更快的回應。

  • 改善使用者體驗:使用者期望只有當他停止輸入時才會出現建議。

範例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Debounce Örneği</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

        }

        #searchInput {

            padding: 10px;

            width: 300px;

            font-size: 16px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

        #result {

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <h1>Arama Örneği</h1>

    <input type="text" id="searchInput"/>

    <div id="result"></div>

 

    <script>

        // Debounce fonksiyonu

        function debounce(func, delay) {

            let timeoutId;

            return function(...args) {

                clearTimeout(timeoutId);  // Önceki zamanlayıcıyı temizle

                timeoutId = setTimeout(() => func.apply(this, args), delay);  // Yeni bir zamanlayıcı ayarla

            };

        }

 

        const search = debounce((query) => {

            console.log(`Searching for ${query}`);

            // Burada bir API çağrısı yapabilirsiniz

            document.getElementById('result').innerText = `Sonuçlar için arama yapılıyor: ${query}`;

        }, 300);

 

        // Input olayını dinleme

        document.getElementById('searchInput').addEventListener('input', (event) => {

            search(event.target.value);

        });

    </script>

</body>

</html>

登入後複製

4. 使用代理進行物件管理

Proxy 允許捕獲和修改針對物件的操作。此功能對於在對物件執行操作之前定義自訂行為非常有用。

範例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

const target = {

  message: 'Hello'

};

 

const handler = {

  get: function(obj, prop) {

    if (prop in obj) {

      return obj[prop];

    } else {

      return `Property ${prop} does not exist`;

    }

  }

};

 

const proxy = new Proxy(target, handler);

 

console.log(proxy.message); // Hello

console.log(proxy.nonExistent); // Property nonExistent does not exist

登入後複製

5.用Set和WeakSet防止重複值

使用這兩種結構可以避免重複值。展示如何使用這兩種結構的範例:

使用 Set 防止重複值

1

2

3

4

const numbers = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 9];

const uniqueNumbers = [...new Set(numbers)];

 

console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

登入後複製

使用 Wea​​lSet 來防止重複值

1

2

3

4

5

6

7

8

9

10

11

12

const uniqueObjects = new WeakSet();

 

const objA = { name: 'Alice' };

const objB = { name: 'Bob' };

const objC = objB; // Aynı referans

 

// Değer ekleme

uniqueObjects.add(objA);

uniqueObjects.add(objB);

uniqueObjects.add(objC); // objB'nin referansı olduğu için bu eklenmeyecek

 

console.log(uniqueObjects); // WeakSet { ... } (objA ve objB ile gösterir)

登入後複製

結論

這些功能將使您能夠充分利用 JavaScript 的強大功能和靈活性。您可以在專案中使用這些功能,以確保您的程式碼更有效率、更乾淨、更永續。

以上是你可能不知道:JavaScript 中重要且鮮為人知的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板