[javascript] JavaScript에서 맵과 객체

주요 차이점은지도에서 거의 모든 키 유형을 지원하는 경우 객체는 문자열 키만 지원한다는 것입니다.

내가 할 경우 obj[123] = true다음과 Object.keys(obj)그때 얻을 것 ["123"]보다는 [123]. 지도는 키의 유형을 유지하고 [123]훌륭합니다. 지도를 사용하면 객체를 키로 사용할 수도 있습니다. 전통적으로 이렇게하려면 객체를 해시하기 위해 일종의 고유 식별자를 객체에 제공해야합니다 ( getObjectIdJS에서 표준의 일부로 본 적이 없다고 생각 합니다). 지도는 또한 주문 보존을 보장하므로 보존에 더 적합하며 때로는 몇 가지 종류의 작업을 수행 할 필요가 없습니다.

실제로지도와 객체 사이에는 몇 가지 장단점이 있습니다. 객체는 JavaScript의 핵심에 매우 밀접하게 통합되어 장점과 단점을 모두 얻을 수 있으며, 이는 주요 지원의 차이를 뛰어 넘어 Map과 크게 차별화됩니다.

즉각적인 이점은 객체를 구문 적으로 지원하여 요소에 쉽게 액세스 할 수 있다는 것입니다. 또한 JSON으로 직접 지원합니다. 해시로 사용하면 속성이없는 객체를 얻는 것이 귀찮습니다. 기본적으로 객체를 해시 테이블로 사용하려는 경우 객체가 오염되어 hasOwnProperty속성에 액세스 할 때 종종 해당 객체를 호출 해야합니다. 기본적으로 객체가 오염되는 방법과 해시로 사용하기 위해 희망적으로 오염되지 않은 객체를 만드는 방법을 볼 수 있습니다.

({}).toString
    toString() { [native code] }
JSON.parse('{}').toString
    toString() { [native code] }
(Object.create(null)).toString
    undefined
JSON.parse('{}', (k,v) => (typeof v === 'object' && Object.setPrototypeOf(v, null) ,v)).toString
    undefined

객체에 대한 오염은 코드를 더 성가 시게하거나 느리게 만들뿐만 아니라 보안에 잠재적 인 영향을 줄 수 있습니다.

객체는 순수한 해시 테이블이 아니지만 더 많은 노력을 기울이고 있습니다. 같은 두통 hasOwnProperty이 있고 길이를 쉽게 얻을 수 없습니다 ( Object.keys(obj).length) 등. 객체는 순수하게 해시 맵으로 사용되는 것이 아니라 동적 확장 가능한 객체로도 사용되므로 순수한 해시 테이블 문제가 발생할 때 사용할 수 있습니다.

다양한 일반적인 작업 비교 / 목록 :

    Object:
       var o = {};
       var o = Object.create(null);
       o.key = 1;
       o.key += 10;
       for(let k in o) o[k]++;
       var sum = 0;
       for(let v of Object.values(m)) sum += v;
       if('key' in o);
       if(o.hasOwnProperty('key'));
       delete(o.key);
       Object.keys(o).length
    Map:
       var m = new Map();
       m.set('key', 1);
       m.set('key', m.get('key') + 10);
       m.foreach((k, v) => m.set(k, m.get(k) + 1));
       for(let k of m.keys()) m.set(k, m.get(k) + 1);
       var sum = 0;
       for(let v of m.values()) sum += v;
       if(m.has('key'));
       m.delete('key');
       m.size();

다양한 기복 (성능, 간결함, 휴대용, 확장 가능 등)과 함께 몇 가지 다른 옵션, 접근 방식, 방법론 등이 있습니다. 객체는 언어의 핵심이되는 약간 이상하기 때문에 작업을위한 많은 정적 메소드가 있습니다.

키 유형을 유지하는지도의 장점 외에도 객체와 같은 것들을 객체가 갖는 부작용으로부터 격리 된 키로 지원할 수 있다는 장점이 있습니다. 지도는 순수한 해시로, 동시에 객체가 되려는 것에 대한 혼란이 없습니다. 프록시 기능으로 맵을 쉽게 확장 할 수도 있습니다. 객체는 현재 프록시 클래스를 가지고 있지만 성능 및 메모리 사용량은 심각합니다. 실제로 객체에 대한 맵처럼 보이는 자체 프록시를 만드는 것은 현재 프록시보다 성능이 뛰어납니다.

