todoリストの削除機能を作ろう(JavaScriptチェックテスト)

はじめに

以下の様な、todoリストから内容を指定する事で削除できる機能を作る

// todoリスト
const todos =[{
    text:'watch udemy',
    completed:true,
},{
    text:'write blog',
    completed:true,
},{
    text:'post blog',
    completed:true,
},{
    text:'take a bath',
    completed:true,
},{
    text: 'go to bed',
    completed:true,
}
]


//削除機能
deleteTodo(todos,'write Blog')

//todoリストにある「write Blog」の要素が消える

要件

配列todosから「write blog」の値を持つ要素を削除するdeleteTodo関数を作ろう。

第一引数に配列、第二引数にテキストを持たせて一致する場合に、その配列から一致する要素を削除させる。

解答

const deleteTodo = function(todos,todoText){
     const index = todos.findIndex(function(todo){
        return todo.text.toLowerCase() === todoText.toLowerCase()
    })

    if(index > -1){
        todos.splice(index,1)
    }
   
}

解説

大まかな流れとして、以下の手順を踏む。


①第二引数に入れたテキストと一致する値を持つ要素を探す。あった場合にそのインデックスをとってくる(findIndex使う)
②インデックスの値から、配列の要素を削除する

①第二引数に入れたテキストと一致する値を持つ要素を探す。あった場合にそのインデックスをとってくる(findIndex使う)

const index = todos.findIndex(function(todo){
        return todo.text.toLowerCase() === todoText.toLowerCase()
    })

findIndexを使う。
findIndex は配列のなっから特定のインデックスを返す。

今回は return todo.text.toLowerCase() === todoText.toLowerCase()

なので、todoの配列内の値と、deleteTodoの第二引数で指定した値が一致した場合、その要素のインデックスを返す。

今回はその値をindexに格納している。

②インデックスの値から、配列の要素を削除する

   if(index > -1){
        todos.splice(index,1)
    }

indexで受け取った値を元に、spliceを使ってtodosの配列から要素削除している。

findIndexは一致するものがなかった場合に「-1」を返すので、index>-1の場合に限定している。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping