>웹 프론트엔드 >프런트엔드 Q&A >es6 맵 멤버는 고유합니까?

es6 맵 멤버는 고유합니까?

青灯夜游
青灯夜游원래의
2022-10-31 18:43:521728검색

es6 맵 멤버는 독특합니다. ES6의 새로운 Map 데이터 구조는 객체와 유사합니다. 키 값은 문자열로 제한되지 않으며 멤버 값은 고유합니다. Map 구조는 "값-값" 대응을 제공하며 보다 완전한 해시 구조 구현입니다. 맵 객체는 키-값 쌍을 저장하고 키의 원래 삽입 순서를 기억합니다. 모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다.

es6 맵 멤버는 고유합니까?

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

Map과 Set은 모두 ES6의 새로운 데이터 구조입니다.

  • Map은 객체와 유사하며 키 값은 문자열로 제한되지 않으며 멤버 값은 고유합니다.

  • Set은 고유한 멤버 값을 갖는 배열과 유사합니다.

Map 기본 개념

ES6은 Map 데이터 구조를 제공합니다. 객체와 유사하며 키-값 쌍의 집합이기도 하지만 "키"의 범위가 문자열에만 국한되지 않고 다양한 유형의 값(객체 포함)을 키로 사용할 수 있습니다. 즉, 개체 구조는 "문자열-값" 대응을 제공하고, 맵 구조는 "값-값" 대응을 제공하며, 이는 해시 구조의 보다 완전한 구현입니다. "키-값" 데이터 구조가 필요한 경우 Object보다 Map이 더 적합합니다.

지도 기능

  • 지도 객체는 키-값 쌍을 저장하고 키의 원래 삽입 순서를 기억할 수 있습니다.

  • 모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다.

  • Map은 ES6에 도입된 새로운 데이터 구조입니다. ES6 Map and Set을 참조하세요.

맵과 객체의 차이점

  • 객체의 키는 문자열이나 기호만 될 수 있지만, 맵의 키는 어떤 값이라도 될 수 있습니다.

  • Map의 키 값은 순서가 지정되어 있지만(FIFO 원칙) 객체에 추가된 키는 그렇지 않습니다.

    정렬되지 않은 개체에 대한 공식 설명: 1. 객체는 객체 유형의 구성원입니다. 이는 각각 기본 값을 포함하는 순서가 지정되지 않은 속성 모음입니다. 객체 또는 함수는 객체의 속성에 저장된 함수입니다. 방법이라고 합니다. 2. Chrome Opera의 JavaScript 파싱 엔진은 새로운 ECMA-262 5판 사양을 따릅니다. 따라서 for-in 문을 사용하여 객체 속성을 순회하는 경우 순회 순서는 속성 생성 순서가 아닙니다. IE6 IE7 IE8 Firefox Safari용 JavaScript 구문 분석 엔진은 이전 ECMA-262 제3판 사양을 따르며 속성 순회 순서는 속성이 구성되는 순서에 따라 결정됩니다.

  • Map의 키-값 쌍 수는 크기 속성에서 얻을 수 있는 반면, Object의 키-값 쌍 수는 수동으로만 계산할 수 있습니다.

  • 객체에는 자체 프로토타입이 있으며 프로토타입 체인의 키 이름이 객체에 설정한 키 이름과 충돌할 수 있습니다.

Map property

  • Map.prototype.size – Map 객체의 키/값 쌍 수를 반환합니다. Map.prototype.size – 返回 Map 对象键/值对的数量。

Map 操作方法

  • Map.prototype.clear() – 移除 Map 对象的所有键/值对 。
  • Map.prototype.set() – 设置键值对,返回该 Map 对象。
  • Map.prototype.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • Map.prototype.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • Map.prototype.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。

Map 循环方法

Map 的遍历顺序就是插入顺序。

  • Map.prototype.keys():返回键名的遍历器。
  • Map.prototype.values():返回键值的遍历器。
  • Map.prototype.entries():返回所有成员的遍历器。
  • Map.prototype.forEach():遍历 Map 的所有成员。

其他方法

  • for of
Map 작업 방법

Map.prototype.clear() – Map 객체의 모든 키/값 쌍을 제거합니다.

Map.prototype.set() – 키-값 쌍을 설정하고 Map 객체를 반환합니다.

Map.prototype.get() – 키에 해당하는 값을 반환합니다. 존재하지 않으면 정의되지 않은 값을 반환합니다.

Map.prototype.has() – 지도에 키에 해당하는 값이 포함되어 있는지 확인하는 데 사용되는 부울 값을 반환합니다.

Map.prototype.delete() – 맵의 요소를 삭제합니다. 삭제에 성공하면 true를 반환하고 실패하면 false를 반환합니다.

Map 루프 방법

