>웹 프론트엔드 >프런트엔드 Q&A >es6 맵은 참조 유형입니까?

es6 맵은 참조 유형입니까?

青灯夜游
青灯夜游원래의
2023-01-11 16:59:001613검색

map은 참조 유형이고, map(set)은 es6에 추가된 새로운 참조 데이터 유형으로, 데이터의 매핑 관계를 나타냅니다. 맵 컬렉션 데이터 유형의 데이터는 "키/값" 방식으로 저장됩니다. 객체의 속성을 키로 사용하고 해당 속성을 사용하여 값을 참조할 수 있습니다. 예를 들어 "const"를 사용하여 맵을 생성할 수 있습니다. myMap = 새 맵();" .

es6 맵은 참조 유형입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

지도는 참조형입니다.

es6 map

ES6 이전에는 우리가 흔히 키-값 쌍이라고 부르는 'key' => 'value'를 JavaScript로 구현하는 것이 Object를 사용하여 이루어졌습니다. 그러나 이 구현 방법은 특별한 시나리오에서 문제가 있습니다. ES6은 언어에 진정한 키-값 쌍 저장 메커니즘을 제공하는 Map이라는 새로운 컬렉션 유형을 도입했습니다.

map(set)은 es6의 새로운 참조 데이터 유형으로, 지도 컬렉션 데이터 유형의 데이터 매핑 관계를 나타내며 "키/값" 방식으로 저장되며 객체의 속성을 사용할 수 있습니다. 키로 속성을 사용하여 값을 참조합니다.

1-1 지도 만들기

지도를 인스턴스화하려면 new 키워드를 사용하세요.new关键字来实例一个map

let m = new Map();

console.log(m);
// Map(0) {}

创建时初始化:
传入一个二维数组参数(可迭代对象,内部以数组的方式传入键值)
每个子数组,第一个元素是map对应的key, 第二个元素是map对应的value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

1-2 Map Api

1-2-1 添加映射元素

通过set()方法添加,传入两个参数,第一个传入映射的键,第二个传入映射的值。返回的是该映射集合(意味着可以链式添加)

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

链式添加键值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

1-2-2 映射集合长度

使用size

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);

생성 시 초기화:

2차원 배열 매개변수(반복 가능한 객체) 전달 , 키 값은 내부적으로 배열로 전달됩니다.) 각 하위 배열에 대해 첫 번째 요소는 맵에 해당하는 key이고 두 번째 요소는 입니다. > 해당 map
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

1-2 Map Api

1-2-1 매핑 요소 추가

Add set() 메소드를 통해 두 개의 매개변수를 전달합니다. 첫 번째는 맵의 키이고 두 번째는 맵의 값입니다. 반환되는 것은 매핑 세트입니다(체인에 추가할 수 있음을 의미)

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2
체인 키 값
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-2 매핑 세트 길이

size 속성은 현재 컬렉션의 요소 수를 가져올 수 있습니다.
let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

1-2-3 요소 가져오기

get() 메서드를 통해 요소를 가져오고 키를 전달합니다.

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}
1-2-4 요소 삭제

delete() 메서드를 통해 매핑된 컬렉션의 요소를 삭제하고, 삭제 성공 또는 실패를 나타내는 부울 값을 반환합니다.
rrreee

1- 2-5 요소 존재 여부 감지 has() 메소드를 사용하여 대상 요소 존재 여부를 감지하고, 감지 결과의 Boolean 값을 반환rrreee

  • 1-2-6 요소 지우기 방식

    clear() 메소드를 사용하여 모든 요소를 ​​삭제하고, 성공적으로 삭제된 부울 값을 반환합니다. Value
  • rrreee
  • 1-3 시퀀스 및 반복
  • map은 삽입 순서에 따라 요소를 반복할 수 있습니다

    매핑 인스턴스는 (반복자)를 제공합니다. 삽입 순서에 따라 [키, 값] 형식의 배열을 생성할 수 있습니다. 예 항목() 메서드(또는 제공된 Symbol.iterator) 반복자 인터페이스를 통해 탐색합니다.
    rrreee
  • 1-4 Object와의 비교

메모리 사용량브라우저의 차이로 인해 두 가지 저장 방법의 메모리 사용량이 달라집니다. 그러나 메모리 크기를 고려하면 맵은 약 50개 정도 저장됩니다. Object보다 키-값 쌍이 % 더 많습니다

🎜🎜삽입 성능🎜🎜삽입 속도 Map과 Object의 성능은 거의 비슷하지만 코드에 삽입 횟수가 많은 경우 map🎜🎜🎜🎜을 사용하는 것이 좋습니다. 검색 속도의 차이🎜🎜 작은 개체에는 키-값 쌍이 적을수록 좋습니다🎜🎜🎜🎜삭제 성능🎜🎜Object의 delete() 성능은 좋지 않은 반면, map의 delete() 성능은 좋습니다. 데이터에는 많은 삭제 작업이 포함됩니다. map🎜🎜🎜🎜🎜을 사용하는 것이 좋습니다.

위 내용은 es6 맵은 참조 유형입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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