JavaScriptで使用されるSpread演算子は何ですか？

ES6スプレッド演算子、およびこの強力なJavaScript機能のいくつかの実用的な使用法について学びます。

スプレッド演算子は、ES6で導入されたJavaScriptの機能であり、を使用すると、反復可能なオブジェクトの内部にアクセスできます。「反復可能なオブジェクト」という用語は、実際には単なるコンピュータサイエンスの用語であり、データ型のカテゴリを表します。具体的には、配列、オブジェクトリテラル、および文字列です。

それらを「反復可能」にする理由これらの種類のJavaScriptタイプは、いくつかのシーケンシャルな方法でトラバースできます。たとえば、配列でforループを使用したり、for… inloopsで使用できるオブジェクトリテラルを使用したりできます。

スプレッド演算子を使用すると、これらの反復可能なオブジェクト内の「もの」に効果的にアクセスできます。それが何を意味するかを説明するために例を見てみましょう：

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = [...foo]; // the three dots "..." are the spread operator syntax!

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa'];

変数barは、fooから正確なコピーを取得しました！うわあ…

const foo = [
  <^>'hello',
  'bonjour',
  'konnichiwa'<^>
]
const bar = [...foo]

拡散演算子は基本的にfoo配列の内部をすくい取り、はbarの新しい配列全体に値を拡散します。

基本的な考え方がわかったので、スプレッド演算子が役立つ可能性のある一般的なタスクを見てみましょう。

反復可能なオブジェクトの複製

前に見たように、スプレッド演算子は反復可能なオブジェクトを複製するための最良の方法の1つです。これを行うにはもっと複雑な方法がありますが、スプレッド演算子の簡潔さはそれを楽しく簡単にします。

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ...foo; // uh-oh :<

ちょっと卑劣な屋に引っ張った。 barの新しいブラケットのセットにドロップする必要があります！ 😬

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo]; // woohoo! :>

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa']

スプレッド演算子を使用してオブジェクトリテラルを複製することは、配列と大差ありません。 BYOBを忘れないでください（独自の角かっこを持参してください）。

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {...foo};

console.log(bar);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }

反復可能なオブジェクトのマージ

スプレッド演算子を使用して、他のいくつかの値から単一の値を作成することもできます。

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ['gutentag', 'hello-ey'];
const baz = [...foo, ...bar];

console.log(baz);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

これで、bazは、fooとbarの両方のマージされた値になります。 Spreadedアレイを別のアレイ内に配置することもできます。

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo, 'gutentag', 'hello-ey'];

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

これは、よく訓練されたJavaScriptの本能が、これが本当に奇妙に見えると思うかもしれない場所です…しかし、spread演算子は単に「もの」を保持していることを忘れないでください。その「もの」をどこに置くかはあなた次第です！ 💫

オブジェクトリテラルはどうですか？これは、配列のマージと非常によく似ています。

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  german: 'gutentag',
  canadian: 'hello-ey'
};
const baz = {...foo, ...bar};

console.log(baz);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey' }

ブーム！これは、以前は Object.assign（）のタスクでしたが、スプレッド構文により、これははるかに簡潔になります。

キーが重複しているとどうなりますか？

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  english: 'howdy',
  german: 'gutentag'
};
const baz = {
  ...foo,
  ...bar,
  canadian: 'hello-ey',
  korean: 'annyeong'
};

console.log(baz);
// { english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey', korean: 'annyeong' }

重複したキーは上書きされます！

楕円は、の後ではなく、変数の前にあることに注意してください。...myVariableは、myVariable...ではありません。

関数への引数のフィード

これはそれほど頻繁には発生しないかもしれませんが、引数を関数にフィードするためにspread演算子を使用することもできます。

const cube = [12, 30, 14];

function calcVolume(width, height, depth) {
  return width * height * depth;
};

calcVolume(12, 30, 14);         // basic
calcVolume.apply(null, cube);   // using "apply"
calcVolume(...cube);          // using "spread operator"

スプレッド演算子を使用すると、一連の引数を関数に簡単に入力できます。

あなたは文字列について何か言った

最後に、文字列も反復可能なオブジェクトと見なされるため、文字列でspread演算子を使用することもできます（sliceおよびlength関数があります！）

const foo = "jumanji";
const bar = [...foo];

console.log(bar);
// [ "j", "u", "m", "a", "n", "j", "i" ]

自然言語処理または何らかの機械学習用のソフトウェアを開発しない限り、文字列にスプレッド演算子を使用する必要はありません。よくわかりません…でも、ストリングスでは間違いなく機能します！

結論

スプレッド演算子は、C ++やPythonなどの古い言語ですでに利用可能であった、非常に要望の多かった機能でしたが、今ではここにあります。それはいくつかの一般的なプログラミングタスクを本当に簡単にします、そしてうまくいけばあなたはそれを使うことができる実用的な方法を学びました！

スプレッド演算子の詳細なドキュメントについては、MDNを参照してください。