でのマップ

この投稿は当初公表されたattacomsian.com/blog .
マップは、キー値ペアのコレクションを作成できるJavaScriptの新しいデータ構造です.それらはJavaScriptと共にES 6(ES 2015とも呼ばれます)で導入されました.マップオブジェクトは、キーと値としてオブジェクトとプリミティブの両方を格納できます.
マップは、キー値データを格納するためにも使用されるオブジェクトに似ています.しかし、主な違いは、マップキーは、任意のタイプのことができるだけで文字列やシンボルに制限されていません.オブジェクトとは異なり、マップのサイズを取得することも簡単です.

マップを初期化する
セットのように、使用することができますMap() 空のマップを作成するコンストラクタ

const items = new Map(); 

コンストラクタにiterable ( arrayなど)を渡すこともできます.

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]); 

マップ法
主なメソッドとプロパティはset() , get() , has() , size , delete() , and clear() . 以下にこれらのメソッドを使用したマップの簡単な例を示します.

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

セットのように、マップキーもユニークです.呼び出しset() 回以上同じキーで複数のキー値のペアを追加しません.代わりに、値の一部を最新の値に置き換えます.

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

マップ内のオブジェクト
マップは任意のデータ型をキーまたは値として格納することができますので、オブジェクトリテラル、配列、および関数のような複雑なオブジェクトを格納できます.

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

マップを繰り返す
オブジェクトと異なり、マップを反復処理すると、キー値のペアが挿入されたのと同じ順序で返されます.私たちはfor...of すべてのキー値ペアを反復するループ

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

同様に、我々はまた、ビルトインを使用することができますforEach() すべての要素を反復処理するメソッド

foods.forEach((key, value) => {
    console.log(`${key}: ${value}`);
});

キーと値
マップ提供keys() and values() キーと値のみにアクセスするメソッドです.これらのメソッドは、新しいiterableオブジェクトを返します.これは、すべてのキーまたは値を反復処理するために使用することもできます.

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

The Map オブジェクトもentries() エントリのiterableを返すメソッド[key, value] . このメソッドはfor...of ループ.以下に例を示します:

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

同様sets , を呼び出すことができますnext() 返り値entries() キー値ペアを1つずつ横断する方法

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

結論
マップはキー値と値の両方のオブジェクトとプリミティブを格納することができますキー値のペアのコレクションです.オブジェクトとは異なり、マップキーは任意の型でできます.オブジェクト、配列、関数、あるいは別のマップ.セットと同様に、キーは一意です彼らは一度だけ地図で発生することができます.マップオブジェクトを反復処理すると、マップに挿入されたのと同じ順序でキー値ペアが返されます.
✌️ 私は現代のJavaScript、ノードについて書きます.JS、春のブート、およびすべてのもののウェブ開発.Subscribe to my newsletter Web開発チュートリアル＆プロヒントを取得するには毎週.
この記事のように?また、私に従うことができます.