당신은 모를 수도 있습니다: JavaScript의 중요하면서도 잘 알려지지 않은 기능-JS 튜토리얼-php.cn

당신은 모를 수도 있습니다: JavaScript의 중요하면서도 잘 알려지지 않은 기능

Linda Hamilton

풀어 주다： 2024-10-02 18:17:29

원래의

422명이 탐색했습니다.

Bunları Bilmiyor Olabilirsiniz: JavaScript

JavaScript는 웹 개발 세계의 초석 중 하나입니다. 수년 동안 이 언어를 사용해 왔더라도 일부 고급 기능을 발견하지 못했을 수도 있습니다. 이 기사에서는 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의 nullish coalescing(??) 연산자는 값이 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. 프록시를 이용한 객체 관리

프록시를 사용하면 개체에 대한 작업을 캡처하고 수정할 수 있습니다. 이 기능은 개체에 작업을 수행하기 전에 사용자 정의된 동작을 정의하는 데 유용합니다.

예:

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)

로그인 후 복사

결론

이러한 기능은

JavaScript의 성능과 유연성을 최대한 활용할 수 있게 해주는 도구입니다. 프로젝트에서 이러한 기능을 사용하면 코드의 성능이 향상되고 깨끗하며 지속 가능해집니다.

위 내용은 당신은 모를 수도 있습니다: JavaScript의 중요하면서도 잘 알려지지 않은 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!