概要：このチュートリアルでは、反復可能オブジェクトの要素を展開するJavaScriptスプレッド演算子について学びます。
JavaScriptスプレッド演算子の紹介
ES6は、3つのドット (...) で構成されるスプレッド演算子と呼ばれる新しい演算子を提供します。 スプレッド演算子を使用すると、配列、マップ、または セットなどの反復可能オブジェクトの要素を展開できます。 例：
const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);Code language: JavaScript (javascript)出力
[ 2, 4, 6, 1, 3, 5 ]Code language: JSON / JSON with Comments (json)この例では、odd配列の前にある3つのドット(...)がスプレッド演算子です。スプレッド演算子(...)は、odd配列の要素をアンパックします。
ES6には、関数の残りの引数をすべて配列に収集するレストパラメータでもある3つのドット(...)もあることに注意してください。
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5);
Code language: JavaScript (javascript)出力
[ 3, 4, 5 ]Code language: JSON / JSON with Comments (json)この例では、レストパラメータ(...)は、引数3、4、および5を配列argsに収集します。したがって、3つのドット(...)は、スプレッド演算子とレストパラメータの両方を表します。
主な違いは次のとおりです。
- スプレッド演算子(
...)は、反復可能オブジェクトの要素をアンパックします。 - レストパラメータ(
...)は、要素を配列にパックします。
レストパラメータは、関数の最後の引数である必要があります。ただし、スプレッド演算子はどこでも使用できます。
const odd = [1,3,5];
const combined = [...odd, 2,4,6];
console.log(combined);Code language: JavaScript (javascript)出力
[ 1, 3, 5, 2, 4, 6 ]Code language: JSON / JSON with Comments (json)または
const odd = [1,3,5];
const combined = [2,...odd, 4,6];
console.log(combined);Code language: JavaScript (javascript)出力
[ 2, 1, 3, 5, 4, 6 ]Code language: JSON / JSON with Comments (json)ES2018は、スプレッド演算子をオブジェクトに拡張し、オブジェクトスプレッドとして知られていることに注意してください。
スプレッド演算子を使用できるいくつかのシナリオを見てみましょう。
JavaScriptスプレッド演算子とapply()メソッド
2つの数値を比較する次の compare() 関数を見てください。
function compare(a, b) {
return a - b;
}Code language: JavaScript (javascript)ES5では、2つの数値の配列を compare() 関数に渡すために、次のように apply() メソッドをよく使用します。
let result = compare.apply(null, [1, 2]);
console.log(result); // -1Code language: JavaScript (javascript)ただし、スプレッド演算子を使用すると、2つの数値の配列を compare() 関数に渡すことができます。
let result = compare(...[1, 2]);
console.log(result); // -1Code language: JavaScript (javascript)スプレッド演算子は、配列の要素を展開するため、この場合 a は 1、b は 2 になります。
配列のpush()メソッドを使用するより良い例
関数は、不定数の引数を受け入れる場合があります。 配列から引数を入力するのは不便です。
たとえば、配列オブジェクトの push() メソッドを使用すると、1つ以上の要素を配列に追加できます。配列を push() メソッドに渡す場合は、次のように apply() メソッドを使用する必要があります。
let rivers = ['Nile', 'Ganges', 'Yangte'];
let moreRivers = ['Danube', 'Amazon'];
[].push.apply(rivers, moreRivers);
console.log(rivers);Code language: JavaScript (javascript)この解決策は冗長に見えます。
次の例では、スプレッド演算子を使用して、コードの可読性を向上させています。
rivers.push(...moreRivers);Code language: CSS (css)ご覧のとおり、スプレッド演算子を使用する方がはるかにクリーンです。
JavaScriptスプレッド演算子と配列操作
1) 配列リテラルの構成
スプレッド演算子を使用すると、リテラル形式を使用して配列を構築するときに、別の配列を初期化された配列に挿入できます。 次の例を見てください。
let initialChars = ['A', 'B'];
let chars = [...initialChars, 'C', 'D'];
console.log(chars); // ["A", "B", "C", "D"]Code language: JavaScript (javascript)2) 配列の連結
また、スプレッド演算子を使用して、2つ以上の配列を連結することもできます。
let numbers = [1, 2];
let moreNumbers = [3, 4];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4]Code language: JavaScript (javascript)3) 配列のコピー
さらに、スプレッド演算子を使用すると、配列インスタンスをコピーできます。
let scores = [80, 70, 90];
let copiedScores = [...scores];
console.log(copiedScores); // [80, 70, 90]Code language: JavaScript (javascript)スプレッド演算子は、配列自体を新しい配列にコピーするだけで、要素はコピーしないことに注意してください。 これは、コピーが浅く、深くないことを意味します。
JavaScriptスプレッド演算子と文字列
次の例を考えてみましょう。
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]Code language: JavaScript (javascript)この例では、個々の文字列から chars 配列を構築しました。 スプレッド演算子を 'BC' 文字列に適用したとき、文字列 'BC' の各文字を個々の文字に展開しました。
概要
- スプレッド演算子は、3つのドット(
...)で示されます。 - スプレッド演算子は、配列、セット、マップなどの反復可能オブジェクトの要素をリストにアンパックします。
- レストパラメータも3つのドット(
...)で示されます。 ただし、関数の残りの引数を配列にパックします。 - スプレッド演算子を使用して、反復可能オブジェクトの複製を作成したり、反復可能オブジェクトを1つにマージしたりできます。
