JavaScript のスプレッド演算子とレスト演算子をマスターする

JavaScript のスプレッド演算子とレスト演算子

spread 演算子と rest 演算子はどちらも 3 つのドット (...) で表され、ES6 で導入された JavaScript の多用途機能です。これらは同じ構文を共有しますが、異なる目的を果たします。スプレッド演算子は要素の展開に使用され、レスト演算子は要素の収集に使用されます。

---

1.スプレッド演算子

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

A.配列での拡散

スプレッド演算子は、配列要素のコピー、連結、または受け渡しに使用できます。

例: 配列のコピー

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

例: 配列の連結

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

例: 要素を関数に渡す

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

B.オブジェクト内に拡散

スプレッド演算子を使用して、オブジェクトをコピーまたは結合できます。

例: オブジェクトのコピー

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

例: オブジェクトの結合

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }

---

2.レストオペレーター

rest 演算子は、複数の要素を 1 つの配列またはオブジェクトに収集します。これは、関数のパラメーターまたは代入の構造化でよく使用されます。

A.関数パラメーターでの Rest の使用

残りの演算子は、無限の数の引数を配列に収集できます。

例: 引数の収集

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

B.配列の構造化での Rest の使用

残りの演算子は、配列の構造化操作で残りの要素を収集します。

例: 配列の構造化

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

C.オブジェクトの分割に REST を使用する

rest 演算子は、オブジェクトの構造化操作で残りのプロパティを収集します。

例: オブジェクトの構造化

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

---

3.スプレッド演算子とレスト演算子の主な違い

Aspect	Spread Operator	Rest Operator
Purpose	Expands elements into individual items	Collects items into a single entity
Use Cases	Copying, merging, passing elements	Collecting function arguments, destructuring
Data Types	Arrays, Objects, Iterables	Arrays, Objects

アスペクト

---

スプレッド演算子

レスト オペレーター 目的

要素を個々の項目に展開します アイテムを 1 つのエンティティに収集します 使用例 要素のコピー、結合、受け渡し 関数の引数を収集し、構造化する データ型

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

配列、オブジェクト、反復可能 配列、オブジェクト

4.実践例

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

---

A.配列要素の交換

• B.レストとスプレッドの組み合わせ
5.概要

Spread Operator (...): 配列、オブジェクト、または反復可能オブジェクトを個々の要素に展開します。

Rest Operator (...)

: 複数の要素を配列またはオブジェクトに収集します。 どちらの演算子も、特に配列、オブジェクト、関数パラメーターを操作する場合に、JavaScript コードをより簡潔かつ柔軟にします。 こんにちは、アバイ・シン・カタヤットです! 私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript のスプレッド演算子とレスト演算子をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。