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 つの方法)
ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...
目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...
JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとお...
フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...
MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...
docker-compose.yml ファイルで './' 相対パスを許可する バー...
この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...
1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...
1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...