追加、削除、変更、クエリを実行するための 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: