データ構造のマップを簡単に理解することができます

序文

当初の意図：最近、「Es6の詳細な理解」という本を読んでいました。以前はEs6の文法を十分に習得していませんでした。また、忙しいステージを利用して、メモを読み直して整理し、全員と共有しました。あなたはそれが好きではありません、スプレーしないでください。

群衆に適しています：フロントエンドの一次開発、大物は迂回します。

コンテンツ構造：マップを知る->基本的な使用法->アプリケーションシナリオ

Map構造は、前のセクション「データ構造のセットについて」で説明したset構造構文に似ています。違いは、Map構文が配列のキーと値のペア形式であり、Mapも処理することです。オブジェクトのキーと値の強制的な型変換を妨げる問題。Mapは、配列の特性を使用して解決されます。配列は任意のタイプの値で渡すことができることは誰もが知っているため、Map構造体もすべてのタイプの値を受け取ります。値をオブジェクトとして入力するように強制されないことを説明しました。たとえば、24と「24」は2つのタイプの関係であり、相互に影響を与えることはありません。

基本的な文法

Map.set add

let map = new Map()
map.set("name", "蛙人")
console.log(map)

上記の例では、Mapオブジェクトが作成されます。前述のように、それMapは配列オブジェクトです。また、2次元配列である配列オブジェクトも受け取ります。内部のパラメーターはキーと値のペアの形式であり、次に、map値が設定されます。map.setメソッドは2つのパラメーターを受け取ります。key前者は、value値です。このとき、Mapオブジェクトはname値を追加しました

Map.sizeの長さ

let map = new Map()
map.set("name", "蛙人")
console.log(map.size) // 1

上記の例では、Mapオブジェクトは、size現在のMap構造内のいくつかのデータセットを表示するための表示属性を提供します。

Map.get get get

let map = new Map()
map.set("name", "蛙人")
console.log(map.get("name")) // 蛙人

上記の例では、Map.getメソッドを使用してオブジェクトの属性値を取得します。Map存在しないオブジェクトを取得した場合は、を返しundefinedます。

Map.hasクエリ

let map = new Map()
map.set("name", "蛙人")
console.log(map.has("name")) // true

上記の例では、Map.has返されるのはBoolean値であり、Map見つかって返された場合はこの中で検索されtrueます。それ以外の場合は返されますfalse。これは通常、このマップ内の値の存在を検出するために使用されます。

Map.delete delete

let map = new Map()
map.set("name", "蛙人")
console.log(map.delete("name")) // true

上記の例では、Map.deleteメソッドはMap構造内の値を削除し、値が構造内に存在する場合は戻り、存在しtrueない値を削除した場合は戻りますfalse。

Map.clear clear

let map = new Map()
map.set("name", "蛙人")
map.clear()

上記の例では、Map.clearこのメソッドはMap構造内のすべての属性をクリアします。

マップはforEachを使用します

let map = new Map([
    ["name", "蛙人"],
    ["age", 24],
    ["sex", "male"]
])

map.forEach((value, key, self) => {
    
    
    console.log(value, key, self) 
})

上記の例でMapは、構造が2次元配列であり、キーと値のペアの形式であることがわかります。Map構造は、次の3つのパラメーターを受け取るforEachを使用してトラバースすることもできます。

オブジェクトの値
オブジェクトのキー値
オブジェクト自体

注：これはSet構造とは異なります。Set構造の最初の2つのパラメーターはオブジェクト値です。これは、Set構造にキー値の概念がないためです。

マップはオブジェクトをすばやく変換します

ループ分析でも新しいオブジェクトを形成できるように、トラバースMapできることを前述しましたforEach。次に、Es6メソッドは、この構造をオブジェクトにすばやく変換する新しい方法を提供します。

let map = new Map([
    ["name", "蛙人"],
    ["age", 24],
    ["sex", "male"]
])
console.log(Object.fromEntries(map)) // {name: "蛙人", age: 24, sex: "male"}

上記の例では、Mapのデータ構造を従来のオブジェクトリテラル形式にすばやく変換できます。私の記事「要約| Es6オブジェクトはどのような機能を拡張しますか？」も読むことができます。》

セット構造とマップ構造の違い

一文の要約：Set構造は主にオブジェクトに値が存在するかどうかを判断するために使用され、Map構造は主に現在の構造からオブジェクトの値を取得するために使用されます。

アプリケーションシナリオ

データキャッシュ

場合によっては、それを実現する必要があります。最初にバックエンドインターフェースAPIをリクエストし、リクエストした後、インターフェースAPIを送信する代わりに、2回目にキャッシュします。

let map = new Map()
function fn() {
    
    
    if (!map.has("api")) {
    
    
        let res = axios.get("api")
        map.set("api", res.data)
        return res.data
    } else {
    
    
	return map.get("api")
    }
}
fn()

他の人なら放棄された

プロジェクトの要件がある場合、次のように、操作に対応する状態が確実に発生します。

let text = ""
if (status == 1) {
    
    
    text = "启用"
} else if (status = 2) {
    
    
    text = "停用"
}
// 省略...

// 以上我们需要写一堆的 if else这样代码非常的繁琐冗余


let operation = new Map([
    [1, "启用"],
    [2, "停用"],
    [3, "注销"]
])
text = operation.get(status) // 这样实现代码非常简洁