追加、削除、変更、クエリを実行するための 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 つの方法)

推薦する

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

ランダム点呼 Web ページを実装するための JavaScript

JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとお...

after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...

Linux での MySQL 5.7.16 無料インストール バージョンのグラフィック チュートリアル

この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...

DIV共通属性コレクション

1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...

Nginx でバージョン番号を隠したり偽造したりする方法

1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...