How to implement addition, deletion, modification and query in javascript (code example)

As a powerful programming language, JavaScript can not only be used for interactive development of web pages, but also for processing data, operating DOM elements, etc. Among them, addition, deletion, modification and query are functions we often use. Let us take a look at the JavaScript code to implement addition, deletion, modification and query.

1. Add

The most common scenario for adding data is form submission. For example, we need to add the form data filled in by the user to an array. The following is a simple form submission code:

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);
});

We first obtain the form and all input box elements in it, and then listen to the submit event of the form. In the event handling function, we create an empty object, use forEach to traverse all input box elements, use their name attribute as the attribute name of the object, use their value attribute as the attribute value, and finally add the object to the data array. . Note that we need to call the preventDefault() method to prevent the form from automatically submitting.

2. Delete

Deleting data is also a very common scenario. Usually we will delete one or more data items based on a certain condition. The following is a simple deletion code:

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

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

We first define the data ID to be deleted, and then use the findIndex method to find the subscript of the first data item whose ID is equal to the ID (if not found, it returns -1 ). If found, the splice method is called to delete the data item.

3. Modify

Modifying data requires us to first find the data item to be modified, and then update its attribute value. The following is a simple modification code:

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

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

We also first find the data item subscript corresponding to the data ID to be modified, and then determine whether the data item exists. If it exists, update its name attribute value to the new name.

4. Query

There are many ways to query data. The most common is to filter data according to a certain condition. The following is a simple query code:

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

console.log(results);

We define The conditions to be queried, and then use the filter method to filter all data items that meet the conditions and create a new array. In the example, we choose to query based on the name attribute containing query conditions, and finally output the results to the console.

The above is the code for adding, deleting, modifying and checking in JavaScript. They are functions we often use in daily development and play an important role in the background development and data management of applications. Hope this article can be helpful to you.

The above is the detailed content of How to implement addition, deletion, modification and query in javascript (code example). For more information, please follow other related articles on the PHP Chinese website!