クイックヒント：JavaScriptでスプレッドオペレーターを使用する方法

このチュートリアルでは、JavaScriptの拡張オペレーターのさまざまな用途と、拡張オペレーターと残留演算子の主な違いについて説明します。

JavaScript拡張オペレーターは3つのドット（...）で表され、ES6で導入されています。コレクションと配列の要素を単一の要素に拡張できます。

拡張演算子を使用して、配列とオブジェクトを作成およびクローンし、アレイを関数パラメーターとして渡すこと、配列の複製を削除するなどです。

キーポイント

JavaScript拡張オペレーターは、3つのドット（...）で導入されました。配列とオブジェクトを作成およびクローンするために使用したり、アレイを関数パラメーターとして渡したり、配列の複製を削除したりすることができます。
拡張オペレーターを使用して、アレイとオブジェクトをクローンし、配列を連結し、ノ​​デリストを配列に変換し、アレイ内の複製を削除できます。ただし、浅いコピーのみを実行することに注意することが重要です。つまり、トップレベルの要素または属性のみをコピーすることを意味します。配列またはオブジェクトに他の配列またはオブジェクトが含まれている場合、それらの配列またはオブジェクトは、値ではなく参照によってコピーされます。
拡張オペレーターは残りの演算子とは異なりますが、どちらも3つのドット（...）と同じ構文を使用しています。残りの演算子は、関数のパラメーターリストで使用できます。これは、この関数が未定義数のパラメーターを受け入れ、配列として処理できることを示します。

grammar

拡張オペレーターは、反復可能なオブジェクトにのみ使用できます。それは、反復可能なオブジェクトの直前であり、分離せずに必要です。たとえば、

<code class="language-javascript">console.log(...arr);</code>

関数パラメーター

Math.min（）メソッドを例として取得します。このメソッドは、少なくとも1つの数値をパラメーターとして取得し、渡されたパラメーターの最小数を返します。

数字の配列があり、これらの数値の最小値を見つけたい場合、拡張機能担当者がいない場合は、インデックスで要素を1つずつ渡すか、Apply（）メソッドを使用して要素を渡す必要があります。引数としての配列の。たとえば、

最初のパラメーターは、この呼び出し関数の値を変更するために使用されるため、最初のパラメーターはnullであることに注意してください。

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13</code>

拡張オペレーターは、アレイの要素を関数のパラメーターとして渡すためのより便利で読みやすいソリューションです。たとえば、

このオンラインの例では、

：

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13</code>

を見ることができます

codepen

の例をご覧ください

配列を作成します

拡張演算子を使用して、既存の配列またはSymbol.iterator（）メソッドを含む他の反復可能なオブジェクトから新しい配列を作成できます。これらは、ループのforで反復できるオブジェクトです。

たとえば、

アレイのクローンに使用できます。既存の配列の値を新しい配列に割り当てるだけで、新しい配列を変更すると、既存の配列が更新されます。

<code class="language-javascript">console.log(...arr);</code>

拡張オペレーターを使用すると、既存の配列を新しい配列にクローンできます。新しい配列に加えられた変更は、既存の配列に影響しません。

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13</code>

これは、1次元配列のみをクローンすることに注意する必要があります。多次元配列では動作しません。

拡張オペレーターを使用して、複数の配列を1つの配列に連結することもできます。たとえば、

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13</code>

文字列に拡張機能演算子を使用して、各アイテムが文字列内の文字である配列を作成することもできます。

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]</code>

オブジェクトを作成します

拡張機能担当者を使用して、さまざまな方法でオブジェクトを作成できます。

別のオブジェクトを軽くクローンするために使用できます。たとえば、

複数のオブジェクトを1つのオブジェクトにマージするためにも使用できます。たとえば、

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]</code>

オブジェクトが同じプロパティ名を共有する場合、最後に拡張されたオブジェクトのプロパティ値が使用されることに注意する必要があります。たとえば、

<code class="language-javascript">const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]</code>

拡張オペレーターを使用して、配列内のインデックスが属性になり、そのインデックスの値が属性の値になるアレイからオブジェクトを作成できます。たとえば、

<code class="language-javascript">const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']</code>

また、文字列からオブジェクトを作成するために使用することもできます。同様に、文字列のインデックスが属性になり、そのインデックスの文字が属性の値になります。たとえば、

<code class="language-javascript">const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}</code>

nodeListを配列に変換します

<code class="language-javascript">const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}</code>

NodeListは、ドキュメント内の要素であるノードのコレクションです。配列とは異なり、これらの要素は、アイテムやエントリなどのコレクション内のメソッドからアクセスされます。

拡張機能演算子を使用して、ノデリストを配列に変換できます。たとえば、

配列で複製を削除します

<code class="language-javascript">const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}</code>

SETオブジェクトは、一意の値のみを保存するコレクションです。 NodeListと同様に、セットは拡張オペレーターを使用して配列に変換できます。

セットは一意の値のみを保存するため、拡張機能とペアリングして、配列内の重複を削除することができます。たとえば、

拡張オペレーターおよび残差演算子

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}</code>

残りのオペレーターも3点演算子（...）ですが、さまざまな目的に使用されます。残りの演算子は、関数のパラメーターリストで使用でき、関数が未定義数のパラメーターを受け入れることを示します。これらのパラメーターは、配列として処理できます。

例：

この例では、残りの演算子は、計算機能のパラメーターとして使用されます。次に、アレイ内のアイテムを反復し、それらを追加して合計を計算します。

変数をパラメーターとして計算に1つずつ渡すことができます。または、拡張オペレーターを使用して配列の要素をパラメーターとして渡すことができます。

<code class="language-javascript">const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}</code>

結論

<code class="language-javascript">const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div></code>

拡張オペレーターを使用すると、コードを読み取り可能にしながら、コードの行を少なくすることでさらに多くのことを行うことができます。反復可能なオブジェクト、パラメーターを関数に渡す、または他の反復可能なオブジェクトから配列とオブジェクトを作成するために使用できます。

関連する読み取り：

JavaScript
• に数学的な方法が欠落しています
クイックヒント：JavaScriptでオブジェクト配列をソートする方法
javascriptのループに使用する方法
クイックヒント：文字列がjavascriptの正規表現と一致するかどうかをテスト
《 javascript：初心者から忍者まで》

javascript拡張オペレーターFAQ（FAQ）

（元のFAQコンテンツに類似したよくある質問ですが、コンテンツの一貫性を維持し、元のテキストを直接コピーすることを避けるために、ここに異なる言葉遣いを追加する必要があります）

以上がクイックヒント：JavaScriptでスプレッドオペレーターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。