追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに

最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを手伝いました。このページには、オブジェクト配列を操作して追加、削除、変更、クエリ機能を実装するための js が含まれていました。おそらく多くの友人がこのような操作に遭遇すると思うので、共有するために記録しておきます。

2. データの準備

ここでは、学生オブジェクト配列を例に挙げます。実は、この配列の操作は基本的に JSON 配列と同じなので、変換するだけで済みます。たとえば、JSON.parse を使用して JSON 文字列を js オブジェクト配列に変換できます。

テストデータ:

// 学生オブジェクト配列 var students = [
    {id:1、名前: "张三"、年齢: 14}、
    {id:2、名前:「Li Si」、年齢:15}、
    {id:3、名前:「王武」、年齢:17}、
    {id:4、名前:「趙劉」、年齢:18}
];

3. クエリ操作

下付き文字によるクエリ

console.log(生徒[1]);

IDによるクエリ

var ss = students.filter((p) => {
    p.id == 4 を返します。
});

コンソールログ(ss);
console.log(ss[0]); // 最初の要素を出力します

名前によるあいまい検索

4. 新しい操作を追加する

var e = {id:5, 名前: "王巴", 年齢: 20};
学生.push(e);

5. 削除

// IDに基づいて添え字を取得します var e = students.filter((p) => {
    p.id == 4 を返します。
});

var インデックス = students.indexOf(e);
// インデックスに従って生徒を削除します。splice(index,1);
console.log(students.length); // 残り4人

6. 変更

// 下付き文字に応じて students[0].name='张三1' を直接変更できます。
学生[0].年齢=20;
console.log(生徒[0]);

7. テスト方法は?

ここでは、Google Chrome の F12 開発者ツールのコンソール パネルを使用できます (実際には js 実行エンジンです)。効果を確認するには、上記のコードを順番に入力して実行するだけです。

8. その他の配列操作

他にも、困っている友人が参考にできる操作コマンドがいくつかあります。

  • push()は最後に要素を追加します
  • unshift()は要素を先頭に追加します
  • pop() は最後の要素を削除します
  • shift()は最初の要素を削除します
  • splice() は要素を削除、置換、挿入します
  • sort() 配列をソートする
  • 配列の反転
  • Vue.set()は配列内の要素の1つを変更します

要約する

これで、JS を使用してオブジェクト配列を操作し、追加、削除、変更、および検索を実装する方法についての記事は終了です。JS を使用してオブジェクト配列を操作する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript における一般的な配列操作
  • JavaScript配列重複排除の詳細な説明
  • JavaScript 配列メソッド - 体系的な概要と詳細な説明
  • JavaScript配列の一般的なメソッドの例のまとめ
  • JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
  • JSはマップを使用してdouble配列を統合します
  • JavaScript 配列のマージのケーススタディ
  • JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します
  • JavaScript 配列の include と Reduce の基本的な使用法
  • jsは多次元配列を1次元配列に変換し、それを並べ替えます
  • js配列のfind、some、filter、reduceの違いの詳細な説明
  • JavaScript 配列の詳細な概要

<<:  Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル

>>:  Linux ターミナルでドメイン IP アドレスを見つけるコマンド (5 つの方法)

推薦する

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

MySQLへの外部ネットワークアクセスを許可し、MySQLアカウントのパスワードを変更する方法

mysqlのrootアカウント、普段はlocalhostか127.0.0.1で接続しています。会社の...

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)

CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...

Linux/Mac MySQL パスワードを忘れた場合のパスワード変更コマンドラインメソッド

すべての前提条件にはルート権限が必要です1. MySQLプロセスを終了する //Linux sudo...

mysqlにコメント情報を追加する実装

序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

MySQL 匿名ログインでデータベースを作成できない問題の解決方法

よくある質問ユーザー ''@'localhost' によるデータベー...

Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...