你可能不知道：JavaScript 中重要且鲜为人知的功能-js教程-PHP中文网

你可能不知道：JavaScript 中重要且鲜为人知的功能

Linda Hamilton

发布： 2024-10-02 18:17:29

原创

425 人浏览过

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript 是 Web 开发世界的基石之一。即使您已经使用这种语言多年，您可能还没有发现一些高级功能。在本文中，我们将介绍 JavaScript 的 5 个最重要和鲜为人知的功能。

1. 通过可选链实现安全访问 (?.)

在 JavaScript 中获取对象嵌套结构中的值有时会带来错误的风险。如果深度值未定义或为 null，则可能会导致错误。可选链接 (?.) 运算符消除了这个问题。

示例：

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 或未定义 时返回替代值。如果变量没有值或未定义，此运算符对于提供默认值特别有用。

示例：

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

登录后复制

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 调用：

防止服务器过载：不会发送大量请求，使服务器工作更加高效。
减少延迟：用户获得更快的响应。
改善用户体验：用户期望只有当他停止输入时才会出现建议。

示例：

<!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 允许捕获和修改针对对象的操作。此功能对于在对对象执行操作之前定义自定义行为非常有用。

示例：

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 防止重复值

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]

登录后复制

使用 WeakSet 防止重复值

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)

登录后复制