JavaScript でスプレッド演算子を使用するさまざまな方法を詳しく説明した記事

この記事では、JavaScript でスプレッド演算子を使用するさまざまな方法と、スプレッド演算子と剰余演算子の主な違いについて説明します。

は 3 つのドット (...) で表されます。JavaScript スプレッド演算子は ES6 で導入されました。これを使用して、コレクションおよび配列内の要素を単一の個別の要素に展開できます。

スプレッド演算子を使用すると、配列とオブジェクトの作成とクローンの作成、配列を関数の引数として渡したり、配列から重複を削除したりすることができます。

構文

スプレッド演算子は、反復可能なオブジェクトでのみ使用できます。これは反復可能オブジェクトの前に分離せずに使用する必要があります。例:

console.log(...arr);

関数とパラメータ

Math.min() メソッドを例に挙げます。このメソッドは引数として少なくとも 1 つの数値を受け取り、渡された引数の中で最小の数値を返します。

数値の配列があり、これらの数値の最小値を見つけたい場合は、スプレッド演算子を使用せずに、インデックスを使用して要素を 1 つずつ渡すか、apply() メソッドを使用して渡す必要があります。パラメータとして配列を使用します。例:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

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

スプレッド演算子は、配列要素を引数として関数に渡すための、より便利で読みやすいソリューションです。例:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

Create Array

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

たとえば、配列のクローンを作成するために使用できます。既存の配列の値を新しい配列に単純に割り当てる場合、新しい配列に変更を加えると既存の配列が更新されます。

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]

既存の配列は、スプレッドを使用して新しい配列に複製できます。新しい配列に加えられた変更は既存の配列には影響しません:

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]

これは 1 次元配列のみを複製することに注意してください。多次元配列では機能しません。

スプレッド演算子を使用して、複数の配列を 1 つに連結することもできます。例:

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]

また、文字列に対してスプレッド演算子を使用して、各項目が文字列内の文字である配列を作成することもできます。

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

Create Object

スプレッド演算子は、オブジェクトを作成するためにさまざまな方法で使用できます。

これは、別のオブジェクトのシャロー クローンを作成するために使用できます。例:

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

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

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

オブジェクトが同じプロパティ名を共有する場合、最後のオブジェクトによって展開された値が使用されることに注意してください。例:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

スプレッド演算子を使用すると、配列からオブジェクトを作成できます。この場合、配列内のインデックスがプロパティとなり、そのインデックスの値がプロパティの値になります。例:

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

これは、文字列からオブジェクトを作成するためにも使用できます。この場合、文字列内のインデックスがプロパティになり、そのインデックスの文字がプロパティの値になります。例:

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: '!'}

NodeList を Array に変換

NodeList は、ドキュメント内の要素であるノードのコレクションです。要素には、配列とは異なり、item や entries などのコレクション内のメソッドを通じてアクセスします。

スプレッド演算子を使用して、NodeList を Array に変換できます。例:

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

配列から重複を削除

A Set オブジェクトは、一意の値のみを格納するコレクションです。 NodeList と同様に、スプレッド演算子を使用して Set を配列に変換できます。

Set は一意の値のみを格納するため、スプレッド演算子と組み合わせて配列から重複を削除できます。例:

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

展開演算子と休止演算子

休止演算子も 3 つのドット演算子 (...) ですが、さまざまな目的に使用されます。関数の引数リストでrest演算子を使用すると、関数が未定義の数の引数を受け入れることを示すことができます。これらのパラメータは配列として扱うことができます。

例:

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

この例では、rest 演算子が calculateSum 関数の引数として使用されます。次に、配列内の項目をループし、それらを追加して合計を計算します。

その後、変数を関数に引数として calculateSum を 1 つずつ渡すか、スプレッド演算子を使用して配列の要素を引数として渡すことができます:

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

結論

スプレッド演算子を使用すると、コードを読みやすくしながら、より少ないコード行でより多くのことを実行できます。これを反復可能オブジェクトとともに使用して、関数に引数を渡したり、他の反復可能オブジェクトから配列やオブジェクトを作成したりできます。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、基本的なプログラミング ビデオ ]

以上がJavaScript でスプレッド演算子を使用するさまざまな方法を詳しく説明した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。