>웹 프론트엔드 >JS 튜토리얼 >약간 더 나은 '지도'를 사용하면 더 쉽게 목적지에 도달할 수 있습니다.

약간 더 나은 '지도'를 사용하면 더 쉽게 목적지에 도달할 수 있습니다.

Barbara Streisand
Barbara Streisand원래의
2024-12-09 08:33:12369검색

A slightly better

JavaScript에서 Map은 키와 값 사이에 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)
}

정기적으로 하는 모든 종류의 작업에 지도를 사용할 수 있습니다.

  • 위의 예와 같이 파일 확장자별로 그룹화하여 그룹화된 데이터 목록 만들기

  • 키 범위의 값을 계산하거나 합산하는 등의 데이터 집계

// 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);
}
  • 후속 단계에서 사용할 빠른 조회 생성
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);
}

문자열화를 사용하여 결과를 저장할 필요가 없는 한, 몇 가지 이유로 간단한 객체({})를 사용하는 것보다 지도를 선호합니다.

  • 문자열이 아닌 키를 사용할 수 있습니다
  • 문자열 키를 사용하더라도 객체보다 약간 빠릅니다

많은 상용구와 혼합된 우려가 있을 수 있지만, 지도에 저장하는 객체를 구성해야 하는 경우(단순 배열부터 복잡한 객체까지) 이를 사용하는 코드에 배치해야 합니다. .

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를 유지하기가 더 어려워집니다.

이러한 이유로 나는 Map의 확장인 MapPlus 클래스를 사용합니다. 이 클래스는 생성자에 제공할 수 있는 누락된 키 이니셜라이저 함수를 제공하거나 이니셜라이저가 컨텍스트 정보 이상의 컨텍스트 정보를 필요로 하는 경우 get의 두 번째 매개변수로 제공합니다. 열쇠.

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

이를 통해 다음과 같은 작업을 수행할 수 있습니다.

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

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

키가 누락된 것처럼 빈 배열이 만들어집니다.

두 가지 레벨이 필요한 경우가 많으므로 다음과 같이 맵을 정의하겠습니다.

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

생성자 함수는 사용 중인 키를 가져오므로 다음 작업도 수행할 수 있습니다.

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

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

위 내용은 약간 더 나은 '지도'를 사용하면 더 쉽게 목적지에 도달할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.