こんにちは。KOUKIです。
前回、findIndexメソッドを活用して、構造体から特定のデータを取得する方法を学びました。
今回は、データの追加、削除方法を学びましょう。
追加 – pushメソッド
pushメソッドは、配列の最後尾にデータを追加できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
const todos = [ { id: 1, title: "One" }, { id: 2, title: "Two" } ]; function addData(todos, todo) { todos.push(todo); } addData(todos, { id: 3, title: "Three" }); console.log(todos); |
上記のコードでは、todosの3番目のデータを追加しました。
|
1 2 3 |
0: {id: 1, title: "One"} 1: {id: 2, title: "Two"} 2: {id: 3, title: "Three"} |
削除 – spliceメソッド
データの削除には、spliceメソッドを使用します。
これはfindIndexメソッドと相性抜群です！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const todos = [ { id: 1, title: "One" }, { id: 2, title: "Two" } ]; function addData(todos, todo) { todos.push(todo); } function deleteData(todos, id) { // 削除したいデータのindexを取得 let index = todos.findIndex(todo => { return todo.id === id; }); // 指定したインデックス番号のオブジェクトを1つ削除する todos.splice(index, 1); } addData(todos, { id: 3, tile: "Three" }); deleteData(todos, 1); // id = 1のデータを削除する console.log(todos); |
spliceメソッドは、第一引数に削除したデータのindex番号、第二引数に削除するデータの個数を指定します。
その為、findIndexで削除したいデータのindex番号を取得する必要があるわけです。
出力結果は、以下になります。
|
1 2 |
0: {id: 2, title: "Two"} 1: {id: 3, tile: "Three"} |
おわりに
JavaScriptによるデータの追加、削除についてはお分りいただけたでしょうか。
よく練習して、使いこなせるようになっておきましょう。
それでは、また！
にほんブログ村
最近のコメント