javascript怎麼實現增刪改查（程式碼範例）

JavaScript作為一門強大的程式語言，不僅可用於網頁互動開發，還可用於處理資料、操作DOM元素等。其中，增刪改查是我們常用到的功能，以下就讓我們來看看JavaScript實作增刪改查的程式碼。

一、增加

增加資料最常見的場景是表單提交，例如我們要把使用者填寫的表單資料加到一個陣列裡面。以下是一個簡單的表單提交程式碼：

var form = document.querySelector('form');
var inputs = form.querySelectorAll('input');
var data = [];

form.addEventListener('submit', function(event) {
  event.preventDefault();
  var item = {};
  inputs.forEach(function(input) {
    item[input.name] = input.value;
  });
  data.push(item);
});

我們先取得表單和其中的所有輸入框元素，然後監聽表單的submit事件。在事件處理函數中，我們建立一個空的對象，使用forEach遍歷所有輸入框元素，將它們的name屬性作為對象的屬性名，將它們的value屬性作為屬性值，最後將該對象添加到資料數組中。注意，我們需要呼叫preventDefault()方法，以阻止表單自動提交。

二、刪除

刪除資料也是很常見的場景，通常我們會針對某個條件來刪除一個或多個資料項目。下面是一個簡單的刪除程式碼：

var id = 1; // 删除的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data.splice(index, 1);
}

我們先定義要刪除的資料ID，然後使用findIndex方法找到第一個ID等於該ID的資料項目的下標（如果沒有找到則回傳-1 ）。如果找到，則呼叫splice方法刪除該資料項。

三、修改

修改資料需要我們先找到要修改的資料項，然後將它的屬性值更新。以下是一個簡單的修改程式碼：

var id = 1; // 修改的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data[index].name = '新的名称';
}

我們同樣先找到要修改的資料ID對應的資料項下標，然後判斷該資料項是否存在。如果存在，則將它的name屬性值更新為新的名稱。

四、查詢

查詢數據有多種方式，最常見的是根據某個條件過濾數據，下面是一個簡單的查詢代碼：

var query = '张三'; // 查询的条件
var results = data.filter(function(item) {
  return item.name.includes(query);
});

console.log(results);

我們定義要查詢的條件，然後使用filter方法過濾所有滿足條件的資料項並建立新陣列。在範例中，我們選擇根據name屬性包含查詢條件的方式進行查詢，最後將結果輸出到控制台。

以上就是JavaScript實作增刪改查的程式碼，它們是我們日常開發中常會用到的功能，對應用程式的後台開發和資料管理等方面都有著重要的作用。希望這篇文章能對你有幫助。

以上是javascript怎麼實現增刪改查（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！