JavaScript 空值合并函数参数：默认参数的增强

            function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, Guest!
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!

            

              
                Copy
              
            
          

            function greet(name) {
  name = name ?? 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, !
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(0); // Output: Hello, 0!

            

              
                Copy
              
            
          

            function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet();    // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(null); // Output: Hello, null!

            

              
                Copy
              
            
          

            function greet(name) {
  name ??= 'Guest';
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet('');    // Output: Hello, !
greet(null);  // Output: Hello, Guest!
greet(undefined); // Output: Hello, Guest!
greet(0); // Output: Hello, 0!

            

              
                Copy
              
            
          

            function processData(data, options = {}) {
  const timeout = options.timeout ?? 5000; // Default timeout of 5 seconds
  const maxRetries = options.maxRetries ?? 3; // Default maximum retries of 3
  const debugMode = options.debugMode ?? false; // Default debug mode is off

  console.log(`Timeout: ${timeout}ms, Max Retries: ${maxRetries}, Debug Mode: ${debugMode}`);
  // ... (Data processing logic)
}

processData({ name: 'Example' }); // Output: Timeout: 5000ms, Max Retries: 3, Debug Mode: false
processData({ name: 'Example' }, { timeout: 10000 }); // Output: Timeout: 10000ms, Max Retries: 3, Debug Mode: false
processData({ name: 'Example' }, { timeout: 0, maxRetries: 5, debugMode: true }); // Output: Timeout: 0ms, Max Retries: 5, Debug Mode: true

            

              
                Copy
              
            
          

            const translations = {
  en: {
    greeting: 'Hello, {name}!'
  },
  fr: {
    greeting: 'Bonjour, {name} !'
  }
};

function translate(key, language = 'en', params = {}) {
  const translation = translations[language]?.[key] ?? translations['en'][key] ?? 'Translation not found';
  
  return translation.replace(/{(\w+)}/g, (_, placeholder) => params[placeholder] ?? '');
}

console.log(translate('greeting', 'en', { name: 'Alice' })); // Output: Hello, Alice!
console.log(translate('greeting', 'fr', { name: 'Alice' })); // Output: Bonjour, Alice !
console.log(translate('greeting', 'de', { name: 'Alice' })); // Output: Hello, Alice! (falls back to English)
console.log(translate('nonExistentKey', 'en')); // Output: Translation not found (falls back to default message)

            

              
                Copy
              
            
          

            async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();

    const userName = data.name ?? 'Unknown User';
    const userEmail = data.email ?? 'No email provided';
    const userAvatar = data.avatar_url ?? '/default-avatar.png';

    console.log(`User Name: ${userName}, Email: ${userEmail}, Avatar: ${userAvatar}`);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

// Assuming the API might return data like this:
// { name: 'Bob', email: 'bob@example.com' }
// { name: 'Charlie' }
// { email: null }

fetchUserData(123); // Output: User Name: Bob, Email: bob@example.com, Avatar: /default-avatar.png
fetchUserData(456); // Output: User Name: Charlie, Email: No email provided, Avatar: /default-avatar.png

            

              
                Copy
              
            
          

            const featureFlags = {
  darkModeEnabled: true,
  newDashboardEnabled: false
};

function isFeatureEnabled(featureName) {
  const isEnabled = featureFlags[featureName] ?? false;
  return isEnabled;
}

if (isFeatureEnabled('darkModeEnabled')) {
  console.log('Dark mode is enabled!');
}

if (isFeatureEnabled('newDashboardEnabled')) {
  console.log('New dashboard is enabled!');
} else {
  console.log('Using the old dashboard.');
}

            

              
                Copy
              
            
          

            function showMap(latitude, longitude) {
  const defaultLatitude = 40.7128; // New York City
  const defaultLongitude = -74.0060;

  const lat = latitude ?? defaultLatitude;
  const lon = longitude ?? defaultLongitude;

  console.log(`Showing map at: Latitude ${lat}, Longitude ${lon}`);
  // Assume showMapOnUI(lat, lon) exists and renders map
}

showMap(34.0522, -118.2437); // Shows LA coordinates
showMap(null, null); // Shows NYC coordinates
showMap(undefined, undefined); // Shows NYC coordinates

            

              
                Copy