مطابقة الأنماط في JavaScript باستخدام انتشار الكائنات: تعزيز تفكيك الكائنات ومعالجتها

            const originalObject = { a: 1, b: 2, c: 3 };
const newObject = { ...originalObject, d: 4 };

console.log(newObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
            

              
                Copy
              
            
          

            const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const mergedObject = { ...object1, ...object2 };

console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
            

              
                Copy
              
            
          

            const person = { name: 'Alice', age: 30, city: 'London' };
const { name, age } = person;

console.log(name); // Output: Alice
console.log(age);  // Output: 30
            

              
                Copy
              
            
          

            const person = { name: 'Alice', age: 30 };
const { name: personName, age: personAge } = person;

console.log(personName); // Output: Alice
console.log(personAge);  // Output: 30
            

              
                Copy
              
            
          

            const product = { name: 'Laptop' };
const { name, price = 999 } = product;

console.log(name);  // Output: Laptop
console.log(price); // Output: 999
            

              
                Copy
              
            
          

            const user = { id: 1, name: 'Bob', email: 'bob@example.com', city: 'New York', country: 'USA' };
const { id, name, ...userDetails } = user;

console.log(id);           // Output: 1
console.log(name);         // Output: Bob
console.log(userDetails);  // Output: { email: 'bob@example.com', city: 'New York', country: 'USA' }
            

              
                Copy
              
            
          

            function MyComponent(props) {
  const { className, style, ...otherProps } = props;

  return (
    <div className={`my-component ${className}`} style={style} {...otherProps}>
      <!-- Component content -->
    </div>
  );
}

// Usage:
<MyComponent className="custom-class" style={{ color: 'blue' }} data-id="123">Content</MyComponent>
            

              
                Copy
              
            
          

            function processRequest(req, res) {
  const { userId, productId, ...data } = req.body;

  // Validate userId and productId
  if (!userId || !productId) {
    return res.status(400).json({ error: 'Missing userId or productId' });
  }

  // Process the remaining data
  processData(userId, productId, data);

  res.status(200).json({ message: 'Request processed successfully' });
}

function processData(userId, productId, data) {
  // Perform data processing logic
  console.log(`Processing data for user ${userId} and product ${productId} with data:`, data);
}

// Example request body:
// { userId: 123, productId: 456, quantity: 2, color: 'red' }
            

              
                Copy
              
            
          

            const defaultConfig = { timeout: 5000, retries: 3, cache: true };

function configure(options) {
  const { timeout, ...customConfig } = options;

  // Use the timeout value
  console.log(`Setting timeout to ${timeout}ms`);

  // Merge customConfig with defaultConfig
  const finalConfig = { ...defaultConfig, ...customConfig };

  return finalConfig;
}

// Example usage:
const config = configure({ timeout: 10000, cache: false, maxConnections: 10 });
console.log(config);
// Output: { timeout: 5000, retries: 3, cache: false, maxConnections: 10 } (timeout is overriden by defaultConfig because `configure` doesn't use it for final config construction)

            

              
                Copy
              
            
          

            const user = { id: 1, name: 'Alice', email: 'alice@example.com', age: 25, city: 'Paris' };

function transform1(user) {
  const { age, ...rest } = user;
  const newAge = age + 5;
  return { ...rest, age: newAge };
}

function transform2(user) {
  const { city, ...rest } = user;
  const newCity = city.toUpperCase();
  return { ...rest, city: newCity };
}

const transformedUser = transform2(transform1(user));
console.log(transformedUser);
// Output: { id: 1, name: 'Alice', email: 'alice@example.com', age: 30, city: 'PARIS' }
            

              
                Copy
              
            
          

            const order = { id: 1, customer: { name: 'Charlie', address: { city: 'Berlin', country: 'Germany' } }, items: [{ id: 101, name: 'Book' }] };

const { customer: { name, address: { city } } } = order;

console.log(name); // Output: Charlie
console.log(city); // Output: Berlin
            

              
                Copy
              
            
          

            const key = 'email';
const user = { name: 'David', email: 'david@example.com' };

const { [key]: userEmail, ...rest } = user;

console.log(userEmail); // Output: david@example.com
console.log(rest); // Output: { name: 'David' }
            

              
                Copy
              
            
          

            const initialState = { data: [], loading: false, error: null };

function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true, error: null };
    case 'FETCH_DATA_SUCCESS':
      const { payload, ...rest } = action;
      return { ...state, data: payload, loading: false };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

            import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    country: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} placeholder="First Name" /><br/>
      <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Last Name" /><br/>
      <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Email" /><br/>
        <select name="country" value={formData.country} onChange={handleChange}>
            <option value="">Select a country</option>
            <option value="USA">United States</option>
            <option value="Canada">Canada</option>
            <option value="UK">United Kingdom</option>
            <option value="Germany">Germany</option>
            <option value="France">France</option>
            <option value="Japan">Japan</option>
            <option value="Brazil">Brazil</option>
        </select><br/>
      <button type="submit">Submit</button>
    </form>
  );
}

            

              
                Copy
              
            
          

            // Example API response (hypothetical music service)
const apiResponse = {
  trackId: "TRK123",
  trackTitle: "Bohemian Rhapsody",
  artistInfo: {
    artistId: "ART456",
    artistName: "Queen",
    genres: ["Rock", "Opera"]
  },
  albumInfo: {
    albumId: "ALB789",
    albumTitle: "A Night at the Opera",
    releaseYear: 1975
  }
};

function normalizeTrackData(apiData) {
  const { trackId, trackTitle, artistInfo: { artistId, artistName, genres }, albumInfo: { albumId, albumTitle, releaseYear } } = apiData;

  return {
    id: trackId,
    title: trackTitle,
    artist: {
      id: artistId,
      name: artistName,
      genres: genres
    },
    album: {
      id: albumId,
      title: albumTitle,
      year: releaseYear
    }
  };
}

const normalizedData = normalizeTrackData(apiResponse);
console.log(normalizedData);
// Output:
// {
//   id: 'TRK123',
//   title: 'Bohemian Rhapsody',
//   artist: { id: 'ART456', name: 'Queen', genres: [ 'Rock', 'Opera' ] },
//   album: { id: 'ALB789', title: 'A Night at the Opera', year: 1975 }
// }

            

              
                Copy