지도의 실질적인 단점은 JSON에서 직접 지원되지 않는다는 것입니다. 구문 분석이 가능하지만 몇 가지 끊기가 있습니다.

JSON.parse(str, (k,v) => {
    if(typeof v !== 'object') return v;
    let m = new Map();
    for(k in v) m.set(k, v[k]);
    return m;
});

위의 내용은 성능에 심각한 영향을 미치며 문자열 키도 지원하지 않습니다. JSON 인코딩은 훨씬 어렵고 문제가 많습니다 (여러 가지 접근 방식 중 하나임).

// An alternative to this it to use a replacer in JSON.stringify.
Map.prototype.toJSON = function() {
    return JSON.stringify({
        keys: Array.from(this.keys()),
        values: Array.from(this.values())
    });
};

순전히지도를 사용하는 경우 그렇게 나쁘지는 않지만 유형을 혼합하거나 스칼라 이외의 값을 키로 사용할 때 문제가 발생합니다 (JSON은 IE 원형 객체 참조와 같은 문제에 완벽하지는 않습니다). 테스트하지는 않았지만 stringify에 비해 성능이 크게 저하 될 수 있습니다.

다른 스크립팅 언어는 종종 Map, Object 및 Array에 대해 스칼라가 아닌 명시 적 유형을 갖는 것과 같은 문제가 없습니다. 웹 개발은 종종 스칼라가 아닌 유형에 어려움을 겪습니다 .PHP는 속성에 A / M을 사용하여 객체와 배열 / 맵을 병합하고 JS는 배열 확장 M / O와 맵 / 객체를 병합합니다. 복잡한 유형을 병합하는 것은 고급 스크립팅 언어에 대한 악마의 골칫거리입니다.

지금까지는 구현과 관련하여 주로 문제가되었지만 기본 작업의 성능도 중요합니다. 엔진과 사용량에 따라 성능도 복잡합니다. 실수를 배제 할 수 없기 때문에 소금 한 알로 시험을 치십시오 (이걸 서 두어야합니다). 또한 매우 간단한 시나리오 만 검토하여 대략적인 지표 만 제시하는지 확인하기 위해 자체 테스트를 실행해야합니다. 매우 큰 객체 / 맵에 대한 Chrome의 테스트에 따르면 삭제로 인해 객체의 성능이 좋지 않습니다. 삭제는 O (1)이 아닌 키 수에 비례합니다.

Object Set Took: 146
Object Update Took: 7
Object Get Took: 4
Object Delete Took: 8239
Map Set Took: 80
Map Update Took: 51
Map Get Took: 40
Map Delete Took: 2

Chrome은 가져오고 업데이트하는 데 큰 장점이 있지만 삭제 성능은 끔찍합니다. 이 경우 맵은 오버 헤드를 조금만 사용하지만 오버 헤드가 수백만 키로 테스트되는 객체 / 맵이 하나만 있으면 맵 오버 헤드의 영향이 잘 표현되지 않습니다. 메모리 관리를 사용하면 프로파일을 올바르게 읽고 있으면 객체를 선호하는 이점이있을 수 있습니다.

이 특정 벤치 마크에 대한 Firefox에서는 다른 이야기입니다.

Object Set Took: 435
Object Update Took: 126
Object Get Took: 50
Object Delete Took: 2
Map Set Took: 63
Map Update Took: 59
Map Get Took: 33
Map Delete Took: 1

Firefox의 객체 에서이 특정 벤치 마크를 삭제해도 문제가 발생하지 않지만 다른 벤치 마크에서는 특히 Chrome과 같이 많은 키가있을 때 문제가 발생했음을 즉시 지적해야합니다. 대규모 컬렉션의 경우 Firefox에서 맵이 확실히 우수합니다.

