1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

オブジェクトに昇順のIDをつけたい

Posted at

※簡単なTodoリストの作成過程において自分用メモです。
間違い等ございましたらご指摘お願いいたします。


#目的
Todoのアイテム(オブジェクト)を作成する際、それぞれのアイテムに数字のIDを昇順で持たせます。
ローカルストレージからオブジェクの配列を呼び出す場合は、IDの最大値+1からIDをつけていきます。


//イメージ
taskItems=[{
  id : 1,
  name : 'タスク1',
  completed : false,
},
{
  id : 2,
  name : 'タスク2',
  completed : false,
},
{
  id : 3,
  name : 'タスク3',
  completed : true,
},]

#方法

変数taskId=1を定義し、classで定義したタスクのひな形で新しいタスクを作る度にtaskIdが+1になるようにします。

let taskId = 1;

class NewTask {
    constructor(task) {
      this.id = taskId++;
      this.name = task;      
      this.completed = false;
  }
}

##ローカルストレージから配列を呼び出す場合について

呼び出した配列の要素数が1以上の場合は一番大きいidを検索して+1します。
配列が空の場合は初期値は1とします。

//ローカルストレージからデータの取得するための関数
function loadStorage() {
    let getJson = localStorage.getItem('kye');
    return JSON.parse(getJson);
  }
}

//ローカルストレージにデータがあれば取得
  if (loadStorage()) {
    const localStorageDate = loadStorage();
    taskItems = localStorageDate;
    //taskItemstが空でなければtaskIdは最大値+1、空の配列なら1、
    taskId = taskItems.length
      ? Math.max.apply(null, taskItems.map(task => task.id)) + 1
      : 1;
  }

Math.max ()は与えられたそれぞれの引数の最大値を1つ返します。
可変長引数の関数であるため、配列を渡せないのでapplyを使用。
ES2015 以降ならスプレッド演算子(...)を用いて個々の値に分解することも可能です。

applyはオブジェクトの関数を呼び出し、第1引数で関数配下のthisの参照先を変更できます。
nullを渡した場合は暗黙的にグローバルオブジェクトが渡されたものとします。
第2引数にtaskItemsの要素のidを配列にしたものを渡すため、mapを使用します。
mapは配列の要素をコールバック関数で順に加工し、最終的にできた新しい配列を返します。

Math.max.apply(null, taskItems.map(task => task.id)) + 1

これにより、taskItemsの要素ごとのidで配列を作成し、最大値を検索して+1することができます。

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?