Javascript のスプレッド演算子とレスト演算子と例

残り演算子とスプレッド演算子は JavaScript の強力な機能であり、配列、オブジェクト、関数の引数をより効果的に操作できるようになります。どちらも同じ構文 (...) を使用しますが、異なる目的を果たします。

残りの演算子 (...)

残りの演算子は、残りのすべての要素を配列に収集するために使用されます。これは通常、可変数の引数を処理するために関数パラメーターで使用されます。

残りの演算子の例:

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

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

ここで、...numbers は、sum 関数に渡されたすべての引数を、number という配列に収集し、その後処理できます。

スプレッド演算子 (...)

スプレッド演算子は、配列またはオブジェクトの要素を個々の要素またはプロパティに展開するために使用されます。

スプレッド演算子の例:

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 の要素を新しい結合配列に展開します。

まとめ

• Rest 演算子: 残りの要素をすべて配列に収集します。
• Spread Operator: 配列またはオブジェクトの要素を個々の要素またはプロパティに展開します。

これらの演算子は、配列、オブジェクト、関数の引数をクリーンかつ簡潔な方法で処理するのに非常に役立ちます。

.
.
.
.
.

スプレッド演算子とレスト演算子の詳細
.
.
.
.
.

確かに！残りの演算子とスプレッド演算子をさらに深く掘り下げて、より詳細な説明と例を使用してその概念とさまざまな使用例を探ってみましょう。

残りの演算子 (...)

残り演算子 を使用すると、複数の要素を収集して配列にバンドルできます。これは通常、可変数の引数を処理するため、または配列やオブジェクトを分割するときに要素の「残り」を収集するために関数で使用されます。

使用例

1. 複数の関数の引数の処理: 残り演算子は、関数が受け取る引数の数が事前にわからない場合によく使用されます。

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

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

説明:

• 要素は最初の引数です。
• ...numbers は、残りの引数を配列 [1, 2, 3, 4] に収集します。
• マップ関数は、各数値に係数 (2) を乗算します。

1. 配列の構造化: 配列を分割するときに、rest 演算子を使用して残りの要素を収集できます。

   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. オブジェクトの構造化: 同様に、rest 演算子を使用して、オブジェクト内の残りのプロパティを取得できます。

   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) を新しいオブジェクトにキャプチャします。

スプレッド演算子 (...)

拡散演算子は、配列、オブジェクト、または反復可能要素の要素を個々の要素またはプロパティに展開するために使用されます。これは、rest 演算子の逆であり、要素のマージ、コピー、受け渡しに非常に役立ちます。

使用例

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)

説明:

• ...オリジナルは、オリジナルの要素を新しい配列コピーに拡散し、浅いコピーを作成します。

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 中国語 Web サイトの他の関連記事を参照してください。