Map의 순회 순서는 삽입 순서입니다.

Map.prototype.keys(): 키 이름의 순회자를 반환합니다. Map.prototype.values(): 키 값의 순회자를 반환합니다.

Map.prototype.entries(): 모든 구성원의 순회자를 반환합니다.

Map.prototype.forEach(): Map의 모든 멤버를 탐색합니다.

다른 방법

for of iterable이 있으므로 이 방법을 사용할 수도 있습니다🎜🎜🎜🎜만들기 시작 🎜🎜🎜 맵 유형 및 새 키워드를 사용하여 맵 생성: 🎜🎜단순 배열이 아니라 Iterator 인터페이스가 있는 모든 데이터 구조와 각 멤버는 두 요소의 배열입니다. 따라서 Set Map 배열은 Map🎜🎜🎜create 빈 지도를 만들고 🎜🎜
let map1 = new Map();
map1.set('123',123)
🎜🎜배열을 추가하여 Map🎜🎜
const m2 = new Map([['baz', 3]]);
🎜🎜set create Map🎜🎜
const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);

const m3 = new Map(set);
🎜🎜map create new map🎜🎜🎜note m3 === m2를 만들 수 있습니다. //false🎜
const m3 = new Map(m2);
🎜🎜예: 무엇을 할 수 있는지🎜🎜🎜🎜객체 간의 가장 큰 차이점: 다양한 유형의 키🎜🎜

字符串

var myMap = new Map(); 
var keyString = "a string"; 
myMap.set(keyString, "和键'a string'关联的值");

对象

var myMap = new Map(); 
var keyObj = {}
myMap.set(keyObj, "和键 keyObj 关联的值");

函数

var myMap = new Map(); 
var keyFunc = function () {} // 函数 
myMap.set(keyFunc, "和键 keyFunc 关联的值");

NaN

var myMap = new Map(); 
myMap.set(NaN, "not a number");

Map 遍历成员方法

keys() , values() , entries()Map 的遍历顺序就是插入顺序

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

使用扩展运算符可以快速转数组

const map = new Map([  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

转为数组后,可以使用数组的map,filter方法

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => &#39;a&#39;, 2 => &#39;b&#39;}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, &#39;_&#39; + v])
    );
// 产生 Map 结构 {2 => &#39;_a&#39;, 4 => &#39;_b&#39;, 6 => &#39;_c&#39;}

Map 增 删 查 清空

const m = new Map();
const o = {p: &#39;Hello World&#39;};

m.set(o, &#39;content&#39;)
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.clear()

与其他数据结构的互相转换

(1)Map 转为数组

前面已经提过,Map 转为数组最方便的方法,就是使用扩展运算符(...)。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, [&#39;abc&#39;]);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ &#39;abc&#39; ] ] ]

var outArray = Array.from(myMap);

(2)数组 转为 Map

将数组传入 Map 构造函数,就可以转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, [&#39;abc&#39;]]
])
// Map {
//   true => 7,
//   Object {foo: 3} => [&#39;abc&#39;]
// }

(3)Map 转为对象

如果所有 Map 的键都是字符串,它可以无损地转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set(&#39;yes&#39;, true)
  .set(&#39;no&#39;, false);
strMapToObj(myMap)
// { yes: true, no: false }

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

(4)对象转为 Map

对象转为 Map 可以通过Object.entries()

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

此外,也可以自己实现一个转换函数。

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

(5)Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set(&#39;yes&#39;, true).set(&#39;no&#39;, false);
strMapToJson(myMap)
// &#39;{"yes":true,"no":false}&#39;

另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, [&#39;abc&#39;]);
mapToArrayJson(myMap)
// &#39;[[true,7],[{"foo":3},["abc"]]]&#39;

(6)JSON 转为 Map

JSON 转为 Map,正常情况下,所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap(&#39;{"yes": true, "no": false}&#39;)
// Map {&#39;yes&#39; => true, &#39;no&#39; => false}

但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap(&#39;[[true,7],[{"foo":3},["abc"]]]&#39;)
// Map {true => 7, Object {foo: 3} => [&#39;abc&#39;]}

其他

Map 的合并

var first = new Map([[1, &#39;one&#39;], [2, &#39;two&#39;], [3, &#39;three&#39;],]); 
var second = new Map([[1, &#39;uno&#39;], [2, &#39;dos&#39;]]); // 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three 
var merged = new Map([...first, ...second]);

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); 
var myMap2 = new Map(myMap1); 
console.log(original === clone); // 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

注意事项

注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set([&#39;a&#39;], 555);
map.get([&#39;a&#39;]) // undefined

虽然NaN不严格相等于自身,但 Map 将其视为同一个键。

let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123

【相关推荐:javascript视频教程编程视频

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

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