JavaScriptで追加・削除・変更・クエリを実装する方法（コード例）

JavaScript は強力なプログラミング言語として、Web ページの対話型開発だけでなく、データの処理や DOM 要素の操作などにも使用できます。このうち、追加、削除、変更、クエリはよく使う機能ですが、追加、削除、変更、クエリを実装するJavaScriptコードを見てみましょう。

1. 追加

データを追加する最も一般的なシナリオはフォームの送信です。たとえば、ユーザーが入力したフォーム データを配列に追加する必要があります。以下は、単純なフォーム送信コードです。

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

まず、フォームとその中のすべての入力ボックス要素を取得し、次にフォームの送信イベントをリッスンします。イベント処理関数では、空のオブジェクトを作成し、forEach を使用してすべての入力ボックス要素を走査し、それらの name 属性をオブジェクトの属性名として使用し、value 属性を属性値として使用し、最後にオブジェクトをデータに追加します。配列。 。フォームが自動的に送信されないようにするには、preventDefault() メソッドを呼び出す必要があることに注意してください。

2. 削除

データの削除も非常に一般的なシナリオであり、通常は特定の条件に基づいて 1 つ以上のデータ項目を削除します。以下は単純な削除コードです:

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 メソッドを呼び出してデータ項目を削除します。

3. 変更

データを変更するには、まず変更するデータ項目を見つけてから、その属性値を更新する必要があります。以下は簡単な変更コードです。

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

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

また、最初に変更するデータ ID に対応するデータ項目の添字を検索し、次にデータ項目が存在するかどうかを判断します。存在する場合は、その name 属性値を新しい名前に更新します。

4. クエリ

データをクエリするにはさまざまな方法があります。最も一般的なのは、特定の条件に従ってデータをフィルタリングすることです。以下は単純なクエリ コードです:

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

console.log(results);

クエリする条件を定義し、filter メソッドを使用して条件を満たすすべてのデータ項目をフィルターし、新しい配列を作成します。この例では、クエリ条件を含む name 属性に基づいてクエリを実行することを選択し、最後に結果をコンソールに出力します。

上記はJavaScriptの追加、削除、修正、チェックを行うコードで、日常の開発で頻繁に使用する機能であり、アプリケーションのバックグラウンド開発やデータ管理において重要な役割を果たしています。この記事があなたのお役に立てば幸いです。

以上がJavaScriptで追加・削除・変更・クエリを実装する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。