Javascript 中的展開和休息運算子及其範例

其餘和擴充運算子是 JavaScript 中強大的功能，可讓您更有效地處理陣列、物件和函數參數。它們都使用相同的語法 (...)，但用途不同。

休息操作員 (...)

剩餘運算子用於將所有剩餘元素收集到陣列中。它通常用在函數參數中來處理可變數量的參數。

休息運算符範例：

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10

這裡，...numbers 將傳遞給 sum 函數的所有參數收集到一個名為numbers 的陣列中，然後可以處理。

擴充運算子 (...)

擴充運算子用於將陣列或物件的元素擴展為單一元素或屬性。

擴充運算符範例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

在此範例中，...arr1 和 ...arr2 將 arr1 和 arr2 的元素擴充為新的組合陣列。

概括

• 剩餘運算子：將所有剩餘元素收集到陣列中。
• 擴充運算子：將陣列或物件的元素擴充為單一元素或屬性。

這些運算子對於以乾淨簡潔的方式處理陣列、物件和函數參數非常有用。

.
.
.
.
.

更多關於 Spread 和 Rest 運算子
.
.
.
.
.

當然！讓我們更深入地了解其餘和展開運算符，透過更詳細的解釋和範例來探索它們的概念和各種用例。

休息操作員 (...)

剩餘運算子允許您收集多個元素並將它們捆綁到一個陣列中。它通常在函數中用於處理可變數量的參數或在解構數組或物件時收集“其餘”元素。

使用案例

1. 處理多個函數參數： 當您事先不知道函數將接收多少個參數時，通常會使用剩餘運算子。

   function multiply(factor, ...numbers) {
       return numbers.map(number => number * factor);
   }

   console.log(multiply(2, 1, 2, 3, 4)); 
   // Output: [2, 4, 6, 8]

說明：

• Factor 是第一個參數。
• ...numbers 將剩餘參數收集到陣列 [1, 2, 3, 4] 中。
• 然後，map 函數將每個數字乘以因子 (2)。

1. 解構數組： 解構數組時，可以使用剩餘運算子來收集剩餘元素。

   const [first, second, ...rest] = [10, 20, 30, 40, 50];

   console.log(first);  // Output: 10
   console.log(second); // Output: 20
   console.log(rest);   // Output: [30, 40, 50]

說明：

• 首先獲取值 10。
• 第二個獲取值 20。
• ...rest 將剩餘元素 [30, 40, 50] 收集到一個陣列中。

1. 解構對象： 類似地，剩餘運算子可用於擷取物件中的剩餘屬性。

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

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

說明：

• a和b直接提取出來。
• ...rest 將剩餘屬性（c: 3 和 d: 4）捕獲到一個新物件中。

擴充運算符 (...)

擴充運算子用於將陣列、物件或可迭代物件的元素擴展為單一元素或屬性。它與剩餘運算符相反，對於合併、複製和傳遞元素非常有用。

使用案例

1. 組合數組： 擴充運算子可用於組合或連接陣列。

   const arr1 = [1, 2];
   const arr2 = [3, 4];
   const arr3 = [5, 6];

   const combined = [...arr1, ...arr2, ...arr3];
   console.log(combined); 
   // Output: [1, 2, 3, 4, 5, 6]

說明：

• ...arr1、...arr2 和 ...arr3 將它們的元素分散到組合陣列中。

1. 複製陣列： 您可以使用擴充運算子建立陣列的淺表副本。

   const original = [1, 2, 3];
   const copy = [...original];

   console.log(copy);    // Output: [1, 2, 3]
   console.log(copy === original); // Output: false (different references)

說明：

• ...original 將original 的元素傳播到新的陣列副本中，建立淺副本。

1. 合併物件： 擴充運算子對於合併物件或向現有物件新增屬性非常有用。

   const obj1 = {x: 1, y: 2};
   const obj2 = {y: 3, z: 4};

   const merged = {...obj1, ...obj2};

   console.log(merged); // Output: {x: 1, y: 3, z: 4}

說明：

• ...obj1 將 obj1 的屬性傳播到新物件中。
• ...obj2 然後將其屬性傳播到新物件中，覆寫 obj1 中的 y 屬性。

1. 函數參數： 擴充運算子也可用於將陣列元素作為單獨的參數傳遞給函數。

   function add(a, b, c) {
       return a + b + c;
   }

   const numbers = [1, 2, 3];

   console.log(add(...numbers)); // Output: 6

說明：

• ...numbers 將numbers 陣列的元素分散到各個參數中（a、b、c）。

概括

• 休息運算子 (...):

  • Collects multiple elements into an array or object.
  • Often used in function parameters, array destructuring, or object destructuring.

• Spread Operator (...):

  • Expands or spreads elements from an array, object, or iterable.
  • Useful for merging, copying, and passing elements in a concise manner.

