AngularJS での配列マッピング

1. AngularJS での配列マッピング
2. マップエントリ
3. AngularJS での配列マッピングの手順

この記事では、AngularJS の配列マッピングについて説明します。

AngularJS での配列マッピング

配列マッピングは、AngularJS の最も価値のある機能の 1つです。これにより、1 行で変数を作成できるため、各変数を個別に宣言する必要がなくなります。

データバインディングを簡素化し、パフォーマンスを向上させ、より保守しやすいテンプレートを作成できるようにします。さらに、読者は、コードで割り当てられている値と変数の目的を簡単に理解できます。

配列のマッピングは、map 関数を使用して行われ、キー、値などの他のパラメーターとともに配列をパラメーターとして渡します。

構文：

var myArr = map(myObj);
//myArr = [{key1: "value1", key2: "value2"}, {key3: "value3"}];

マップエントリ

以下は、使用できるマップエントリです。

• map.delete() はマップからアイテムを破棄します。
• map.size() はマップのサイズを返します。
• map.clear() はマップデータを削除します。
• map.set() は新しいエントリを追加します。
• map.get() は、マップからエントリを取得します。
• map.has() は、マップにエントリが存在するかどうかを判別します。

AngularJS での配列マッピングの手順

次の手順は、AngularJS での配列マッピングに役立ちます。

AngularJS での配列マッピングの例

Angular 配列マッピングの例を見てみましょう。

var tags =  [{ "id": 1, "name": "Adil" }, { "id": 2, "name": "Steve" }, { "id": 3, "name": "Roman" }, { "id": 4, "name": "John" }]
var selectedTags = [1,2,3];
var tagMap = tags.reduce(function(map, tag) {
    map[tag.id] = tag.name;
    return map;
}, {});
var selectedArray = selectedTags.map(function(id) {
    return tagMap[id];
});
console.log(selectedArray);

上記のコードのライブデモンストレーションを確認するには、ここををクリックしてください。