ホームページ > ウェブフロントエンド > jsチュートリアル > もう少し優れた「地図」を使用すると、より簡単に目的地にたどり着くことができます...

もう少し優れた「地図」を使用すると、より簡単に目的地にたどり着くことができます...

Barbara Streisand
リリース: 2024-12-09 08:33:12
オリジナル
381 人が閲覧しました

A slightly better

JavaScript では、Map はキーと値の間の O(1) ルックアップを作成する非常に便利な組み込みクラスです。

1

2

3

4

5

6

7

8

9

const myMap = new Map()

 

for(const file of files) {

    const [,extension] = file.name.split(".")

    if(!myMap.has(extension)) {

        myMap.set(extension, [])

    }

    myMap.get(extension).push(file)

}

ログイン後にコピー

定期的に行う可能性のあるあらゆる種類のことにマップを使用できます。

  • ファイル拡張子ごとにグループ化する上記の例のような、グループ化されたデータのリストの作成

  • キーの範囲にわたる値のカウントや合計などのデータの集計

1

2

3

4

5

6

// 1) Counting occurrences

const items = ['apple','apple','orange','banana','apple'];

const counts = new Map();

for (const item of items) {

  counts.set(item, (counts.get(item) || 0) + 1);

}

ログイン後にコピー
  • 後続のステップで使用する高速ルックアップの作成

1

2

3

4

5

6

7

8

9

const users = [

  {id:1,name:'A',role:'admin'},

  {id:2,name:'B',role:'user'},

  {id:3,name:'C',role:'user'}

];

const userMap = new Map();

for (const u of users) {

  userMap.set(u.id, u);

}

ログイン後にコピー

stringify を使用して結果を保存する必要がない限り、いくつかの理由から、Map は単純なオブジェクト ({}) を使用することをお勧めします。

  • 文字列ではないキーを受け取ることができます
  • 文字列キーを使用している場合でも、オブジェクトよりもわずかに高速です

ただし、定型的な問題や複雑な懸念事項が多数存在する可能性があります。マップに保存しているオブジェクトが単純な配列から複雑なオブジェクトまで構築する必要がある場合は、それを使用するコードを散在させる必要があります。 .

1

2

3

4

5

6

7

8

9

10

const map = new Map()

 

for(const item of items) {

   if(!map.has(item.type)) {

       const newType = new Type(item.type, getInfoForType(item.type))

       map.set(item.type, newType)

   }

   map.get(item.type).doSomething(item)

 

}

ログイン後にコピー

これは「可能」ですが、複数の場所で値を更新または初期化する必要がある場合、DRY を維持することが難しくなります。

このため、私は MapPlus クラスを使用します。これは、欠落しているキーの初期化関数を提供する Map の拡張機能であり、コンストラクターに、またはイニシャライザーが単にコンテキスト情報を必要とする場合には get の 2 番目のパラメーターとして提供できます。キー。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

class MapPlus extends Map {

    constructor(missingFunction) {

        super()

        this.missingFunction = missingFunction

    }

 

    get(key, createIfMissing = this.missingFunction) {

        let result = super.get(key)

        if (!result && createIfMissing) {

            result = createIfMissing(key)

            if (result && result.then) {

                const promise = result.then((value) => {

                    super.set(key, value)

                    return value

                })

                super.set(key, promise)

            } else {

                super.set(key, result)

            }

        }

        return result

    }

}

ログイン後にコピー

これを使用すると、次のようなことができます。

1

2

3

4

5

const map = new MapPlus(()=>[])

 

for(const item of items) {

    map.get(item.type).push(item)

}

ログイン後にコピー

キーが欠落しているかのように、単に空の配列が作成されます。

多くの場合、これを 2 つのレベルで行う必要があるため、次のようにマップを定義します。

1

2

3

4

const map = new MapPlus(()=>new MapPlus(()=>[]))

for(const item of items) {

   map.get(item.type).get(item.subType).push(item)

}

ログイン後にコピー

コンストラクター関数は使用されているキーを取得するので、次のこともできます。

1

2

3

4

5

const map = new MapPlus((type)=>new Type(type, getInfoForType(type))

 

for(const item of items) {

    map.get(item.type).doSomething(item)

}

ログイン後にコピー

以上がもう少し優れた「地図」を使用すると、より簡単に目的地にたどり着くことができます...の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート