ハッピーメモメモ

私的備忘録

【JavaScript】配列㏌配列…のバラし方

Map

複数の値が保持できるものに、List,Map,Setなどがあるが、

Mapは他の2つと何が違うのか?

→キーの重複をなくせる!(ダブりは上書きされる)

f:id:n-moeko1966:20220115165142p:plain

List、Map、Setを使用して複数の値を保持してみよう!【プログラミング】 | 株式会社日本システムデザイン【鹿児島事業所】

 

使用例)

[{…},{…},{…}]のような複雑な配列を扱う際に、一番外側の配列から内側の中身(配列)を一つ取り出して、Itemに代入することで配列をバラして扱える!

f:id:n-moeko1966:20220119092503p:plain



Set

f:id:n-moeko1966:20220117113550p:plain

【JS】Setオブジェクトで配列の重複要素を削除する方法 - Qiita

 

f:id:n-moeko1966:20220117113949p:plain

JavaScriptで重複排除を自分で実装してはいけない(Setを使う) - Qiita

 

いろいろ試してみたときのやつ

      // []に入った配列を取り出す
      result.data.map((book_lists) => {

        // に入った配列を取り出す
        book_lists.map*1;
          console.log(data.book);

          // 配列のクローンをSetで作り直してる?
          data.book = [...new Set(book_list)];
          console.log(data.book)

 

 

スプレッド構文

・配列やオブジェクトの要素を文字通り展開する構文

JSのスプレッド構文を理解する - Qiita

・大括弧や中括弧{}を外してくれるもの

f:id:n-moeko1966:20220115174225p:plain

【JavaScript】「...」って何者?スプレッド構文について初心者向けに解説!|TechTechMedia

・使える対象

  配列初期化子
  オブジェクト初期化子 {}
  関数呼び出し時の引数 ()
  分割代入 = 、関数の仮引数 ()

スプレッド演算子……じゃなくて、スプレッド構文の使える場所とか使い方とかそういう。(配列とかおれおれAdvent Calendar2018 – 20日目) | Ginpen.com

 

 

おまけ

VSCodeで簡単に動作確認をしたいときは、ターミナルに「node」って入力するとconsoleみたいな対話状態が呼び出せる!

 

 

 

 

*1:book_list) => {


          // 分割代入
          // bookの中身から、book_information_idとそれ以外(another)をそれぞれ取り出す
          const { book_information_id, ...another } = book_list;
          console.log(book_information_id);
          console.log(another);

          // ※※ 今回は配列の中の要素を扱うのではないので向かなそう!!
          // element:配列内の現在の要素
          // index:配列内の現在の要素の番号
          // self:メソッドを実行する関数
          data.book = book_list.filter((element, index, self) =>
            // findIndex()…配列内の指定されたテスト関数を満たす最初の要素の位置を返す
            self.findIndex(e =>
              e.book_information_id === element.book_information_id
            )
          );

          if(book_information_idが1個目なら){
            data.book.push(現在の要素)
          };

          // すでに配列にいれたbook_information_idと、
          // 現在のbook_information_idはどう表す?

          data.book = book_list.filter(function (x, i, self) {
            return (
              self.indexOf(x.book_information_id) === i.book_information_id
            );
          });
          console.log(data.book);

          // 重複を含む配列からSetオブジェクトを作成
          // book_listのオブジェクトの1つの中では重複してないからうまくいかないのでは?
          data.book = new Set(book_list);
          console.log(data.book);

          data.book = Array.from(new Set(book_list