JavaScript スプレッド演算子

JavaScript スプレッド演算子 (…)

• JavaScript のスプレッド演算子は、配列を個々の要素に展開 (アンパック) します。

*配列とオブジェクトの両方で使用され、配列では次の場合に使用されます。

1. 配列の構築
2. 引数を関数に渡す

1- 配列の構築:

• ここでは、それを使用して配列要素を展開し、別の要素 (たとえば配列) で使用できます。

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• ご覧のとおり、スプレッド演算子を使用すると作業がはるかに簡単になります。

• 展開された配列の個々の要素が再度必要な場合は、スプレッド演算子を使用します。
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• さらに理解するための別の例:

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• ここでは完全に新しい配列を作成しており、食品配列を変更 (突然変異) しているわけではないことに注意してください。

console.log(foods); // ['chicken', 'meat', 'rice']

• スプレッド演算子は構造化に似ていますが、異なる点は、スプレッド演算子は新しい変数を作成しないため、カンマで区切って値を記述する場所でのみ使用できることです。

配列を使用したスプレッド演算子の 2 つの便利な使用例:

1.配列のコピーの作成:

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2. 2 つ以上の配列を結合する:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• スプレッド演算子は配列だけでなく、すべての反復可能オブジェクト (配列、文字列、マップ、セット (ほとんどの組み込みデータ構造) など) でも動作しますが、(オブジェクト) では動作しません。
• 文字列上: 元の文字列上の各文字 = 個々の要素、例:

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• しかし、冒頭で指定した 2 つの状況 (「配列の構築」と「引数の受け渡し」) 以外ではスプレッド演算子を使用したくないことを覚えておいてください。テンプレート リテラルで文字列を作成するためにカンマで区切られたいくつかの値を使用すると、カンマで区切られた複数の値を期待する場所ではないため、機能せず、エラーが発生します。

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- 引数を関数に渡す

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• スプレッド演算子の使用:
• ES2018 以降、オブジェクトが反復可能ではない場合でも、Spread Operator は実際にオブジェクトに対しても機能するようになりました。例:

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• 最初のオブジェクトでは、レストラン オブジェクトと同じプロパティを持つ新しいオブジェクトを作成しましたが、netWorth プロパティである別のプロパティを追加しました。
• 2 番目のオブジェクトでは、レストラン オブジェクトのコピーを作成しました。コピーされたオブジェクトへの変更は元のオブジェクトには影響せず、その逆も同様であることに注意してください。

ここですべてを理解していただければ幸いです。ご質問があれば、お気軽にコメント欄にお問い合わせください。読んでいただきありがとうございます?

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