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. その他の配列操作他にも、困っている友人が参考にできる操作コマンドがいくつかあります。
要約するこれで、JS を使用してオブジェクト配列を操作し、追加、削除、変更、および検索を実装する方法についての記事は終了です。JS を使用してオブジェクト配列を操作する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル
>>: Linux ターミナルでドメイン IP アドレスを見つけるコマンド (5 つの方法)
MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...
HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...
序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...
mysqlのrootアカウント、普段はlocalhostか127.0.0.1で接続しています。会社の...
実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
すべての前提条件にはルート権限が必要です1. MySQLプロセスを終了する //Linux sudo...
序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...
注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...
よくある質問ユーザー ''@'localhost' によるデータベー...
1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...
目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...
序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...