그러나 이것은 이야기의 끝이 아닙니다. 많은 작은 물체 나지도는 어떻습니까? 나는 이것에 대한 빠른 벤치 마크를했지만 위의 작업에서 적은 수의 키로 가장 잘 수행되는 철저한 벤치 마크 (설정 / 가져 오기)가 아닙니다. 이 테스트는 메모리와 초기화에 관한 것입니다.

Map Create: 69    // new Map
Object Create: 34 // {}

다시이 수치는 다양하지만 기본적으로 Object는 좋은 리드를 가지고 있습니다. 어떤 경우에는 맵에서 오브젝트의 리드가 극단적 (~ 10 배 더 낫습니다)이지만 평균적으로 2-3 배 정도 더 좋습니다. 극단적 인 성능 스파이크가 양방향으로 작동 할 수있는 것 같습니다. 메모리 사용량과 오버 헤드를 프로파일 링하기 위해 Chrome에서만 생성하고 테스트했습니다. Chrome에서 하나의 키를 가진지도가 하나의 키를 가진 객체보다 약 30 배 더 많은 메모리를 사용하는 것으로 나타났습니다.

위의 모든 작업 (4 키)으로 많은 작은 개체를 테스트하려면 다음을 수행하십시오.

Chrome Object Took: 61
Chrome Map Took: 67
Firefox Object Took: 54
Firefox Map Took: 139

메모리 할당 측면에서 이들은 해제 / GC 측면에서 동일하게 동작했지만 Map은 5 배 더 많은 메모리를 사용했습니다. 이 테스트는 마지막 테스트 에서처럼 하나의 키만 설정 한 4 개의 키를 사용하여 메모리 오버 헤드 감소를 설명합니다. 이 테스트를 몇 번 실행했으며 Map / Object는 전체 속도 측면에서 Chrome의 전반적인 목과 목입니다. 작은 오브젝트 용 Firefox에서는 전체 맵에 비해 확실한 성능 이점이 있습니다.

물론 여기에는 크게 다를 수있는 개별 옵션이 포함되어 있지 않습니다. 나는이 수치를 미세 최적화하는 조언을하지 않을 것입니다. 이를 극복 할 수있는 것은 경험상 엄청나게 큰 키 값 저장소 및 작은 키 값 저장소의 오브젝트에 대해 맵을 더 강력하게 고려한다는 것입니다.

이 두 가지를 사용하는 가장 좋은 전략을 넘어서서 구현하고 먼저 작동하게하십시오. 프로파일 링 할 때 가끔 객체 키 삭제 사례에서 볼 수 있듯이 엔진 문제로 인해 느릴 것으로 생각하지 않는 것이 느려질 수 있음을 명심해야합니다.

답변

var m = new Map();
var i = 0;
while(1) {
    m.set(((10**30)*Math.random()).toString(36), ((10**30)*Math.random()).toString(36));
    i++;
    if(i%1000 === 0) { console.log(i/1000,"thousand") }
}
// versus:
var m = {};
var i = 0;
while(1) {
    m[((10**30)*Math.random()).toString(36)] = ((10**30)*Math.random()).toString(36);
    i++;
    if(i%1000 === 0) { console.log(i/1000,"thousand") }
}

obj[key] += x
// vs.
map.set(map.get(key) + x)

foo = obj[key] = x;  // Does what you expect
foo = map.set(key, x)  // foo !== x; foo === map

let obj = {};

// adding properties to a object
obj.prop1 = 1;
obj[2]    =  2;

// getting nr of properties of the object
console.log(Object.keys(obj).length)

// deleting a property
delete obj[2]

console.log(obj)

const myMap = new Map();

const keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

console.log(myMap.size); // 3

// getting the values
console.log(myMap.get(keyString));    // "value associated with 'a string'"
console.log(myMap.get(keyObj));       // "value associated with keyObj"
console.log(myMap.get(keyFunc));      // "value associated with keyFunc"

console.log(myMap.get('a string'));   // "value associated with 'a string'"
                         // because keyString === 'a string'
console.log(myMap.get({}));           // undefined, because keyObj !== {}
console.log(myMap.get(function() {})) // undefined, because keyFunc !== function () {}