Arrayのコピーだけじゃない！ ” . . . “の使い方

Bykaori

今更ながら、” . . . “はArrayの複製以外にも使えることを知った。

まずは、この” . . . “をMDNで調べようとしたが、検索バーに … と入れても出てこない。
“てんてんてん”と勝手に呼んでいたが正式名称が分からない。
調べたところ「スプレッド構文（Spread syntax）」という名前だった。

スプレッド構文（Spread syntax）

スプレッド構文の使い方を見ていく。

・Arrayのコピー
・複数のArrayをくっつける
・別のArrayに割り込ませる
・Arrayの指定箇所以降の要素の抽出

・Objectのコピー
・複数のObjectをくっつける

・functionのパラメータがいくつあるか分からないとき

Arrayのコピー

まずはよく見るこの使い方。array1のコピーを作れる。

JavaScript
const array1 = [1, 2, 3];
const array2 = [...array1];

console.log(array2); // [1, 2, 3]

複数のArrayをくっつける

こんなに簡単にArray同士をくっつけられる。

JavaScript
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

別のArrayに割り込ませる

[…array, newValue]のようにして新しい要素の追加も可能。

JavaScript
const array1 = ["ni", "san"];
const array2 = [1, ...array1, 4, 5];
console.log(array2); // [1, 'ni', 'san', 4, 5]

Arrayの指定箇所以降の要素の抽出

Arrayが左側に置かれているので違和感があるが、以下を応用して既存の要素を削除することもできる。

JavaScript
const array1 = [1, 2, 3, 4, 5];
const [first, second, ...nokorizenbu] = array1;

console.log(first); // 1
console.log(second); // 2
console.log(nokorizenbu); // [3, 4, 5]

そしてスプレッド構文はArrayだけでなく、Objectでも使用できる。

Objectのコピー

Arrayと同じくコピーを作れる。

JavaScript
const obj1 = { name: 'John', age: 30 };
const copiedObj = { ...obj1 };

console.log(copiedObj); // { name: 'John', age: 30 }

複数のObjectをくっつける

注：ただし同じプロパティ名が存在していた場合は上書きされてしまう！

JavaScript
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { x: 1, y: 2, z: 3 }

以下の例で、x は１から４に上書きされてしまう。非常に危ない。

JavaScript
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3, x: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // {x: 4, y: 2, z: 3}

functionのパラメータがいくつあるか分からないとき

functionパラメータがいくつあるのか定まらない時にスプレッド構文を使用する。function内では、numbersはArrayとして扱われ、以下の例ではArrayの要素をループして合計を計算している。

JavaScript
function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

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

次回は”Shallow Copy”について

スプレッド構文を使ってArrayやObjectのコピーができることは便利だが、「コピー」した中身を更新すると、コピー元のデータまで一緒に更新されてしまう場合がある！？
次回はShallow Copyについて調べる。

というわけで本日は以上！

今日、カモノハシが出てこなくてがっかりした？

thinking-nothing

類似投稿