Sind es6-Kartenmitglieder einzigartig?

es6-Kartenmitglieder sind einzigartig. Die neue Map-Datenstruktur von ES6 ähnelt einem Objekt. Der Schlüsselwert ist nicht auf Zeichenfolgen beschränkt und die Mitgliedswerte sind eindeutig. Die Map-Struktur bietet eine „Wert-Wert“-Korrespondenz und ist eine vollständigere Hash-Strukturimplementierung. Kartenobjekte speichern Schlüssel-Wert-Paare und merken sich die ursprüngliche Einfügereihenfolge der Schlüssel; jeder Wert (Objekt oder Grundelement) kann als Schlüssel oder Wert verwendet werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Map und Set sind beides neue Datenstrukturen in ES6.

• Map ähnelt einem Objekt, der Schlüsselwert ist nicht auf eine Zeichenfolge beschränkt und der Mitgliedswert ist eindeutig.

• Set ähnelt einem Array mit eindeutigen Mitgliedswerten.

Grundlegende Kartenkonzepte

ES6 stellt die Kartendatenstruktur bereit. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren, der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden. Mit anderen Worten: Die Objektstruktur bietet eine „String-Wert“-Korrespondenz und die Map-Struktur eine „Wert-Wert“-Korrespondenz, was eine vollständigere Implementierung der Hash-Struktur darstellt. Wenn Sie eine „Schlüssel-Wert“-Datenstruktur benötigen, ist Map besser geeignet als Object.

Map-Funktionen

• Map-Objekte speichern Schlüssel-Wert-Paare und können sich die ursprüngliche Einfügereihenfolge von Schlüsseln merken.

• Jeder Wert (Objekt oder Grundelement) kann als Schlüssel oder Wert verwendet werden.

• Map ist eine neue Datenstruktur, die in ES6 eingeführt wurde. Sie können sich auf ES6 Map and Set beziehen.

Der Unterschied zwischen Karten und Objekten

• Der Schlüssel eines Objekts kann nur eine Zeichenfolge oder Symbole sein, aber der Schlüssel einer Karte kann ein beliebiger Wert sein.

• Die Schlüsselwerte in der Karte sind geordnet (FIFO-Prinzip), die dem Objekt hinzugefügten Schlüssel jedoch nicht.

  Offizielle Erklärung zu ungeordneten Objekten: 1. Ein Objekt ist ein Mitglied des Typs Objekt. Es handelt sich um eine ungeordnete Sammlung von Eigenschaften, von denen jede einen primitiven Wert enthält. Objekt oder Funktion Eine in einer Eigenschaft eines Objekts gespeicherte Funktion ist eine Methode genannt. 2. Die JavaScript-Parsing-Engine von Chrome Opera folgt der neuen ECMA-262-Spezifikation der fünften Ausgabe. Wenn Sie daher eine for-in-Anweisung zum Durchlaufen von Objekteigenschaften verwenden, ist die Durchlaufreihenfolge nicht die Reihenfolge der Eigenschaftskonstruktion. Und JavaScript für IE6 IE7 IE8 Firefox Safari Die Parsing-Engine folgt der älteren ECMA-262-Spezifikation der dritten Ausgabe, und die Reihenfolge der Attributdurchquerung wird durch die Reihenfolge bestimmt, in der die Attribute erstellt werden. Die Anzahl der Schlüssel-Wert-Paare von

• Map kann aus dem Größenattribut ermittelt werden, während die Anzahl der Schlüssel-Wert-Paare von Object nur manuell berechnet werden kann.

• Das Objekt verfügt über einen eigenen Prototyp und die Schlüsselnamen in der Prototypenkette können mit den Schlüsselnamen in Konflikt stehen, die Sie für das Objekt festgelegt haben.

Map-Eigenschaft

• Map.prototype.size – Gibt die Anzahl der Schlüssel/Wert-Paare des Map-Objekts zurück. 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-Operationsmethode

Map.prototype.clear() – Entfernen Sie alle Schlüssel/Wert-Paare des Map-Objekts.

Map.prototype.set() – Legen Sie das Schlüssel-Wert-Paar fest und geben Sie das Map-Objekt zurück.

Map.prototype.get() – Gibt den dem Schlüssel entsprechenden Wert zurück. Wenn er nicht existiert, wird undefiniert zurückgegeben.

Map.prototype.has() – Gibt einen booleschen Wert zurück, der verwendet wird, um zu bestimmen, ob die Map den dem Schlüssel entsprechenden Wert enthält.

Map.prototype.delete() – Löscht das Element in der Karte. Es gibt „true“ zurück, wenn der Löschvorgang erfolgreich war, und „false“, wenn er fehlschlägt.

Kartenschleifenmethode

Die Durchlaufreihenfolge der Karte ist die Einfügereihenfolge.

Map.prototype.keys(): Gibt einen Traverser von Schlüsselnamen zurück. Map.prototype.values(): Gibt einen Traverser von Schlüsselwerten zurück.

Map.prototype.entries(): Gibt einen Traverser aller Mitglieder zurück.

Map.prototype.forEach(): Alle Mitglieder von Map durchqueren.

Andere Methoden

for of Da iterierbar ist, können Sie auch diese Methode verwenden🎜🎜🎜🎜Mit der Erstellung beginnen 🎜🎜🎜 Verwenden Sie den Kartentyp und das Schlüsselwort new, um eine Karte zu erstellen: 🎜🎜Nicht nur Arrays, sondern jede Datenstruktur mit einer Iterator-Schnittstelle und jedes Mitglied ist ein Array aus zwei Elementen So kann Set Map array eine Karte erstellen🎜🎜🎜eine leere Karte erstellen und 🎜🎜

let map1 = new Map();
map1.set('123',123)

🎜🎜array hinzufügen, um eine Karte zu erstellen🎜🎜

const m2 = new Map([['baz', 3]]);

🎜🎜set create Map🎜🎜

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);

const m3 = new Map(set);

🎜🎜map eine neue Karte erstellen🎜🎜🎜note m3 === m2 //false🎜

const m3 = new Map(m2);

🎜🎜Beispiel: Was kann getan werden🎜🎜🎜🎜Der größte Unterschied zwischen Objekten: Mehrere Arten von Schlüsseln🎜🎜

字符串

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: 'Hello World'};

m.set(o, 'content')
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}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

var outArray = Array.from(myMap);

（2）数组 转为 Map

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

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

（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('yes', true)
  .set('no', 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('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

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

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

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

（6）JSON 转为 Map

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

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

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

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

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

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

其他

Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]); 
var second = new Map([[1, 'uno'], [2, 'dos']]); // 合并两个 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(['a'], 555);
map.get(['a']) // undefined

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

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

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonSind es6-Kartenmitglieder einzigartig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!