在 JavaScript 中，Map 是一個(gè)非常有用的內(nèi)建類，它在鍵和值之間建立 O(1) 查找。

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)
}

您可以使用地圖來完成您可能經(jīng)常做的各種事情：

• 建立資料分組列表，如上面按檔案副檔名分組的範(fàn)例

• 聚合數(shù)據(jù)，例如對(duì)一系列鍵的值進(jìn)行計(jì)數(shù)或求和
  

// 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);
}

• 建立在後續(xù)步驟中使用的快速查找

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);
}

Map 優(yōu)於使用簡(jiǎn)單物件 ({})，原因有幾個(gè)，只要您不必使用 stringify 儲(chǔ)存結(jié)果：

• 它可以用非字串的鍵
• 即使您使用字串鍵，它也比物件稍快

但是，如果您儲(chǔ)存在映射中的物件需要構(gòu)造（從簡(jiǎn)單數(shù)組到複雜物件），則可能會(huì)有很多樣板檔案和混合問題，這需要散佈在使用它的程式碼中.

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)

}

這個(gè)「可以」是可以的，但如果你需要在多個(gè)地方更新或初始化值，那麼保持 DRY 就變得更困難。

出於這個(gè)原因，我使用了MapPlus 類，它是Map 的擴(kuò)展，它提供了一個(gè)缺失的鍵初始化函數(shù)，可以將其提供給構(gòu)造函數(shù)，或者如果初始化程序確實(shí)需要上下文信息之外的信息，則可以將其作為get 的第二個(gè)參數(shù)鑰匙。

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
    }
}

有了這個(gè)你就可以做這樣的事情：

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

for(const item of items) {
    map.get(item.type).push(item)
}

就像缺少鍵一樣，它只會(huì)產(chǎn)生一個(gè)空數(shù)組。

我經(jīng)常需要兩個(gè)級(jí)別，所以我將像這樣定義地圖：

const map = new MapPlus(()=>new MapPlus(()=>[]))
for(const item of items) {
   map.get(item.type).get(item.subType).push(item)
}

建構(gòu)函式確實(shí)取得了正在使用的金鑰，因此我們也可以這樣做：

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

for(const item of items) {
    map.get(item.type).doSomething(item)
}

以上是稍微好一點(diǎn)的「地圖」可以讓你更輕鬆地到達(dá)那裡...的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！