はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

反復処理についての理解を深める

本題

1. スプレッド演算子

スプレッド演算子とは反復可能や列挙可能オブジェクトの展開を行う演算子のこと。
主に配列で使用。[...]のように記述する
関数の引数で使用された場合,残余引数と呼ばれ、実引数に渡された変数を配列にまとめる。
- レストパラメーター　ex. function(...args)
スプレッド演算子は　イテレーターの操作に従う

例1

スプレッド演算子の基本的な使い方

// 配列を準備
const array1 = [1,2,3,4,5];
// スプレッド演算子によって展開されたものが再度array2に格納される(新しい配列を作っている)
const array2 = [...array1];
// (5) [1, 2, 3, 4, 5]と出力
console.log(array2);
// array1とarray2は別の配列となっている
console.log(array1 === array2);
// falseと出力される
//　先頭に0を足したり、後方に6番目を追加したりして直感的に配列を動かせる
const array3 = [0,...array1, 6]
// (7) [0, 1, 2, 3, 4, 5, 6] と出力
console.log(array3);

例2

レストパラメーターの用途

// 関数を一つ定義し、引数にレストパラメーターを持たせる
// 渡ってきた引数を...argsの配列にまとめる
function sum(...args){
  // 初期値を設定
  let ret = 0;
  // for...ofで渡ってきた配列の値を一つひとつ抽出
  for(let v of args){
    // 1~4がvに格納されていることわかる
    // console.log(v);
    // ret + vが繰り返される
    ret += v;
  }
  // sumに値を返却する
  return ret;
}
// 引数に渡す値
const result = sum(1,2,3,4);
// 10と出力される
console.log(result);

例3

イテレーターの関係性

//　ジェネレーターを利用して反復可能オブジェクト化
Object.prototype[Symbol.iterator] = function* (){
  for(let key in this){
    yield[key, this[key]];
  }
}

例4

// オブジェクトを用意
const obj1 = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3"
}
// Uncaught TypeError: obj1 is not iterableと出力される
// このオブジェクトは反復可能オブジェクトではないという意味
const array4 = [...obj1];

上記エラーを無くすのにイテレーター（ジェネレーター）を使用

// オブジェクトを用意
const obj1 = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3"
}

//　ジェネレーターを利用して反復可能オブジェクト化
Object.prototype[Symbol.iterator] = function* (){
  for(let key in this){
    yield[key, this[key]];
  }
}

const array4 = [...obj1];
// 配列で出力される
console.log(array4)

オブジェクトのリテラルで囲うと挙動が変わる

const obj1 = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3"
}

Object.prototype[Symbol.iterator] = function* (){
  for(let key in this){
    yield[key, this[key]];
  }
}

  // {}で囲う
const array4 = {...obj1};
// {prop1: 'value1', prop2: 'value2', prop3: 'value3'}と出力される
// これはジェネレーターを通さずに、obj1がそのまま出力されている
console.log(array4)

今日はここまで！

参考にさせて頂いた記事