解锁JavaScript的未来：深入探讨属性模式匹配

            
function handleApiResponse(response) {
  if (response && typeof response === 'object') {
    if (response.status === 'success' && response.data) {
      if (Array.isArray(response.data.users) && response.data.users.length > 0) {
        console.log(`Processing ${response.data.users.length} users.`);
        // ... logic to process users
      } else {
        console.log('Request successful, but no users found.');
      }
    } else if (response.status === 'error') {
      if (response.error && response.error.code === 404) {
        console.error('Error: The requested resource was not found.');
      } else if (response.error && response.error.code >= 500) {
        console.error(`A server error occurred: ${response.error.message}`);
      } else {
        console.error('An unknown error occurred.');
      }
    } else if (response.status === 'pending') {
      console.log('The request is still pending. Please wait.');
    } else {
      console.warn('Received an unrecognized response structure.');
    }
  } else {
    console.error('Invalid response format received.');
  }
}

            

              
                Copy
              
            
          

            
function handleApiResponseWithPatternMatching(response) {
  match (response) {
    case { status: 'success', data: { users: [firstUser, ...rest] } }:
      console.log(`Processing ${1 + rest.length} users.`);
      // ... logic to process users
      break;

    case { status: 'success' }:
      console.log('Request successful, but no users found or data is in an unexpected format.');
      break;

    case { status: 'error', error: { code: 404 } }:
      console.error('Error: The requested resource was not found.');
      break;

    case { status: 'error', error: { code: as c, message: as msg } } if (c >= 500):
      console.error(`A server error occurred (${c}): ${msg}`);
      break;

    case { status: 'error' }:
      console.error('An unknown error occurred.');
      break;

    case { status: 'pending' }:
      console.log('The request is still pending. Please wait.');
      break;

    default:
      console.error('Invalid or unrecognized response format received.');
      break;
  }
}

            

              
                Copy
              
            
          

            
const user = {
  id: 'user-123',
  role: 'admin',
  preferences: {
    theme: 'dark',
    language: 'en'
  }
};

match (user) {
  // Match the role and bind the id to a new variable 'userId'
  case { role: 'admin', id: as userId }:
    console.log(`Admin user detected with ID: ${userId}`);
    // 'userId' is now 'user-123'
    break;

  // Using shorthand similar to object destructuring
  case { role: 'editor', id }:
    console.log(`Editor user detected with ID: ${id}`);
    break;

  default:
    console.log('User is not a privileged user.');
    break;
}

            

              
                Copy
              
            
          

            
function getPrimaryContact(data) {
  match (data) {
    // Match a deeply nested email property
    case { user: { contacts: { email: as primaryEmail } } }:
      console.log(`Primary email found: ${primaryEmail}`);
      break;

    // Match if the 'contacts' is an array with at least one item
    case { user: { contacts: [firstContact, ...rest] } } if (firstContact.type === 'email'):
      console.log(`First contact email is: ${firstContact.value}`);
      break;

    default:
      console.log('No primary contact information available in the expected format.');
      break;
  }
}

getPrimaryContact({ user: { contacts: { email: 'test@example.com' } } });
getPrimaryContact({ user: { contacts: [{ type: 'email', value: 'info@example.com' }, { type: 'phone', value: '123' }] } });

            

              
                Copy
              
            
          

            
function processTransaction(tx) {
  match (tx) {
    case { type: 'purchase', amount } if (amount > 1000):
      console.log(`High-value purchase of ${amount} requires fraud check.`);
      break;

    case { type: 'purchase' }:
      console.log('Standard purchase processed.');
      break;

    case { type: 'refund', originalTx: { date: as txDate } } if (isOlderThan30Days(txDate)):
      console.log('Refund request is outside the allowable 30-day window.');
      break;

    case { type: 'refund' }:
      console.log('Refund processed.');
      break;

    default:
      console.log('Unknown transaction type.');
      break;
  }
}

            

              
                Copy
              
            
          

            
function logUserAndForwardData(event) {
  match (event) {
    case { type: 'user_login', timestamp, userId, ...restOfData }:
      console.log(`User ${userId} logged in at ${new Date(timestamp).toISOString()}`);
      // Forward the rest of the data to another service
      analyticsService.track('login', restOfData);
      break;

    case { type: 'user_logout', userId, ...rest }:
      console.log(`User ${userId} logged out.`);
      // The 'rest' object will contain any other properties on the event
      break;
      
    default:
      // Handle other event types
      break;
  }
}

            

              
                Copy
              
            
          

            
// State object could look like:
// { status: 'loading' }
// { status: 'success', data: [...] }
// { status: 'error', error: { message: '...' } }

function DataDisplay({ state }) {
  // The match expression can return a value (like JSX)
  return match (state) {
    case { status: 'loading' }:
      return <Spinner />;

    case { status: 'success', data }:
      return <DataTable items={data} />;

    case { status: 'error', error: { message } }:
      return <ErrorDisplay message={message} />;

    default:
      return <p>Please click the button to fetch data.</p>;
  };
}

            

              
                Copy
              
            
          

            
function handleSystemEvent(event) {
  match (event) {
    case { type: 'payment', payload: { method: 'credit_card', amount } }:
      processCreditCardPayment(amount, event.payload);
      break;

    case { type: 'payment', payload: { method: 'paypal', transactionId } }:
      verifyPaypalPayment(transactionId);
      break;

    case { type: 'notification', payload: { recipient, message } } if (recipient.startsWith('sms:')):
      sendSmsNotification(recipient, message);
      break;

    case { type: 'notification', payload: { recipient, message } } if (recipient.includes('@')):
      sendEmailNotification(recipient, message);
      break;
      
    default:
      logUnhandledEvent(event.type);
      break;
  }
}

            

              
                Copy
              
            
          

            
function initializeApp(config) {
  console.log('Initializing application...');
  match (config) {
    case { mode: 'production', api: { url: apiUrl }, logging: { level: 'error' } }:
      configureForProduction(apiUrl, 'error');
      break;

    case { mode: 'development', api: { url: apiUrl, mock: true } }:
      configureForDevelopment(apiUrl, true);
      break;
      
    case { mode: 'development', api: { url } }:
      configureForDevelopment(url, false);
      break;

    default:
      throw new Error('Invalid or incomplete configuration provided.');
  }
}

            

              
                Copy