Comment implémenter l'ajout, la suppression, la modification et la requête en javascript (exemple de code)

En tant que langage de programmation puissant, JavaScript peut être utilisé non seulement pour le développement interactif de pages Web, mais également pour traiter des données, exploiter des éléments DOM, etc. Parmi elles, l'ajout, la suppression, la modification et la requête sont des fonctions que nous utilisons souvent. Jetons un coup d'œil au code JavaScript pour implémenter l'ajout, la suppression, la modification et la requête.

1. Ajouter

Le scénario le plus courant pour ajouter des données est la soumission d'un formulaire. Par exemple, nous devons ajouter les données du formulaire remplies par l'utilisateur à un tableau. Ce qui suit est un code simple de soumission de formulaire :

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

Nous récupérons d'abord le formulaire et tous les éléments de la zone de saisie qu'il contient, puis écoutons l'événement de soumission du formulaire. Dans la fonction de gestion des événements, nous créons un objet vide, utilisons forEach pour parcourir tous les éléments de la zone de saisie, utilisons leur attribut name comme nom d'attribut de l'objet, utilisons leur attribut value comme valeur d'attribut et enfin ajoutons l'objet aux données. tableau. . Notez que nous devons appeler la méthode PreventDefault() pour empêcher la soumission automatique du formulaire.

2. Supprimer

La suppression de données est également un scénario très courant. Habituellement, nous supprimons un ou plusieurs éléments de données en fonction d'une certaine condition. Voici un code de suppression simple :

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

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

Nous définissons d'abord l'ID de données à supprimer, puis utilisons la méthode findIndex pour trouver l'indice du premier élément de données dont l'ID est égal à cet ID (retourne -1 s'il n'est pas trouvé) . Si elle est trouvée, la méthode splice est appelée pour supprimer l’élément de données.

3. Modification

La modification des données nous oblige d'abord à trouver l'élément de données à modifier, puis à mettre à jour sa valeur d'attribut. Voici un code de modification simple :

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

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

Nous trouvons également d'abord l'indice de la donnée correspondant à l'ID de la donnée à modifier, puis déterminons si la donnée existe. S'il existe, mettez à jour la valeur de son attribut name avec le nouveau nom.

4. Requête

Il existe de nombreuses façons d'interroger des données. La plus courante consiste à filtrer les données en fonction d'une certaine condition. Voici un code de requête simple :

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

console.log(results);

Nous définissons les conditions à interroger. utilisez ensuite la méthode de filtrage pour filtrer tous les éléments qui satisfont aux éléments de données de la condition et créer un nouveau tableau. Dans l'exemple, nous choisissons d'interroger en fonction de l'attribut name contenant les conditions de requête, et enfin d'afficher les résultats sur la console.

Ce qui précède est le code pour ajouter, supprimer, modifier et vérifier en JavaScript. Ce sont des fonctions qui sont souvent utilisées dans notre développement quotidien et jouent un rôle important dans le développement en arrière-plan et la gestion des données des applications. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!