Both operators enhance code readability and maintainability by reducing boilerplate code and providing more flexible ways to handle data structures.
.
.
.
.
.
.
Real world Example
.
.
.
.

Let's consider a real-world scenario where the rest and spread operators are particularly useful. Imagine you are building an e-commerce platform, and you need to manage a shopping cart and process user orders. Here's how you might use the rest and spread operators in this context:

Rest Operator: Managing a Shopping Cart

Suppose you have a function to add items to a user's shopping cart. The function should accept a required item and then any number of optional additional items. You can use the rest operator to handle this:

function addToCart(mainItem, ...additionalItems) {
    const cart = [mainItem, ...additionalItems];
    console.log(`Items in your cart: ${cart.join(', ')}`);
    return cart;
}

// User adds a laptop to the cart, followed by a mouse and keyboard
const userCart = addToCart('Laptop', 'Mouse', 'Keyboard');

// Output: Items in your cart: Laptop, Mouse, Keyboard

Explanation:

• mainItem is a required parameter, which in this case is the 'Laptop'.
• ...additionalItems collects the rest of the items passed to the function ('Mouse' and 'Keyboard') into an array.
• The cart array then combines all these items, and they are logged and returned as the user's cart.

Spread Operator: Processing an Order

Now, let's say you want to process an order and send the user's cart items along with their shipping details to a function that finalizes the order. The spread operator can be used to merge the cart items with the shipping details into a single order object.

const shippingDetails = {
    name: 'John Doe',
    address: '1234 Elm Street',
    city: 'Metropolis',
    postalCode: '12345'
};

function finalizeOrder(cart, shipping) {
    const order = {
        items: [...cart],
        ...shipping,
        orderDate: new Date().toISOString()
    };
    console.log('Order details:', order);
    return order;
}

// Finalizing the order with the user's cart and shipping details
const userOrder = finalizeOrder(userCart, shippingDetails);

// Output: 
// Order details: {
//     items: ['Laptop', 'Mouse', 'Keyboard'],
//     name: 'John Doe',
//     address: '1234 Elm Street',
//     city: 'Metropolis',
//     postalCode: '12345',
//     orderDate: '2024-09-01T12:00:00.000Z'
// }

Explanation:

• ...cart spreads the items in the cart array into the items array inside the order object.
• ...shipping spreads the properties of the shippingDetails object into the order object.
• The orderDate property is added to capture when the order was finalized.

Combining Both Operators

Let's say you want to add a feature where the user can add multiple items to the cart, and the first item is considered a "featured" item with a discount. The rest operator can handle the additional items, and the spread operator can be used to create a new cart with the updated featured item:

function addItemsWithDiscount(featuredItem, ...otherItems) {
    const discountedItem = { ...featuredItem, price: featuredItem.price * 0.9 }; // 10% discount
    return [discountedItem, ...otherItems];
}

const laptop = { name: 'Laptop', price: 1000 };
const mouse = { name: 'Mouse', price: 50 };
const keyboard = { name: 'Keyboard', price: 70 };

const updatedCart = addItemsWithDiscount(laptop, mouse, keyboard);

console.log(updatedCart);
// Output: 
// [
//     { name: 'Laptop', price: 900 }, 
//     { name: 'Mouse', price: 50 }, 
//     { name: 'Keyboard', price: 70 }
// ]

Explanation:

• The featuredItem (the laptop) receives a 10% discount by creating a new object using the spread operator, which copies all properties and then modifies the price.
• ...otherItems collects the additional items (mouse and keyboard) into an array.
• The final updatedCart array combines the discounted featured item with the other items using the spread operator.

Real-World Summary

• Rest Operator: Used to manage dynamic input like adding multiple items to a shopping cart. It gathers remaining arguments or properties into an array or object.
• Spread Operator: Useful for processing and transforming data, such as merging arrays, copying objects, and finalizing orders by combining item details with user information.

These examples demonstrate how the rest and spread operators can simplify code and improve readability in real-world scenarios like managing shopping carts and processing e-commerce orders.

Here's a breakdown of what's happening in your code:

const [first, second, third, ...rest] = [10, 20, 30, 40, 50];

console.log(first);  // Output: 10
console.log(second); // Output: 20
console.log(third);  // Output: 30
console.log(rest);   // Output: [40, 50]

Explanation:

• Destructuring:

  • first is assigned the first element of the array (10).
  • second is assigned the second element of the array (20).
  • third is assigned the third element of the array (30).

• Rest Operator:

  • ...rest collects all the remaining elements of the array after the third element into a new array [40, 50].

Output:

• first: 10
• second: 20
• third: 30
• rest: [40, 50]

This code correctly logs the individual elements first, second, and third, and also captures the remaining elements into the rest array, which contains [40, 50].

Let me know if you have any further questions or if there's anything else you'd like to explore!

以上是Javascript 中的展開和休息運算子及其範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！